ES6 | Loops

31 Oct, 2019
Loops are the way to do the same task again and again in a cyclic way. A loop represents a set of instructions that must be repeated. In a loop’s context, a repetition is termed as an iteration.
The following figure illustrates the classification of loops:
Definite: There are three types of Definite loops in ES6. Each of them described below with the example:
for( ; ; ) The for loop executes the code block for a specified number of times.Syntax:for( Initialization; Terminate Condition; Increment/Decrement )The Initialization can be also be known as count value as this variable keeps track of the counting till the terminator. Increment/Decrement the variable to a certain value of steps. Terminate condition determines the indefinite or definite category, because if the terminator statement is valid then the loop gets terminated at a definite time, else it goes for infinity loops and will be an indefinite loop.
Syntax:
for( Initialization; Terminate Condition; Increment/Decrement )
The Initialization can be also be known as count value as this variable keeps track of the counting till the terminator. Increment/Decrement the variable to a certain value of steps. Terminate condition determines the indefinite or definite category, because if the terminator statement is valid then the loop gets terminated at a definite time, else it goes for infinity loops and will be an indefinite loop.
for...in The for...in loop is used to loop through an object’s properties.Syntax:for(variable_name in object) {  
    . . . 
}
In each iteration, one property from the object is assigned to the variable_name and this loop continues till the end of the object properties. It certainly ends its iteration for sure so, it comes under definite loop.
Syntax:
for(variable_name in object) {  
    . . . 
}

In each iteration, one property from the object is assigned to the variable_name and this loop continues till the end of the object properties. It certainly ends its iteration for sure so, it comes under definite loop.
for...of The for...of loop is used to execute the loop block to iterates the iterable instead of object literals.Syntax:for(variable_name of object) {  
    . . .
}
In each iteration, one property from the iterable(array, string, etc) is assigned to the variable_name and this loop continues till the end of the iterates, it certainly ends its iteration for sure so, it comes under definite loop.
Syntax:
for(variable_name of object) {  
    . . .
}

In each iteration, one property from the iterable(array, string, etc) is assigned to the variable_name and this loop continues till the end of the iterates, it certainly ends its iteration for sure so, it comes under definite loop.
Example: This example illustrates all the three loops described above.<script>function geeks() {    var obj = {Geeks:1, on:2, one:3};    document.write("for(;;)<br>")      for( var i = 0 ; i <= 10; i+=2) {        document.write(i+" ")    }      document.write("<br>for...of<br>")      // If 'of' is replaced by 'in' it throws an error     // as 'in' and literal are not compatible    for (var i of ['hello', "Geeks", 3000]) {        document.write(i+" ")     }      // If 'in' is replaced by 'of' it throws an error     // as 'of' and objects are not compatible    document.write("<br>for...in<br>")      for (var i in  obj) {        document.write(obj[i]+" ");     }}geeks();</script>
<script>function geeks() {    var obj = {Geeks:1, on:2, one:3};    document.write("for(;;)<br>")      for( var i = 0 ; i <= 10; i+=2) {        document.write(i+" ")    }      document.write("<br>for...of<br>")      // If 'of' is replaced by 'in' it throws an error     // as 'in' and literal are not compatible    for (var i of ['hello', "Geeks", 3000]) {        document.write(i+" ")     }      // If 'in' is replaced by 'of' it throws an error     // as 'of' and objects are not compatible    document.write("<br>for...in<br>")      for (var i in  obj) {        document.write(obj[i]+" ");     }}geeks();</script>
Output:for(;;)
0 2 4 6 8 10
for...of
hello Geeks 3000
for...in
1 2 3

for(;;)
0 2 4 6 8 10
for...of
hello Geeks 3000
for...in
1 2 3

Indefinite: There are two types of Indefinite loops in ES6. Each of them described below with the example:
While loop: This loop comes under the indefinite loop, where it may go to the undeterminate or infinity stage. This loop is of two types.The while loop executes the instructions each time the condition specified, evaluates to true.Syntax:while (terminator condition) {  
    . . .
} 
while (terminator condition) {  
    . . .
} 
do...while: The do...while loop is similar to the while loop except that the do...while loop doesn’t evaluate the condition for the first time the loop executes. It executes the loop at least once irrespective of the terminator condition.Syntax:do {  
    . . .
} 
while (terminator condition);  

do {  
    . . .
} 
while (terminator condition);  

Example This example illustrates all the three loops described above.<script>function geeks() {    var i = 1;    document.write("while<br>");    while(i <= 10) {        document.write(i+" ");        i += 2    }    document.write("<br>do...while<br>");    var j = 11;    do {          // Prints j even though it is not satisfying        // the condition because the condition is        // not checked yet        document.write(j + " ");        j += 2;    }  while(j <= 10); // ; is necessary}geeks();</script>
<script>function geeks() {    var i = 1;    document.write("while<br>");    while(i <= 10) {        document.write(i+" ");        i += 2    }    document.write("<br>do...while<br>");    var j = 11;    do {          // Prints j even though it is not satisfying        // the condition because the condition is        // not checked yet        document.write(j + " ");        j += 2;    }  while(j <= 10); // ; is necessary}geeks();</script>
Output:while
1 3 5 7 9
do...while
11

while
1 3 5 7 9
do...while
11

Loop Control Statements: To interrupt the execution of the flow or to control the flow of execution we use Loop Control Statements.
Example:
<script>function geeks() {    var i = 1;    document.write("break<br>");    while(i <= 10) {        document.write(i + " ");        if(i == 3) {            document.write("break executed as i==3 is"                    + " true and breaks the loop.");            break;        }        i += 1;    }    var j = 0;    document.write("<br>continue<br>");    while(j <= 10) {        j += 1;        if(j == 4) {            document.write("<br>continue executed as i==3"                + " is true and skips the remaining loop "                + "for that iteration<br>");            continue;        }          if(j == 8)            return;        document.write(j + " ");    }}geeks();document.write("<br>returned to main as j==8 is true.<br>");</script>                  
Output:
break
1 2 3 break executed as i==3 is true and breaks the loop.
continue
1 2 3
continue executed as i==3 is true and and skips the remaining
loop for that iteration
5 6 7
returned to main as j==8 is true.

Used Labels to Control the Flow: A label is simply an identifier followed by a colon (:) that is applied to a statement or a block of code. A label can be used with a break and continue to control the flow more precisely, but label use is not widely used as it leads to time-complexity issues and gets more complicated with more inner loops.
Example:
<script>function geeks() {    outerloop:          for (var i = 0; i <=3; i++) {         document.write("Outerloop: " + i);         innerloop:                       for (var j = 0; j<=3; j++) {                          // Quit the innermost loop             if (i == 1 && j>1){                document.write("<br>innerloop skips the"                    + "rest of the loop as i == 1 && j>1"                    + " outerloop still in execution")                continue innerloop;            }                          // Do the same thing             if (i == 2) {                document.write(" outerloop breaks as i==2 <br>")                break outerloop; // Quit the outer loop             }            document.write("<br>Innerloop: " + j);         }        document.write("<br>")    }}geeks();</script>             
Output:
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
innerloop skips the rest of the loop as i == 1 && j>1 outerloop still in execution
Outerloop: 2 outerloop breaks as i==2

In simple words, we name the loops using a label and whenever according to the execution we can get hold of break and continue of a specific loop anywhere.
ES6
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.