fbpx
April 6, 2020
javascript loop control

JavaScript Loop Control | Learn How To Control Loops in JavaScript

In this tutorial we will be discussing about JavaScript loop control and you will be learning the various methods used to controlling loops when coding in JavaScript. In our previous tutorial we discussed about JavaScript For-in Loop where we explained how to make use of the for-in loop in printing out all the properties of an object. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on:   JavaScript For in loop | Understanding the Use of The For in Loop

JavaScript Loop Control

Sometimes when coding in JavaScript, developers come across situations where there is need to control the output of a loop or control when the loop stops running. Situations like this are very common and can only be taken care of using the knowledge of loop control.

To handle such looping situations, JavaScript allows the use of the break and continue statements. With the help of this statements, developers can control the loop by either coming out of the loop at a specific time, or by starting the next iteration of any loop.

The break statement

The break statement is used to easily exit any loop early. With the help of the break statement loops can easily be stopped at a specific position.

Flow chart for break statement

JavaScript Loop Control break loop statement
Break loop statement

Example using JavaScript

The below example shows how a break statement can be used to exit a loop thereby stopping the loop from getting to the end.

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Break statement in loops</title>
</head>
<body>
   <script type="text/javascript" name="javascript">
   <!--
    document.write('loop count starts' + "</br>");
   var count = 0; 
   for (count=0; count<7; count++){
      if(count==5){
         break;
      }
      document.write('counting numbers '+ count + "</br>");
   }
   document.write('loop count ends at 4 due to break statement');
 //-->
   </script>

</body>
</html>

RESULT

Break statement in loops

The continue Statement

The continue statement is similar to the break statement but over here the loop skips a particular iteration and continues looping till the end. If we are to print out numbers from 1-10 we can use the continue statement to skip printing any number e.g number 6. while the remaining numbers gets printed. for example printing 1,2,3,4,5,7,8,9,10.

Example using JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>continue statement in loops</title>
</head>
<body>
   <script type="text/javascript" name="javascript">
   <!--
    document.write('loop count starts' + "</br>");
   var count = 0; 
   for (count=0; count<10; count++){
      if(count==6){
         continue;
      }
      document.write('counting numbers '+ count + "</br>");
   }
   document.write('loop count skipped 6 due to continue statement');
 //-->
   </script>

</body>
</html>

RESULT

continue statement in loops

Controlling Loops Using Labels

A label is simple identifier with a colon (:) that is applied to a statement or a block of code in order to identify that block of code and control the loop block of code when needed.

Labels can be used to control loops also with the help of the break and continue statements. With labels we can easily run two loops simultaneously without encountering problems.

Examples of looping using labels

<html>
   <head>
      <title> Loop control using labels </title>
   </head>
   <body>      
      <script type = "text/javascript">
         <!--
            document.write("Entering the loop counter!<br /> ");
            outerloop_block:                 
            for (var count = 0; count < 5; count++) {
               document.write("counting outerloop numbers: " + count + "<br />");
               innerloop_block:
               for (var incount = 0; incount < 5; incount++) {
                  if (incount > 3 ) break ;           
                  if (count == 2) break innerloop_block;  
                  if (count == 4) break outerloop_block;  
                  document.write("counting Innerloop numbers: " + incount + " <br />");
               }
            }        
            document.write("Exiting the loop counter!<br /> ");
         //-->
      </script>      
   </body>
</html>

RESULT

Loop control using labels

CONCLUSION

Looping is an important aspect of JavaScript which helps developer carry out actions repeatedly or simultaneously but we hope with the help of this tutorial you now understand how to make use of loop controls when controlling your loops in JavaScript.

NEXT TUTORIAL: JAVASCRIPT FUNCTIONS

Leave a Reply

Your email address will not be published. Required fields are marked *