JavaScript

JavaScript: Loop Control

JavaScript: Loop Control

When working in JavaScript, you can experience complete control over the loops and switch statements. Often there are situations when there is no need to complete the entire loop execution just to reach a result that could have been achieved just by executing only a few statements from that loop cycle. Also, in some situations, you might be required to exit out of a particular loop or maybe skip a code block and continue with the interaction of the remaining loop. These situations and conditions can be easily handled with the help of break and continue statements. Exiting a certain loop or skipping a certain block of code, or any similar actions can easily be executed with the help of this statement. 

Understanding the break Statement

When you need to exit a loop prematurely (before completing the execution of the entire loop), you can use break statements. 

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

Following is an example of a JavaScript code using the above-mentioned break statement with a while loop:

<html>
   <body>     
      <script type = "text/javascript">
         <!--
         var a = 0;
         document.write("Loop Start<br /> ");
         
         while (a < 25) {
            if (a == 7) {
               break;   // this helps to break out of the loop, the result is obtained
            }
            a = a + 1;
            document.write( a + "<br />");
         }         
         document.write("Loop Ended<br /> ");
         //-->
      </script> 
   </body>
</html>

The output for the program is:

Loop Start

0

1

2

3

4

5

6

7

Loop Ended

Understanding the continue Statement

When you have to skip a certain block of code and carry out the iteration for the new loop, then you can use continue Statement. On using a continue statement, the program falls back into the loop check expression when the statement declared is reached while executing the respective loop. The iteration for the next loop starts if the condition defined values out to be true. If not, then the control is dropped out of the loop. 

Following is an example of a JavaScript code using above mentioned continue statement with a while loop:

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var a = 0;
            document.write("Loop Start<br /> ");
         
            while (a < 15) {
               a = a + 1;
               
               if (a == 9) {
                  continue;   // the statement used here allows you to skip the remaining loop.
               }
               document.write( x + "<br />");
            }         
            document.write("Loop Ended <br /> ");
         //-->
      </script>      
   </body>
</html>

The output for the program is:

Loop Start

0

1

2

3

4

6

7

8

9

Loop Ended

How to use Labels for Controlling the Flow?

Using labels can provide control flow with pinpoint accuracy. An identifier that is followed by a colon “:” is referred to as a label. These labels are attached to statements and code blocks. 

It is a strict no to make use of any line breaks (in between the both) while dealing with continue or break statements and their label name. Make sure the label name and its assigned loop have no other statements. 

Following is an example of a JavaScript code using the above-mentioned continue or break statement with labels. 

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            document.write("Loop Start<br /> ");
            loopoutside:        // This is the given label name         
            for (var i = 1; i < 7; i++) {
               document.write("Loopoutside: " + i + "<br />");
               loopinside:
               for (var j = 2; j < 6; j++) {
                  if (j > 5 ) break ;           // used to prematurely quit the loopinside
                  if (i == 3) break loopinside;  // Used for the same 
                  if (i == 5) break loopoutside;  // Used to come out from the loopoutside
                  document.write("Loopinside: " + j + " <br />");
               }
            }        
            document.write("Loop Ended <br /> ");
         //-->
      </script>      
   </body>
</html>

The output for the program is:

Loop Start

Loopoutside: 1

Loopinside: 2 

Loopinside: 3 

Loopinside: 4 

Loopinside: 5 

Loopoutside: 2

Loopinside: 2 

Loopinside: 3 

Loopinside: 4 

Loopinside: 5 

Loopoutside: 3

Loopoutside: 4

Loopinside: 2 

Loopinside: 3 

Loopinside: 4 

Loopinside: 5 

Loopoutside: 5

Loop Ended