Detailed explanation of the usage of loop control statements in JavaScript_Basic knowledge

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

To handle these situations, JavaScript provides break and continue statements. These statements are used to immediately exit any loop or start the next iteration of the loop.
break statement:

The break statement, which is simply introduced with the switch statement, is used to exit the loop early and break the closing curly braces.
Example:

This example illustrates how to use the break statement with a while loop. Note that the loop breaks initially from x to 5, just below the document.write(..) statement, with the closing brace:

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20)
{
 if (x == 5){ 
   break; // breaks out of loop completely
 }
 x = x + 1;
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

This will produce the following results:

Entering the loop
2
3
4
5
Exiting the loop!

We have seen break statement used in switch statement.
continue statement:

The

continue statement tells the interpreter to immediately start the next iteration of the loop and skip the rest of the block of code.

When a continue statement is encountered, the program flow will immediately transfer to the loop to check the expression. If the condition remains true, then the next iteration will start, otherwise the control will exit the loop.
Example:

This example illustrates the use of continue statement with while loop. Please note that the continue statement is used to skip printing when the exponent variable x reaches 5:

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
 x = x + 1;
 if (x == 5){ 
   continue; // skill rest of the loop body
 }
 document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

This will produce the following results:

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!

Use tags to control the flow:

Starting from JavaScript 1.2, tags can be used with break and continue to continue to control the process more accurately.

The

tag is a simple identifier followed by a colon that is applied to a statement or block of code. See two different examples to understand label usage breakout and continue.

Note: Newlines are allowed between continuation or break statements and their tag names. Additionally, there should not be any other declaration between a tag name and the associated loop.
Example 1:

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:  // This is the label name
for (var i = 0; i < 5; i++)
{
 document.write("Outerloop: " + i + "<br />");
 innerloop:
 for (var j = 0; j < 5; j++)
 {
   if (j > 3 ) break ;     // Quit the innermost loop
   if (i == 2) break innerloop; // Do the same thing
   if (i == 4) break outerloop; // Quit the outer loop
   document.write("Innerloop: " + j + " <br />");
  }
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

This will produce the following results:

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:

<script type="text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop:  // This is the label name
for (var i = 0; i < 3; i++)
{
  document.write("Outerloop: " + i + "<br />");
  for (var j = 0; j < 5; j++)
  {
   if (j == 3){
     continue outerloop;
   }
   document.write("Innerloop: " + j + "<br />");
  } 
}
document.write("Exiting the loop!<br /> ");
//-->
</script>

This will produce the following results:

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!