For…of loop

The for…of loop creates a loop over the Iterable objects. If is helpful to executes loops on the custom iteration or custom behaviour.

Syntax:

for(var variableName of [CollectionName or iterable or custom Symbol.iterator])
{

}

variableName: On each and every iteration of the for of loop, it holds the new and next value of the collections or iterable’s object.

iterable: It is collections or the Symbol.iterator object.

You can also say that for…of loop is specially created for the Symbol.iterator. When you create the your custom loop behaviour using the Symbol.iterator than you have to use the for…of loop. Symbol.iterator have the next() method which is called by the for…of loop. It will get the data from the next() method and stored into the variableName.

Example:

var Print1to10 ={
  [Symbol.iterator](){
        var count=0;
        return{
          next(){
                return count!=10 ?
                  { done : false, value: ++count } :
                  { done : true };
          }
        };
  }
}

for(var value of Print1to10){
  document.write(value + ", "); //1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
}

In above example we created the custom behaviour loop using the Symbol.iterator, that will help out us to print 1 to 10. Here for…of loop call the next() method of the Symbol.iterator on each and every iterate. If you want to study about the Symbol.iterator click here.

Now the question is how the loop is break on the above example, so answer is that from the next() for…of loop receives the two value that is done and value, if next() method loop send done as true than for..of loop is break, otherwise it executes until it receives the done as true. if done as false than execution of loop is continue. and for…of loop get the value from the value variable of return by the next() method and assign to the variable of the iterator. You can click here to read more about this here.

For…of loop on the String

var string = "JavaScript Hive";

for (var char of string){
        document.write(char + " ");
}

//J
//a
//v
//a
//S
//c
//r
//i
//p
//t
//
//H
//i
//v
//e

For…of loop on Array

var array = [ "JavaScript", "Hive" ];

for (var value of array){
        document.write(value + " ");
}

//JavaScript
//Hive

For…of loop on Map

var maps = new Map( [[ "A" , 1 ] , [ "B" , 2 ] , [ "C" , 3 ]] );

for(var element of maps){
        document.write(element + " ");
}

//A,1
//B,2
//C,3

for(var [key, value] of maps){
        document.write("Key is: "+key + " and Value is: " + value + " ");
}

//Key is: A and Value is: 1
//Key is: B and Value is: 2
//Key is: C and Value is: 3

For…of loop on DOMs elements

var doms = document.querySelectorAll("li");

for(var element of doms){
        document.write(element.innerHTML + " ");
}

//First element
//Second element
//Third element

Difference between for…of loop and for…in loop

The for…in loop will iterate on all enumerable properties of on object. where as the for…of loop is only worked on the specified to the collections, rather than all the objects, It will iterate any any type elements collections that has the Symbol.iterate property.

The for…of loop works on the value of the collections, where for…in loop works on the index of the collections. It means for..of loop returns the value, where for…in loop returns the index.

Let’s see the difference between them by example:

var array = [ "A", "B", "C", "D", "E", "F" ];
array.WebSiteName = "JavaScript Hive";

document.write("For...in");

for ( var index in array){
        document.write(index + ", ");
}

document.write("For...of");

for ( var value of array){
        document.write(value + ", ");
}

//For...in 
//0, 1, 2, 3, 4, 5, WebSiteName, 
//For...of 
//A, B, C, D, E, F,

If you have any question about this please comment down below…

Happy coding...

🙂