JavaScript for…of Loop: A Comprehensive Tutorial

The for…of loop in JavaScript is a convenient way to iterate over iterable objects, such as arrays, strings, sets, maps, and more.

Introduced in ES6 (ECMAScript 2015), for…of provides an elegant syntax to traverse data structures without having to worry about indexing or object properties.

This tutorial will explore the for…of loop with several practical examples.

1. Basic Syntax of for…of Loop

The syntax of the for…of loop is simple and intuitive:

for (const element of iterable) {
  // Code to execute for each element
}

element: A variable that will hold the value of the current element in each iteration.
iterable: The object you want to loop over (arrays, strings, sets, maps, etc.).

2. Using for…of with Arrays

The for…of loop is commonly used to iterate over elements of an array.

Example 1: Iterating Over an Array

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

Output:

apple
banana
orange

Explanation: The loop iterates over each element in the fruits array, logging each fruit to the console.

3. Using for…of with Strings

The for…of loop can iterate over each character in a string.

Example 2: Iterating Over a String

const message = 'Hello, World!';

for (const char of message) {
  console.log(char);
}

Output:

H
e
l
l
o
,
 
W
o
r
l
d
!

Explanation: The loop iterates over each character in the string, including spaces and punctuation.

4. Using for…of with Sets

Sets are collections of unique values. The for…of loop can be used to iterate over elements in a Set.

Example 3: Iterating Over a Set

const uniqueNumbers = new Set([1, 2, 3, 4, 5]);

for (const number of uniqueNumbers) {
  console.log(number);
}

Output:

1
2
3
4
5

Explanation: The loop iterates over each element in the Set, logging each number to the console. Duplicate values are not included in the set.

5. Using for…of with Maps

Maps store key-value pairs, and for…of can be used to iterate over a map’s entries, keys, or values.

Example 4: Iterating Over a Map's Entries

const userRoles = new Map([
  ['Alice', 'Admin'],
  ['Bob', 'Editor'],
  ['Charlie', 'Viewer']
]);

for (const [user, role] of userRoles) {
  console.log(`${user}: ${role}`);
}

Output:

Alice: Admin
Bob: Editor
Charlie: Viewer

Explanation: The loop iterates over each entry in the map. The destructuring assignment ([user, role]) extracts the key and value from each map entry.

Example 5: Iterating Over a Map's Keys and Values

const userRoles = new Map([
  ['Alice', 'Admin'],
  ['Bob', 'Editor'],
  ['Charlie', 'Viewer']
]);

// Iterating over keys
for (const user of userRoles.keys()) {
  console.log(user);
}

// Iterating over values
for (const role of userRoles.values()) {
  console.log(role);
}

Output:

Alice
Bob
Charlie
Admin
Editor
Viewer

Explanation: You can use userRoles.keys() and userRoles.values() to iterate over the keys and values of the map, respectively.

6. Using for…of with Arrays and entries()

The entries() method returns an iterator object containing key-value pairs for each index in an array. Using for…of with entries() allows you to get both the index and the value in each iteration.

Example 6: Iterating Over Array with Index and Value

const colors = ['red', 'green', 'blue'];

for (const [index, color] of colors.entries()) {
  console.log(`Index: ${index}, Value: ${color}`);
}

Output:

Index: 0, Value: red
Index: 1, Value: green
Index: 2, Value: blue

Explanation: The entries() method returns an iterator containing arrays of index-value pairs, which are then destructured in the for…of loop.

7. Using for…of with NodeLists (DOM Elements)

When working with the DOM, you often need to iterate over collections of elements. NodeList objects (returned by methods like document.querySelectorAll) are iterable and can be traversed using for…of.

Example 7: Iterating Over DOM Elements

// Assuming there are multiple

elements on the page const paragraphs = document.querySelectorAll(‘p'); for (const paragraph of paragraphs) { paragraph.style.color = ‘blue'; // Changes the text color of each

element to blue }

Explanation: The for…of loop iterates over each

element in the NodeList and applies a style change to it.

8. Using for…of with Generators

Generators are a special type of function that can be paused and resumed. They produce a sequence of values, making them iterable.

Example 8: Iterating Over a Generator

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const numbers = numberGenerator();

for (const number of numbers) {
  console.log(number);
}

Output:

1
2
3

Explanation: The for…of loop iterates over each value produced by the generator function.

9. Difference Between for…of and for…in

for…of: Iterates over the values of an iterable (like arrays, strings, sets, and maps).
for…in: Iterates over the keys (property names) of an object or array indices.

Example 9: for…of vs. for…in

const arr = ['a', 'b', 'c'];

console.log('Using for...of:');
for (const value of arr) {
  console.log(value); // Outputs the values: a, b, c
}

console.log('Using for...in:');
for (const index in arr) {
  console.log(index); // Outputs the indices: 0, 1, 2
}

Output:

Using for...of:
a
b
c
Using for...in:
0
1
2

Explanation: for…of iterates over the values of the array, while for…in iterates over the indices (keys).

Conclusion

The for…of loop is a versatile tool for iterating over various types of iterable objects in JavaScript, including arrays, strings, sets, maps, NodeList objects, and even generators.

It simplifies the iteration process by allowing you to focus on the elements themselves rather than their indices or properties.

Experiment with these examples to get a solid understanding of how for…of can be used in different scenarios!