Examples on JavaScript Loop Control

Here are more examples on javascript loop control

Example using the break statement

In this example we will be using the break statement to stop the loop when the loop counts till a certain number.

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>break statement LOOP control</title>
</head>
<body>
   <script>
      for(var count =0; count<20; count++){
         if(count==4){
            break;
         }
         document.write("counting numbers "+ count +'<br>');
      }
   </script>
</body>
</html>

RESULT

break statement LOOP control

Now! we will be running the same example but interchanging the position of the if statement block just to see how the outcome looks like

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>break statement LOOP control</title>
</head>
<body>
   <script>
      for(var count =0; count<20; count++){
         document.write("counting numbers "+ count +'<br>');
            if(count==4){
            break;
         }
      }
   </script>
</body>
</html>

RESULT

break statement LOOP control

OBSERVE THE RESULTS!!! You can see that the outcomes became different when we interchanged the position of the if block. This is because web browsers execute JavaScript codes from the top to the bottom. Therefore on the second example, the code was executed before checking if the condition was valid.

Examples using the continue statement

The below example shows loop control using the continue statement. Recall that the continue statement helps us skip a particular result and keeps printing the rest as shown below

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

Now lets change the position of the if statement to see the outcome

<!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++){
      
      document.write('counting numbers '+ count + "</br>");
      if(count==6){
         continue;
      }
   }
   document.write('loop count skipped 6 due to continue statement');
 //-->
   </script>

</body>
</html>

RESULT

continue statement in loops

OBSERVE ANY DIFFERENCE ? You should notice that the “counting number 6 ” that was omitted in the first example wasn’t omitted in the second example. This is because the web browser executes JavaScript Codes From the top to the bottom and the code was executed before checking if the condition was still valid. This error happened because of the wrong placement of the JavaScript codes.

Examples on JavaScript For Loop

Examples on The Use Of Functions in JavaScript