Chapter 8. Loop Statements

8.1. The while Loop

while (condition) {
  substatements
}

If the condition is true, substatements are executed. But unlike the if statement, when the last substatement is finished, execution begins anew at the beginning of the while statement (that is the interpreter "loops" back to the beginning of the while statement). The second pass through the while statement works just like the first: the condition is evaluated, and if it is still true, substatements are executed again. This process continues until condition becomes false, at which point execution continues with any statements that follow the while statement in the script.

Here's an example of a very simple loop:

var i = 3;
while (i < 5) {
  trace("x is less than 5");
}

The example reliably represents the correct syntax of a while loop but is most likely in error. To see why, let's follow along with the interpreter as it executes the example.

var i = 3;
while (i < 5) {
  trace("x is less than 5");
  i++;
}

The update statement, i++, comes at the end of the loop body. When the interpreter goes through our loop, it executes the trace( ) statement as before, but it also executes the statement i++, which adds one to the variable i. With each iteration of the loop, the value of i increases. After the second iteration, i's value is 5, so the test expression, i < 5, becomes false. The loop, therefore, safely ends.

Our loop's update statement performs a fundamental loop activity: it counts. The variable i (called a counter) runs through a predictable numeric sequence -- perfect for methodical tasks such as duplicating movie clips or accessing the elements of an array. Here we duplicate the square movie clip five times without using a loop:

// Name each new clip sequentially and place it on its own level
duplicateMovieClip("square", "square1", 1);
duplicateMovieClip("square", "square2", 2);
duplicateMovieClip("square", "square3", 3);
duplicateMovieClip("square", "square4", 4);
duplicateMovieClip("square", "square5", 5);

And here we do it with a loop:

var i = 1;
while (i <= 5) {
  duplicateMovieClip("square", "square" + i, i);
  i++;
}

Imagine the difference if we were duplicating square 100 times!

The result in the Output window is:

people element 0 is John
people element 1 is Joyce
people element 2 is Margaret
people element 3 is Michael

Notice that the variable i is used both in the test expression and as the array index number, as is typical. Here we use i again as an argument for the charAt( ) function:

var city = "Toronto";
trace("The letters in the variable 'city' are ");
var i = 0;
while (i < city.length) {
  trace(city.charAt(i));
  i++;
}

The Output window shows:

The letters in the variable 'city' are:
T
o
r
o
n
t
o

Finally, instead of dissecting data, we use a loop to construct a sentence from a series of words stored in an array:

var words = ["Toronto", "is", "not", "the", "capital", "of", "Canada"];
var sentence;
var i = 0;
while (i < words.length) {
  sentence += words[i];       // Add the current word to the sentence.

  // If it's not the last word...
  if (i < words.length - 1) {
    sentence += " ";          // ...tack on a space.
  } else {
    sentence += ".";          // ...otherwise, end with a period.
  }
  i++;
}
trace(sentence);              // Displays: "Toronto is not the capital of Canada."

Nearly all loops involve some kind of counter (also sometimes called an iterator or index variable). Counters let us cycle sequentially through data. This is particularly convenient when we determine the counter's maximum limit using the length property of the array or string we want to manipulate, as we did in the preceding example.

It's also possible to create a loop whose end point doesn't depend on a counter. As long as the test expression of the loop eventually becomes false, the loop will end. Here, for example, we examine the level stack of the Flash Player to determine the first vacant level: