Loop Constructs & Control

While writing a program, you may encounter a situation where you need to perform an action over and over again. In such situations, you would need to write loop statements to reduce the number of lines. Thus we need something which can help us in repeating or looping our work.

Javascript supports 4 types of loop.

  1. Javascript While loop
  2. Javascript do.. while loop
  3. Javascript For loop
  4. Javascript For..in loop

JavaScript - While Loops

The most basic loop in JavaScript is the while loop. The purpose of a while loop is to execute a statement or code block repeatedly as long as an expression is true. Once the expression becomes false, the loop terminates.

Syntax

The syntax of while loop in JavaScript is as follows ?

while (expression){

   Statement(s) to be executed if expression is true

}

Example :

<html>
   <body>
      
      <script type="text/javascript">

            var count = 0;

         
            while (count < 10){
               document.write("Current Count : " + count + "<br />");
               count++;
            }
         
            document.write("Loop stopped!");

      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

The do...while Loop

The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.

Syntax

The syntax for do-while loop in JavaScript is as follows ?

do {

   Statement(s) to be executed;

} while (expression);

Note ? Don’t miss the semicolon used at the end of the do...while loop.

Example :

<html>
   <body>
   
      <script type="text/javascript">

            var count = 0;
            
            do{
               document.write("Current Count : " + count + "<br />");
               count++;
            } while (count < 5);
            

      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

JavaScript - For Loop

The 'for' loop is the most compact form of looping. It includes the following three important parts ?

  • The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.

  • The test statement which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed, otherwise the control will come out of the loop.

  • The iteration statement where you can increase or decrease your counter.

You can put all the three parts in a single line separated by semicolons.

Syntax

The syntax of for loop is JavaScript is as follows ?

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

Example : 

<html>
   <body>
      
      <script type="text/javascript">

            var count;

            for(count = 0; count < 10; count++) {

               document.write("Current Count : " + count + "<br>");

            }
         
      </script>
      
   </body>
</html>

JavaScript for...in loop 

The for...in loop is used to loop through an object's properties. We will discuss Object properties in our next chapter, it will be more clear, for now, let's understand the basic syntax and how to.

Syntax

for ( variablename in object ) {

   statement or block to execute

}

Example :

<html>
   <body>
      
      <script type="text/javascript">
         
            for (myVariable in myObject) {

               document.write(myVariable);

            }

// Example "navigator" is an object in our browser.

           for (var theProperty in navigator) {
               document.write(theProperty);
            }

      </script>
      
   </body>
</html>

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. 

The break Statement

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.

Example 

<html>
   <body>
      
      <script type="text/javascript">
         var x = 1;
         
         while (x < 20)
         {
            if (x == 5){
               break;     // This will exit the loop when x is equals to 5
            }
            x = x + 1;
            document.write( x + " - ");
         }
         
      </script>
      
   </body>
</html>

The continue Statement

The continue statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block. When a continue statement 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.

<html>
   <body>
      
      <script type="text/javascript">
            var x = 1;
         
            while (x < 10)
            {
               x = x + 1;
               
               if (x == 5) {

                  continue; // skip rest of the loop body

               }

               document.write( x + "<br>");
            }
         
      </script>
      
   </body>
</html>

Loading ...

About the Author