Loops in JavaScript

A loop will execute the same block of code when a condition is true or a specified number of times.

There are few different types of loops in JavaScript, but they normally do the same thing.

for loop
for..in loop
while loop
do..while loop

Javascript for loop

Javascript for loop is the most widely used type of loop and it runs the same block of code for a certain number of times. That is, you can control how many times it will repeat the same block of code.

Syntax

for( start-condition; loop-condition; increment ){
	Code block //it will execute specified number of times
}

example

for (var i=1;i<=5;i++){
  document.write(i);
}

In the above code:

i=1 – Loop start from 1 (one)
i < =5 – It will execute up to 5 times (1 – 5)
i++ – Each time increment 1 value, that is i = i+1

Javascript Example

<html>
<body>
  <script type="text/javascript">
    for ( var i = 1; i <= 5; i++ ) {
    document.write( i + "    number of time <br>" );
    }
  </script>
</body>
</html>

output

1 number of time
2 number of time
3 number of time
4 number of time
5 number of time

Javascript for..in Loop

Javascript for….in loop is perform to enumerate the properties of a Javascript Object. This loop is convenient to use with arrays or an object, and it enables you to loop through each element in an array without having knowledge of the length of an array (that mean how many elements actually contains).

Syntax

for (variable in [object or array]){
  code blocks;
}

Javascript Source

<html>
<body>
  <script type="text/javascript">
    var arrayElements = new Array("Red","Blue","Green");
    var arrayVal;
    for (arrayVal in arrayElements)
    {
      document.write(arrayElements[arrayVal] + "<br>");
    }
  </script>
</body>
</html>

JavaScript Loop Control

Loops in JavaScript

A loop will execute the same block of code when a condition is true or a specified number of times.

There are few different types of loops in JavaScript, but they normally do the same thing.

for loop
for..in loop
while loop
do..while loop

Javascript for loop

Syntax

for( start-condition; loop-condition; increment ){ Code block //it will execute specified number of times }

example

for (var i=1;i<=5;i++){ document.write(i); }

In the above code:

i=1 – Loop start from 1 (one)
i < =5 – It will execute up to 5 times (1 – 5)
i++ – Each time increment 1 value, that is i = i+1

Javascript Example

output

1 number of time 2 number of time 3 number of time 4 number of time 5 number of time

Javascript for..in Loop

Syntax

for (variable in [object or array]){ code blocks; }

Javascript Source

<html> <body> <script type=”text/javascript”> var arrayElements = new Array(“Red”,”Blue”,”Green”); var arrayVal; for (arrayVal in arrayElements) { document.write(arrayElements[arrayVal] + “<br>”); } </script> </body> </html>

output

Red
Blue
Green

Javascript while Loop

A while loop runs the same code block until the specified condition is true. It enables you to test a condition and keep on looping when it meets the specified condition.

When the javascript program first encounters the while loop, it checks the specified condition. If the condition evaluates to true, the code block inside the while loop will be executed and the condition is re-evaluated. The loop will terminate when its condition evaluates to false. That means, it will evaluate the condition before the code inside the loop has been executed.

Syntax

while (condition){
  code block;
}

Javascript Source

<html>
<body>
  <script type="text/javascript">
    var i=1;
    while (i <= 5)
    {
      document.write( i + "    number of time <br>" );
      i ++;
    }
  </script>
</body>
</html>

output

1 number of time
2 number of time
3 number of time
4 number of time
5 number of time

Javascript do..while loop

The do..while loop runs almost identically to a while loop, with only one key difference. It will executes a block of code once and then checks the specified condition.

Syntax

do{
  code block;
}
while (condition)

There are many situations when you want the code in the while loop to run at least once, regardless of whether the condition in the while statement evaluates to true or false. In these situations you can use do..while loop

Difference between while loop and do..while loop

The difference between a while loop and a do..while loop is that the do..while loop execute the code block at least once whether or not the condition is met.

From the following Javascript program you can understand the difference between a while loop and a do..while loop.

Javascript Example

<html>
<body>
  <script type="text/javascript">
    var myVal=false;
    while(myVal)
    {
      document.write( "Code block executed in while loop <br>" );
    }
    //using do.while loop
    do
    {
      document.write( "Code block executed in do...while loop <br>" );
    }while(myVal);
    document.write( "Finish !!" );
  </script>
</body>
</html>

output

Code block executed in do...while loop
Finish !!

explanation:

The program first set myVal as false (var myVal=false;) . Then the program encounters a while loop. The while loop won’t execute because the specified condition is false (myVal=false;). Then the program encounter a do..while loop. Here you can see even myVal is false the code block will execute once and exit from the do..while loop because the specified condition is false(myVal=false;)

Javascript Infinite Loop

If you have an expression that always evaluates to true , that is your code gets stuck in the loop “forever”. These types of loop is called infinite loop.

for(var i=1;;i++){
  document.write( i + "<br>" );
}

This loop will run forever because there is no condition is specified in the loop statement.

Javascript Break statement

While you are in a loop and you want to exit from the loop when a specified condition is met, in such situations you can use break statement. The break statement exits from the loop body immediately and forcing execution to continue with the next statement after the loop

Javascript Source

<html>
<body>
  <script type="text/javascript">
    var i=1'
    while (i <= 5)
    {
      if (i==2)
      break;
      document.write( i + "    number of time <br>" );
      i ++;
    }
  </script>
</body>
</html>

In the above code , the loop will execute only 1 time because when the loop will meet the condition i==2 , then the break statement will terminate the loop and comes out of the loop body

Continue statement

When the loop meet the continue statement then the loop control goes to the starting point of the loop and skip the remaining code block.

Example

<html>
<body>
  <script type="text/javascript">
    var i=0
    while (i <= 5)
    {
      i ++
      if (i==2)
      continue;
      document.write( i + "    number of time <br>" );
    }
  </script>
</body>
</html>

output

1 number of time
3 number of time
4 number of time
5 number of time
6 number of time

In the output you can see the 2 is missing because when it meets the condition if (i==2) inside the loop, it will continue to the starting point of the loop and skip the remaining code block.