While and Do....While Loops JS Home  <<  JS Intermediate  <<  While and Do....While Loops

On occasions we need to iterate over sections of code and JS supplies us with loop structures for this purpose. In this lesson we take our first look at loops with the while and do....while loop constructs.

The while Statement


The while statement will loop through a section of code while a condition remains true. If the condition is false to begin with the loop doesn't execute.


// execute the loop till a condition met.
var aVariable = 1;
while (aVariable < 10) {
  alert('aVariable = ' + aVariable);
  aVariable += 4;
}
alert('left first while loop');

// this loop will never execute.
var bVariable = 11;
while (bVariable < 10) {
  alert('bVariable = ' + bVariable);
  bVariable += 4;
}
alert('left second while loop');

Press the button below to action the above code:

The do....while Construct


The do....while construct is similar to the while statement but the loop will always be executed at least once even if the starting condition evaluates to false.


// this loop will execute once.
var bVariable = 11;
do {
  alert('bVariable = ' + bVariable);
  bVariable += 4;
} while (bVariable < 10);
alert('left do....while loop');

Press the button below to action the above code:

The break Statement


The break statement allows us to terminate the current loop or label statement. Execution is passed to the statement following the current loop or label statement.


// execute the loop until loop condition is false.
var aVariable = 1;
while (aVariable < 10) {
  if (aVariable == 3) {
    break; 
  }
  alert('aVariable = ' + aVariable);
  aVariable += 1;
}
alert('left while loop');

Press the button below to action the above code:

The continue Statement


The continue statement allows us to continue from the expression part of the loop or from a predefined label statement of a labelled loop.


// execute the loop until loop condition is false.
var aVariable = 1;
while (aVariable < 5) {
  if (aVariable == 3) {
    aVariable += 1;
    continue; 
  }
  alert('aVariable = ' + aVariable);
  aVariable += 1;
}
alert('left while loop');

Press the button below to action the above code:

The label Statement


The label statement allows to insert a statement identifier we can refer to from a break or continue statement.


// execute the loop until loop condition is false.
var aVariable = 1;
atLabel:
while (aVariable < 5) {
  if (aVariable == 2) {
    aVariable += 1;
    continue atLabel;
  }
  alert('aVariable = ' + aVariable);
  aVariable += 1;
}
alert('left while loop');

Press the button below to action the above code:

Lesson 4 Complete

We can use the while statement when we want to loop through some statements while a condition remains true. If we need a loop executed at least once regardless of the condition evaluation we can use the do....while construct. We also looked at using the break, continue and label statements.

Related Tutorials

JavaScript Intermediate Tutorials - Lesson 5 - For Loops

Reference

JavaScript Reference - while statement
JavaScript Reference - do....while statement
JavaScript Reference - break statement
JavaScript Reference - continue statement
JavaScript Reference - label statement