While and Do....While LoopsS2C Home « 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');

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');

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');

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');

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');

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

What's Next?

In the next lesson we take another look at JS loops with the for loop.

Homepage Top