JavaScript for…of Loop
Summary: in this tutorial, you’ll how to use JavaScript for...of statement to iterate over iterable objects.
Introduction to the JavaScript for…of loop
ES6 introduced a new statement for...of that iterates over an iterable object such as:
- Built-in Array, String, Map, Set, …
- Array-like objects such as
argumentsorNodeList - User-defined objects that implement the iterator protocol.
The following illustrates the syntax of the for...of:
for (variable of iterable) {
// ...
}Code language: JavaScript (javascript)
variable
In each iteration, a property of the iterable object is assigned to the variable. You can use var, let, or const to declare the variable.
iterable
The iterable is an object whose iterable properties are iterated.
JavaScript for of loop examples
Let’s take a look at some examples of using the for...of loop.
1) Iterating over arrays
The following example shows how to use the for...of to iterate over elements of an array:
let scores = [80, 90, 70];for (let score of scores) {
score = score + 5;
console.log(score);
}
Code language: JavaScript (javascript)
Output:
85
95
75
In this example, the for...of iterates over every element of the scores array. It assigns the element of the scores array to the variable score in each iteration.
If you don’t change the variable inside the loop, you should use the const keyword instead of the let keyword as follows:
let scores = [80, 90, 70];for (const score of scores) {
console.log(score);
}
Code language: JavaScript (javascript)
Output:
80
90
70
To access the index of the array elements inside the loop, you can use the for...of statement with the entries() method of the array.
The array.entries() method returns a pair of [index, element] in each iteration. For example:
let colors = ['Red', 'Green', 'Blue'];for (const [index, color] of colors.entries()) {
console.log(`${color} is at index ${index}`);
}
Code language: JavaScript (javascript)
Output:
Red is at index 0
Green is at index 1
Blue is at index 2
In this example, we used the array destructuring to assign the result of the entries() method to the index and color variables in each iteration:
const [index, color] of colors.entries()Code language: CSS (css)
2) In-place object destructuring with for…of
Consider the following example:
const ratings = [
{user: 'John',score: 3},
{user: 'Jane',score: 4},
{user: 'David',score: 5},
{user: 'Peter',score: 2},
];let sum = 0;
for (const {score} of ratings) {
sum += score;
}
console.log(`Total scores: ${sum}`); // 14
Code language: JavaScript (javascript)
Output:
Total scores: 14
How it works:
- The
ratingsis an array of objects. Each object has two properties user and score. - The
for...ofiterate over theratingsarray and calculate the total scores of all objects. - The expression
const {score} of ratingsuses object destructing to assign thescoreproperty of the current iterated element to thescorevariable.
3) Iterating over strings
The following example uses the for...of loop to iterate over characters of a string.
let str = 'abc';
for (let c of str) {
console.log(c);
}Code language: JavaScript (javascript)
Output:
a
b
c
3) Iterating over Map objects
The following example illustrates how to use the for...of statement to iterate over a Map object.
let colors = new Map();colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');
for (let color of colors) {
console.log(color);
}
Code language: JavaScript (javascript)
Output:
[ 'red', '#ff0000' ]
[ 'green', '#00ff00' ]
[ 'blue', '#0000ff' ]Code language: JSON / JSON with Comments (json)
4) Iterating over set objects
The following example shows how to iterate over a set object using the for...of loop:
let nums = new Set([1, 2, 3]);for (let num of nums) {
console.log(num);
}
Code language: JavaScript (javascript)
for...of vs. for...in
The for...in iterates over all enumerable properties of an object. It doesn’t iterate over a collection such as Array, Map or Set.
Unlike the for...in loop, the for...of iterates a collection, rather than an object. In fact, the for...of iterates over elements of any collection that has the [Symbol.iterator] property.
The following example illustrates the differences between for...of and for...in
let scores = [10,20,30];
scores.message = 'Hi';console.log("for...in:");
for (let score in scores) {
console.log(score);
}
console.log('for...of:');
for (let score of scores) {
console.log(score);
}
Code language: JavaScript (javascript)
Output:
for...in:
0
1
2
message
for...of:
10
20
30Code language: CSS (css)
In this example, the for…in statement iterates over the properties of the scores array:
for...in:
0
1
2
messageCode language: CSS (css)
while the for…of iterates over the element of an array:
for...of:
10
20
30Code language: CSS (css)
Summary
- Use the
for...ofloop to iterate over elements of an iterable object.