Understanding JavaScript’s for…of Loop

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

  1. Readability: The for...of loop is more readable and concise compared to traditional for loops or forEach methods.
  2. Flexibility: It can be used with various iterable objects, including arrays, strings, maps, and sets.
  3. Early Termination: You can use break and continue statements to control the flow of the loop, which is not possible with forEach.

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.

Index
Scroll to Top