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.
Open Compiler
<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 arrayfor(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.
Open Compiler
<html><body><div id ="demo">Iterating a string:</div><script>const output = document.getElementById("demo");let str ="Hello";// Iterating a stringfor(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.
Open Compiler
<html><body><p id ="demo">Iterating the Set:</p><script>const output = document.getElementById("demo");const set =newSet([10,20,30,40,40,50,50]);// Iterating a Setfor(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.
Open Compiler
<html><body><div id ="demo">Iterating the Map:<br></div><script>const output = document.getElementById("demo");const map =newMap([["1","one"],["2","two"],["3","three"],]);// Iterating arrayfor(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.
Open Compiler
<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.
Open Compiler
<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.
Leave a Reply