Skip to content
Related Articles

Related Articles

ES6 | Loops
  • Last Updated : 31 Oct, 2019
GeeksforGeeks - Summer Carnival Banner

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:

TypeDescription
for( ; ; )Executes the loop block for a specified number of times under a termination condition.
for…inExecutes the loop block through an object’s properties.
for…ofExecutes 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.




    <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
    

Indefinite: There are two types of Indefinite loops in ES6. Each of them described below with the example:

TypeDescription
whileExecutes the loop block for a specified number of times under a termination condition.
do…whilesimilar 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.




    <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
    

Loop Control Statements: To interrupt the execution of the flow or to control the flow of execution we use Loop Control Statements.

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

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.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :