JavaScript for…of Loop

Last Updated : 30 Aug, 2024

The JavaScript for…of loop is a modern, iteration statement introduced in ECMAScript 2015 (ES6). It allows developers to iterate over iterable objects such as arrays, strings, maps, sets, and more. It provides a simpler syntax compared to traditional for loops.

What is the for…of Loop?

The for…of loop iterates over the values of an iterable object, which is different from the for…in loop that iterates over the enumerable properties of an object.

Syntax:

for ( variable of Iterable ) {
    // Code block to be executed
}

Parameters:

variable: Represents the current value of each iteration from the iterable.
iterable: Any object that can be iterated over (e.g., arrays, strings, maps).

Examples of Using for…of Loop

1. Iterate Over an Array using for…of Loop

Arrays are one of the most common data structures in JavaScript. The for…of loop provides a concise way to iterate over array elements:

Example: The code initializes an array with values 1 through 5. It then iterates over each element of the array using a for…of loop, logging each element to the console.

JavaScript

const array = [ 1, 2, 3, 4, 5 ];

for (const item of array) {
    console.log(item);
}

Output

2. Iterating Over a String using for…of Loop

Strings are also iterable objects in JavaScript. You can use the for…of loop to iterate over each character in a string.

JavaScript

const str = "Hello";

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

Output

H
e
l
l
o

Code Explanation

str is the string you want to loop over.
Initiates the for...of loop, where char represents each character in the string during each iteration.
console.log(char) prints each character to the console during each iteration of the loop.

3. Iterating Over a Map using for…of Loop

Maps are a new data structure in ES6 that store key-value pairs. The for…of loop can be used to iterate over the entries of a map.

JavaScript

const map = new Map([
    ["name", "Akash"],
    ["age", 25],
    ["city", "Noida"]
]);

for (let [key, value] of map) {
    console.log(`${key}: ${value}`);
}

Output

name: Akash
age: 25
city: Noida

Code Explanation

First, we create a Map object where we want to iterate over.
Initiates the for...of loop, where [key, value] represents each key-value pair in the Map during each iteration.
Inside the loop, console.log(`${key}: ${value}`); prints each key-value pair to the console during each iteration of the loop.

4. Iterating Over a Set using for…of Loop

Sets are another new data structure in ES6 that store unique values. You can use the for…of loop to iterate over the elements of a set.

JavaScript

let set = new Set([1, 2, 3, 4, 5]);

for (let value of set) {
    console.log(value);
}

Output

5. Iterating Over an Object’s Properties using for…of Loop

While the for…of loop is not directly used to iterate over object properties, you can use it in combination with Object.keys(), Object.values(), or Object.entries() to achieve this.

JavaScript

let person = {
    name: "Akash",
    age: 25,
    city: "Noida"
};

for (let key of Object.keys(person)) {
    console.log(`${key}: ${person[key]}`);
}

Output

name: Akash
age: 25
city: Noida

The for…of loop in JavaScript provides a powerful and efficient way to iterate over iterable objects. Its syntax is simpler and more intuitive compared to traditional loops, making code easier to read and maintain. For more advanced JavaScript tutorials and examples, explore our JavaScript Tutorial and JavaScript Examples.