Loop in JavaScript

JavaScript Loops or looping repeat a piece of code till the perticular condition. Thus a loop will run a code block again and again till condition.

javascript loops

The figure above is an example of simple while or for loop, var i=1 is initialization, i<=10 is condition, and i++ is step value. This loop will run ten times.


Type of loop in JavaScript



While Loop

While Loop is Entry Level Loop, which will repeatedly run a code block while a certain condition is true.

 while(condition){
    code block;
}

While Loop Example


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

In the example above, we ve started a variable declaration i=1. Any variabled used inside a loop must be initialized first. If loop is not initialized, this will create error.

The while loop starts from while keyword with condition in parenthesis. while condition says that keep repeating the code block, until i is less than or equal to 5.

i++ is step value, which is increment by 1 in this case.

The above loop will print i five times, starting from 1 to 5.

  1. Initialization, condition and increment are compulsory in while loop.
  2. If increment is missing, loop will runs Infinitely .
  3. If i=12, and condition is i<=10, loop will never run.

Do While Loop

Do While is exit level loop. This will works even if first condition is false, as condition was checked later. This could be helpfull where we wants our loop to run atleast once even if the condition is not true.

do{
    code block;
}         
while(condition)

Do while loop starts with do. While condition will be checked later. This will run code block atleast once.

Do While Loop Example


    var i=12;
    do{
      document.write(i);
      i++;
       }
    while(i<=10)         

The above do while loop starts from 12, while condition is i<=10.

do will work first, and print value of i, i.e. 12.

i++ will increase i value from 12 to 13.

But while condition will terminate loop as i<=10 does't match our condition.

  1. Initialization, condition and increment are compulsory in do while loop.
  2. If increment is missing, loop will runs Infinitely .
  3. If i=12, and condition is i<=10, loop will once and print 12.

For Loop

For loops are the most commonly used loops in javascript. Like While loop, for loops also check condition first, and then execute.


for( initialization; condition; step value ){
    code block;
}
        

for loop starts with for keyword followed by parenthesis. Initialization, condition and step values are inserted inside. Initialization is declared inside for loop. If the condition is ok, only then the loop will continue.

For Loop Example


    for( var i=2; i<=20; i=i+2){
      document.write(i);
    }    

The above for loop starts from 2 and the condition is i<=20.

i=i+2 will increase i value by 2.

value of i is printed only if condition is matched.

The above loop will return Table of 2.

  1. Initialization, condition and increment are compulsory in for loop.
  2. If increment is missing, loop will runs Infinitely .
  3. If i=12, and condition is i<=10, loop will not work.

Nested For Loop

Nested Loop means a loop inside another loop. We can add one or more loop inside a for loop. The inner loop will execute with multiple iteration on each outer loop iteration. Will See example of Javascript for in loop in next article.


for( initialization; condition; step value ){
    for( initialization; condition; step value ){
        code block;
    }
}

Nested For Loop is used to calculate table of numbers from 1 to 10. Here is an example.

1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
2, 4, 6, 8, 10, 12, 14, 16, 18, 20,
3, 6, 9, 12, 15, 18, 21, 24, 27, 30,
4, 8, 12, 16, 20, 24, 28, 32, 36, 40,
5, 10, 15, 20, 25, 30, 35, 40, 45, 50,
6, 12, 18, 24, 30, 36, 42, 48, 54, 60,
7, 14, 21, 28, 35, 42, 49, 56, 63, 70,
8, 16, 24, 32, 40, 48, 56, 64, 72, 80,
9, 18, 27, 36, 45, 54, 63, 72, 81, 90,
10, 20, 30, 40, 50, 60, 70, 80, 90, 100,

for( var i=1; i<=10; i++){                 //10 Times     
    for( var j=1; j<=10; j++){             //10 Times
        document.write((i*j) +", ");          
    }
    document.write("<hr>");
}        

In first iteration, when i=1, and j=1, i*j will be 1.

In Second iteration, when i=1, and j=2, i*j will be 2.

In Third iteration, when i=1, and j=3, i*j will be 3.

In 11th iteration, when i=2, and j=1, i*j will be 2.

In 21st iteration, when i=3, and j=1, i*j will be 3.

In last iteration, when i=10, and j=10, i*j will be 100.


For in Loop

for in loop is used in Arrays and Objects. In Array, a for in loop will return index of array. But in Object, for in loop will return key of Object.