”;
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.
”;