Open In App

ES6 Loops

Improve
Improve
Like Article
Like
Save
Share
Report

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 is 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 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. The 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 the 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 the definite loop.
  • for…of The for…of the loop is used to execute the loop block to iterate 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 the definite loop.

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

javascript




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();


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 is 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 three loops described above. 

javascript




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();


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: 

javascript




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>");


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

javascript




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();


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.



Last Updated : 27 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads