Loops in JavaScript

while loop

while loop checks for a given condition to be true to execute statements that it contains within it. When the condition becomes false, while loop break the execution of statements.

Syntax

initializer;
while(condition)
{
    statement-1;
    statement-2;
    .....
    modifier;
}

initializer is a variable that is tested within the condition. modifier modifies the initializer so that the condition becomes false at some point.

Note: Make sure that your condition goes false somehow else you will be in an infinite loop.

Example

<script>
var i = 0;
while(i<6)
{
    document.write(i);
    document.write("<br />");
    i++;
}
</script>

do while loop

do while loop first execute the statements that it contain and then check for a condition. So even if the condition is false do-while loop is going to run at least once.

Syntax

initializer;
do
{
    statement-1;
    statement-2;
    .....
    modifier;
}
while(condition);

Example

<script>

var i = 5;

do
{
    document.write(i);
    document.write("<br />");
    i++; 
}
while(i<6);

</script>

for loop

for loop is generally used when the number of iterations/repetitions are already known. Its not that such tasks can't be done by while loop but its just a matter of preference.

Syntax

for(initializer; condition; modifier)
{
    statement-1;
    .....
}

Here, initializer is a variable that is defined once in the beginning of a for loop. It is optional and can be ignored. condition is checked after initialization. Then statements are executed and finally modifier modifies the initializer. After that again condition is checked and the process continues. Modifier can also be ignored.

Note: The only required thing within for loop is condition.

You can drop the curly braces if only one statement is within the for loop.

Syntax

<script>
for(var i=0;i<10;i++)
{
    document.write(i);
    document.write("<br />");
}
</script>

Nested Loops

Any loop can be inserted inside any other loop. This is called nesting. for loop can be nested inside while or for loop. Similarly while loop can be nested inside for loop or another while loop.

Syntax

for(initializer; condition; modifier)
{
    while(condition)
    {
        statements;
    }
}

Example

<script>

var i,j;

for(i=0;i<3;i++)
{
    document.write("Outer Loop : " + i);
    document.write("<br />");

    for(j=0;j<3;j++)
    {
        document.write("Inner Loop : " + j);
        document.write("<br />");
    }
    document.write("<br />");
}

/*************output***************
Outer Loop : 0
Inner Loop : 0
Inner Loop : 1
Inner Loop : 2

Outer Loop : 1
Inner Loop : 0
Inner Loop : 1
Inner Loop : 2

Outer Loop : 2
Inner Loop : 0
Inner Loop : 1
Inner Loop : 2
***********************************/
</script>

Can you guess how above loop works? First outer for loop initializes i, checks for the condition then executes its first two statements. After that inner for loop starts to work. After executing its statements 3 times, outer for loop is given the control again. And the process is repeated.