JavaScript - The Iterables Object

In JavaScript, iterables are objects that can be iterated through using the for...of loop. They can also be iterated over using other methods like forEach(), map(), etc.

Basically, you can traverse through each element of the iterable in JavaScript.

Here are some examples of the common iterables.

Array
String
Map
Set
Arguments
NodeList
TypedArrays
Generators

Iterate using the for...of loop

In this section, we will iterate through the array elements, string characters, set elements, and key-value pairs of the map using the for...of loop.

Example: Iterate over an array

In the below code, we have defined an array and used the for...of loop to iterate through the array.

The code prints each element of the array in the output.

<html>
<body>
   <div>Iterating the array: </div>
   <div id = "demo"></div>
   <script>
      const output = document.getElementById("demo");
      const array = ["Hello", "Hi", 10, 20, 30];
      // Iterating array
      for (let ele of array) {
         output.innerHTML += ele + ", ";
      }
   </script>
</body>
</html>

Output

Iterating the array:
Hello, Hi, 10, 20, 30,

Example: Iterate over a string

In the below code, we used the for...of loop to iterate through each string character.

The code prints the comma seprated string characters in the output.

<html>
<body>    
   <div id = "demo">Iterating a string: </div>
   <script>
      const output = document.getElementById("demo");
      let str = "Hello";
      // Iterating a string
      for (let char of str) {
         output.innerHTML += char + ", ";
      }
   </script>
</body>
</html>

Output

Iterating a string: H, e, l, l, o,

Example: Iterate over a set

In this example, we have created a set containing multiple elements. After that, we traverse through each element of the set and print in the output.

<html>
<body>
   <p id = "demo">Iterating the Set:  </p>
   <script>
	   const output = document.getElementById("demo");
      const set = new Set([10, 20, 30, 40, 40, 50, 50]);
      // Iterating a Set
      for (let ele of set) {
         output.innerHTML += ele + ", ";
      }
   </script>
</body>
</html>

Output

Iterating the Set: 10, 20, 30, 40, 50,

Example: Iterate over a map

In the example below, we have defined the map containing 3 key-value pairs. In each iteration of the for...of loop, we get a single key-value pair from the map.

<html>
<body>
   <div id = "demo">Iterating the Map: <br></div>
   <script>
      const output = document.getElementById("demo");
      const map = new Map([
         ["1", "one"],
         ["2", "two"],
         ["3", "three"],
      ]);
        
      // Iterating array
      for (let ele of map) {
         output.innerHTML += ele + "<br>";
      }
   </script>
</body>
</html>

Output

Iterating the Map:
1,one
2,two
3,three

Iterate using the forEach() method

In this section, we have used the forEach() method to iterate through the iterable.

Example

In the example below, we used the forEach() method with an array to iterate the array and print each element of the array in the output.

<html>
<body>
	<div> Using the forEach() method: </div>
   <div id="demo"></div>
   <script>
	   const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // Iterating array
      array.forEach((ele) => {
         output.innerHTML += ele + ", ";
      })
    </script>
</body>
</html>

Output

Using the forEach() method:
true, false, 50, 40, Hi,

Iterate using the map() method

In this section, we have used the map() method to iterate through the iterable.

Example

In the example below, the map() method is used with the array. In the callback function of the map() method, we print the array elements.

<html>
<body>
   <p id = "demo">Using the map() method: </p>
   <script>
	   const output = document.getElementById("demo");
      const array = [true, false, 50, 40, "Hi"];
      // Iterating array
      array.map((ele) => {
         output.innerHTML += ele + ", ";
      })
   </script>
</body>
</html>

Output

Using the map() method: true, false, 50, 40, Hi,

However, you can traverse the array, string, etc., using the loops like a for loop, while loop, etc. JavaScript also allows us to define custom iterators to traverse the iterable.

Print Page