JavaScript - For…of Loop

JavaScript for…of Loop

Thefor…ofloop in JavaScript is used to traverse elements of the iterable object. In each iteration, it gives an element of the iterable object. Iterable objects include arrays, strings, maps, sets, and generators.

The JavaScriptfor…ofloop is a much more efficient way to iterate over iterables than using afor…inloop. Thefor…ofloop iterates over the property value while the for…in loop is used to iterate through the keys (property name) of an object.

Syntax

The syntax of ‘for…of’ loop in JavaScript in as follows −

for (ele of iterable) {
    // loop body
}

Parameters

• ele− It is a current element of the iterable.
• of− It is a JavaScript operator.
• iterable− It is iterable like an object, array, string, etc.

Examples

Example: For…of Loop with Arrays

In the example below, the array contains various strings. After that, we used the for…of loop to traverse each array element. In the output, we can see that it prints each array element.

Output

JavaScript
Python
C
C++
HTML
CSS

Example: For…of Loop with Strings

In JavaScript, the string is also iterable as we can traverse through each character of the string. In the below code, for…of loop is used to traverse through each character of the string.

Output

J, a, v, a, S, c, r, i, p, t,

Example: For…of Loop with Set

In JavaScript, the set contains a unique element. Here, we have passed the array containing numbers as a parameter of the Set() constructor to create a set. After that, we used the for…of loop to traverse the set.

Output

10, 20, 30, 40, 50, 60,

Example: For…of Loop with Map

The map contains the key-value pair in JavaScript and is similar to the object. Here, we created a map and inserted 3 key-value pairs in the map. When we use the for…of loop to traverse the map elements in each iteration, we can get the key and value shown in the code below.

Output

one -> 1
second -> 2
third -> 3

However, you can also use the for…in loop to traverse the iterable like an array, string, map, set, etc.