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.
Array.prototype.forEach
The array instance’s forEach method takes a callback that takes up to 3 parameters, the current item, the index, and the original array.
The index and original array are optional parameters.
The 2nd argument is an optional argument that takes a value of this that’ll be used in the callback.
For instance, we can use it as follows:
const arr = [1, 2, 3];
arr.forEach((a, i, arr) => {
console.log(a, i, arr)
})
In the code above, we defined the arr array, then we iterated through it by calling forEach with a callback that has all 3 parameters.
Then we get:
1 0 "[1,2,3]"
2 1 "[1,2,3]"
3 2 "[1,2,3]"
from the console log output.
To pass in the this value for use inside the callback, we can write the following:
const arr = [1, 2, 3];
arr.forEach(function(a) {
console.log(a + this.num);
}, {
num: 1
})
In the code above, we passed in:
{
num: 1
}
as the 2nd argument of forEach .
Therefore, this.num is 1. So a + this.num is a + 1 , and we get:
2
3
4
from the console log output.
Note that we can’t break of the forEach method once it’s called.
The for-in Loop
The for...in loop is good for iterating through an object’s keys along with the keys of its prototypes all the way up the prototype chain.
It only loops through enumerable properties, and they’re looped through without any defined order.
For instance, we can use it as follows:
class Foo {
constructor() {
this.a = 1;
}
}
class Bar extends Foo {
constructor() {
super();
this.b = 2;
this.c = 3;
}
}
const bar = new Bar();
for (const key in bar) {
console.log(bar);
}
In the code above, we have 2 classes, Foo class with instance variable a and class Bar which extends Foo , which has instance variables b and c .
Therefore, a Bar instance would have a Foo instance as its prototype.
Then when we loop through the keys of bar which is a Bar instance, it’ll log the keys of both the Bar instance and its prototype’s keys.
And we get:
a
b
c
as the values that are logged in the console log.
The for-of Loop
The for...of loop lets us loops through many kinds of object. They include arrays and any kind of iterable objects like maps, sets, arguments , DOM NodeLists, etc.
This loop is introduced with ES2015.
Anything that implements the Symbol.iterator method can be iterated through with the for...of loop.
Unlike the forEach method, we can write break to break the loop.
For instance, we can use it as follows:
for (const a of [1, 2, 3]) {
console.log(a);
}
Then we get:
1
2
3
from the console log output.
We can also iterate through other iterable objects like sets. For instance, we can use it with a set as follows:
for (const a of new Set([1, 2, 3])) {
console.log(a);
}
Then we get the same result.
Regular for Loop
A regular for loop is one the oldest kinds of loops. It has 3 parts, which are the index initializer, a run condition, and an index modifier that runs at the end of each iteration.
For instance, we can use it as follows:
const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
In the code above, we have the arr array. Then we create a for loop to loop through it.
The index initializer is let i = 0 , the run condition is i < arr.length so it runs until the i is 1 less than the arr ‘s length. i++ is the index modifier which updates i at every iterate by increasing i by 1.
Conclusion
We can loop through arrays by using the forEach method, which is part of the array’s instance.
A loop for looping through object keys is the for...in loop.
A more versatile loop is the for...of loop which can loop arrays or any other kind of iterable object.
