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></pre>
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></pre>
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 =newSet([10,20,30,30,30,40,50,60]);for(let num of nums){
output.innerHTML += num +", ";}</script></body></html></pre>
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 =newMap();
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></pre>
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.f
