There’re many ways to do things with JavaScript. For instance, there’re lots of ways to iterate through the items of an array.
In this article, we’ll look at several ways we can iterate through a JavaScript array.
The While Loop
The while loop is a loop that’s fast. And we only need the run condition to run the loop.
For instance, we can use it to loop through an array as follows:
const arr = [1, 2, 3]
let i = 0;
while (i < arr.length) {
console.log(arr[i]);
i++;
}
In the code above, we have a while loop with the initial index defined outside as i .
Then in the while loop, we defined the run condition as i < arr.length , so it’ll run if i is less than arr.length .
Then inside the loop body, we log the items from arr by its index, and then increment i by 1 at the end of the loop.
The Do-while Loop
The do...while loop runs the first iteration regardless of the condition. Then at the end of each iteration, it’ll check the run condition to see if it’s still satisfied.
If it is, then it’ll continue with the next iteration. Otherwise, it’ll stop. For instance, we can loop through an array as follows:
const arr = [1, 2, 3]
let i = 0;
do {
console.log(arr[i]);
i++;
}
while (i < arr.length)
In the code above, we have:
do {
console.log(arr[i]);
i++;
}
Which iterates through the entries by accessing the arr ‘s entry via index i , then i is incremented by 1.
Next, it checks the condition in the while loop.
Then it moves on to the next iteration until i < arr.length returns false .
Array.prototype.map
The array instance’s map method is for mapping each array entry into a new value as specified by the callback function.
The callback takes up to 3 parameters. The first is the current item, which is required. The 2nd and 3rd are the current array index and original array respectively.
The callback returns a value derived from the current item.
It can also take an optional 2nd argument to set the value of this inside the callback.
For instance, if we want to add 1 to each number in the array, we can write:
const arr = [1, 2, 3].map(a => a + 1);
In the code above, we have a => a + 1 , which is used to add 1 to a , which is the current item being processed.
Therefore, we get [2, 3, 4] as the value of arr .
We can pass in a value for this in the callback and use it as follows:
const arr = [1, 2, 3].map(function(a) {
return a + this.num;
}, {
num: 1
});
In the code above, we have:
{
num: 1
}
which is set as the value of this . Then this.num is 1 as we specified in the object. So we get the same result as the previous example.
map doesn’t mutate the original array. It returns a new one with the mapped values.
Array.prototype.filter
The array instance’s filter method returns a new array that meets the condition returned in the callback.
The callback takes up to 3 parameters. The first is the current item, which is required. The 2nd and 3rd are the current array index and original array respectively.
The callback returns a value derived from the current item.
It can also take an optional 2nd argument to set the value of this inside the callback.
For instance, we can get a new array with all the entries that are bigger than 1 as follows:
const arr = [1, 2, 3].filter(a => a > 1);
In the code above, we called filter with a => a > 1 to only take entries that are bigger than 1 from the array it’s called on and put it in the returned array.
Then we get that arr is [2, 3] .
To pass in a value of this and use it, we can write:
const arr = [1, 2, 3].filter(function(a) {
return a > this.min;
}, {
min: 1
});
Since we assigned this inside the callback to:
{
min: 1
}
this.min will be 1, so we get the same result as in the previous example.
Conclusion
We can use the while and do...while loop to loop through items until the given run condition is no longer true.
The array instance’s map method is used to map each entry of an array to a different value. The mapped values are returned in a new array.
The filter method is used to return an array that has the entries that meet the condition returned in the callback inside.
