JavaScript Loops

A loop statement allows the execution of a statement or group of statements multiple times. There are three types of loop statement in JavaScript.

  • 'for' loop - Useful when it is known in advance the number of times the statements within the loop need to be executed.
  • 'while' loop - Repeats a statement or group of statements while an expression evaluates to true. There is a condition to get into the loop, so if the condition evaluates to true at the beginning then the statements inside the loop will never execute.
  • 'do while' loop -This is similar to the 'while' loop except the condition is at the end, so the statements within the loop will always execute once.

'for' Loop

The syntax for the 'for' loop is as follows.

for (initialiser; condition; iterator)
{
   // Statement(s) to execute.
}

The initialiser is the starting value of the loop counter. The condition is an expression that is checked before each iteration of the loop, which must evaluate to true for the statements within the loop to be executed. Finally, the iterator is an expression that is executed at the end of each loop, which usually increments the loop counter.

The following example outputs to the screen the value of the loop counter for each iteration of the loop.

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

Here the initialiser is set to zero and the condition is checking for a value of less than five. With the iterator adding one to the loop counter each time, it means that the statements within the loop will be executed five times. A short hand version of the iterator where one is added to the loop count would be 'i++'. The output from this loop is shown below.

0
1
2
3
4

'while' Loop

As mentioned above, the 'while' loop has a condition, which must evaluate to true before the statements within it can be executed.

while (condition)
{
   // Statement(s) to execute.
}

In the below example, a variable is declared and initialised to zero, then the 'while' loop checks to see that the variable is less than five before outputting it to the screen and incrementing the variable by one.

var i = 0;

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

The output will be the same as in the 'for' loop example above. Note that if the variable 'i' had been declared and initialised to five or above, then the statements within the loop would not be executed at all.

'do while' Loop

The 'do while' loop is a variation of the 'while' loop, where there is a condition to exit the loop rather than enter it. This means that the statements within the loop will always be executed at least once.

do
{
   // Statement(s) to execute.
} while (condition)

The example below initialises a variable to zero, outputs its value and adds one to it, whilst it is less than five.

var i = 0;

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

Again the output will be the same as in the previous examples. Note that if the variable 'i' was initialised to five or above, it would still be output to the screen once because the condition checking whether it is less than five is at the end of the loop.