ES6 | Loops

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:



Type Description
for( ; ; ) Executes the loop block for a specified number of times under a termination condition.
for…in Executes the loop block through an object’s properties.
for…of Executes the loop block to iterates the iterable instead of object literals.
  • 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.

  • 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.

  • 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.

  • Example: This example illustrates all the three loops described above.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Output:
    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:

Type Description
while Executes the loop block for a specified number of times under a termination condition.
do…while similar to the while loop but executes the loop first and evaluates.
  • 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) {  
        . . .
    } 
  • 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);  
    
  • Example This example illustrates all the three loops described above.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Output:
    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.

Keyword Description
break The break statement is used to take the control out of the loop.
continue The continue statement skips the subsequent statements in the current iteration and takes the control back to the beginning of the loop.
return A return statement ends the execution of the function call and “returns” the result

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>                  

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>             

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.