The for...of
loop in JavaScript is a modern way to iterate over iterable objects such as arrays, strings, maps, and sets. It provides a more readable and concise syntax compared to traditional for
loops or forEach
methods.
Syntax
The basic syntax of the for...of
loop is as follows:
for (let variable of iterable) {
// code to execute for each element
}
Here, variable
holds the current element of the iterable object during each iteration. The iterable
can be an array, string, map, set, or any other object that implements the iterable protocol.
Example 1: Iterating Over an Array
Let’s start with a simple example where we iterate over an array of numbers:
const numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
console.log(num);
}
*Output:
1
2
3
4
5
In this example, num
takes the value of each element in the numbers
array during each iteration.
Example 2: Iterating Over a String
The for...of
loop can also be used to iterate over each character in a string:
const str = "Hello, World!";
for (let char of str) {
console.log(char);
}
*Output:
H
e
l
l
o
,
W
o
r
l
d
!
Here, char
holds each character of the string str
during each iteration.
Example 3: Iterating Over a Map
A Map
object can also be iterated using for...of
, but by default, it iterates over the key-value pairs as arrays. If you want to access the values directly, you can use the values()
method:
const map = new Map([
["name", "Alice"],
["age", 30],
["city", "Wonderland"]
]);
// Iterating over key-value pairs
for (let entry of map) {
console.log(entry);
}
// Iterating over values
for (let value of map.values()) {
console.log(value);
}
*Output:
["name", "Alice"]
["age", 30]
["city", "Wonderland"]
Alice
30
Wonderland
Example 4: Iterating Over a Set
A Set
object can be iterated using for...of
to access each unique value in the set:
const set = new Set([1, 2, 2, 3, 4, 4]);
for (let value of set) {
console.log(value);
}
*Output:
1
2
3
4
Advantages of for…of
- Readability: The
for...of
loop is more readable and concise compared to traditionalfor
loops orforEach
methods. - Flexibility: It can be used with various iterable objects, including arrays, strings, maps, and sets.
- Early Termination: You can use
break
andcontinue
statements to control the flow of the loop, which is not possible withforEach
.
Frequently Asked Questions
Q1: What is the difference between for...of
and for...in
?
The for...in
loop is used to iterate over the enumerable properties of an object, including inherited properties. In contrast, for...of
is used to iterate over the values of iterable objects like arrays, strings, maps, and sets.
Q2: Can I use for...of
with objects?
By default, objects are not iterable. However, you can make an object iterable by implementing the iterable protocol, which involves defining a Symbol.iterator
method on the object.
Q3: Does for...of
work with generators?
Yes, for...of
can be used with generators. A generator function can yield values, and for...of
can iterate over these values.
Q4: Can I modify the iterable object while iterating with for...of
?
Modifying the iterable object while iterating can lead to unexpected behavior. It is generally not recommended to modify the iterable during iteration.
Conclusion
The for...of
loop is a powerful and flexible tool in JavaScript for iterating over iterable objects. Its concise syntax and ability to work with various data structures make it a preferred choice for developers. By understanding how to use for...of
, you can write cleaner and more efficient code.