JavaScript - Loop Control

JavaScript Loop Control

JavaScript provides full control to handle loops and switch statements. There may be a situation when you need to come out of a loop without reaching its bottom. There may also be a situation when you want to skip a part of your code block and start the next iteration of the loop.

To handle all such situations, JavaScript providesbreakandcontinuestatements. These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively. Also, JavaScript allows developers to use labels to name the loop.

We have explained the keywords in the below table, which can be used to control the loop.

KeywordExplanationbreakThe ‘break’ keyword is used to come out of the loop.continueThe ‘continue’ keyword is used to skip the current iteration of the loop.labelThe ‘label’ is not a keyword, but you can use any identifier followed by a colon (:) to give a label to the loop. After that, you can use the label to target the particular loop with the break and continue keyword.

In the upcoming chapters, we will learn in detail about the break, continue and label statements.

The break Statement

The JavaScriptbreakstatement, which was briefly introduced with theswitchstatement, is used to exit a loop early, breaking out of the enclosing curly braces.

Flow Chart

The flow chart of a break statement would look as follows −

Example

The following example illustrates the use of abreakstatement with a while loop. Notice how the loop breaks out early oncexreaches 5 and reaches −

Output

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

The continue Statement

The JavaScriptcontinuestatement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block. When acontinuestatement is encountered, the program flow moves to the loop check expression immediately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.

Example

This example illustrates the use of acontinuestatement with a while loop. Notice how thecontinuestatement is used to skip printing when the index held in variablexreaches 5 −

Output

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

Using Labels to Control the Flow

Starting from JavaScript 1.2, a label can be used withbreakandcontinueto control the flow more precisely. Alabelis simply an identifier followed by a colon (:) that is applied to a statement or a block of code. We will see two different examples to understand how to use labels with break and continue.

Line breaks are not allowed between the’continue’or’break’statement and its label name. Also, there should not be any other statement in between a label name and associated loop.

Try the following two examples for a better understanding of Labels.

Example 1

The following example shows how to implement Label with a break statement.

In the example below, we have given the ‘outerloop’ and ‘innerloop’ labels to the loop.

We used the ‘break’ statement in the nested loop with the label. In the output, you can see that it breaks the outer loop from the inner loop.

Output

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!

Example 2

In the below code, we use the continue statement with a label inside the nested loop to skip the current iteration of the outer loop. Whenever the value of q becomes 3, it skips the execution of the remaining code of the current iteration and starts a new iteration.

Output

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!