The For Of Loop
The JavaScript for...of statement loops through the elements of an iterable object.
Syntax
for (variable of iterable) { // code block to be executed}
Iterating
Iterating means looping over a sequence of elements.
Examples
Iterating Over a String
You can use a for...of loop to iterate over the characters of a string:
const greeting = "HelloWorld";
for (const char of greeting) { console.log(char);}
In this example, each character of the string greeting is logged to the console.
Iterating Over an Array
You can use a for...of loop to iterate over the elements of an array:
Example 1
const colors = ["red", "green", "blue"];for (const color of colors) { console.log(color);}
Example 2
const numbers = [1, 2, 3, 4, 5];for (const number of numbers) { console.log(number);}
Iterating Over a Set
You can use a for...of loop to iterate over the elements of a Set:
const fruits = new Set(["apple", "banana", "cherry"]);for (const fruit of fruits) { console.log(fruit);}
Iterating Over a Map
You can use a for...of loop to iterate over the elements of a Map:
const prices = new Map([ ["apple", 1.5], ["banana", 1.0], ["cherry", 2.0]]);for (const [fruit, price] of prices) { console.log(`${fruit}: $${price}`);}
JavaScript Iterators
The iterator protocol defines how to produce a sequence of values from an object. An object becomes an iterator when it implements a next() method.
The next() method must return an object with two properties:
- value: The next value in the sequence.
- done: true if the sequence is complete, false otherwise.
Example: Homemade Iterable
This example shows a homemade iterable that produces an endless sequence of numbers increasing by 10 each time:
// Homemade Iterablefunction createNumbers() { let n = 0; return { next() { n += 10; return { value: n, done: false }; } };}// Create an Iterableconst numbers = createNumbers();console.log(numbers.next().value); // 10console.log(numbers.next().value); // 20console.log(numbers.next().value); // 30
Making an Object Iterable
To make an object iterable, it must implement the Symbol.iterator method, which returns an iterator object with a next() method.
Example
This example creates an object that can be iterated over using a for...of loop:
const myNumbers = {
[Symbol.iterator]() {
let n = 0;
return {
next() {
n += 10;
if (n > 50) {
return { value: undefined, done: true };
}
return { value: n, done: false };
}
};
}
};
for (const num of myNumbers) {
console.log(num); // 10, 20, 30, 40, 50
}
The Symbol.iterator method is called automatically by for...of, but you can also call it manually:
const iterator = myNumbers[Symbol.iterator]();
let result = iterator.next();
while (!result.done) {
console.log(result.value);
result = iterator.next();
}
