JavaScript - For...of Loop

JavaScript for...of Loop

The for...of loop 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 JavaScript for...of loop is a much more efficient way to iterate over iterables than using a for...in loop. The for...of loop 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.

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        const arr = ["JavaScript", "Python", "C", "C++", "HTML", "CSS"];
        for (let ele of arr) {
            output.innerHTML += ele + "<br>";
        }
    </script>
</body>
</html>

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.

<html>
<head>
    <title> JavaScript - for...of loop </title>
</head>
<body>
    <p id="output"> </p>
    <script>
        const output = document.getElementById("output");
        let str = "JavaScript";
        for (let char of str) {
            output.innerHTML += char + ", ";
        }
    </script>
</body>
</html>

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.

<html>
<head>
   <title> JavaScript - for...of loop </title>
</head>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const nums = new Set([10, 20, 30, 30, 30, 40, 50, 60]);
      for (let num of nums) {
         output.innerHTML += num + ", ";
      }
   </script>
</body>
</html>

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.

<html>
<body>
   <p id="output"> </p>
   <script>
      const output = document.getElementById("output");
      const map = new Map();
      map.set("one", 1);
      map.set("second", 2);
      map.set("third", 3)
      for (let [k, v] of map) {
         output.innerHTML += k + " -> " + v + "<br/>";
      }
   </script>
</body>
</html>

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.

Print Page