8.5 Loops

Loops are used to execute a code block repeatedly. JavaScript defines three principal statements for executing loops: the while statement, the do...while statement, and the for statement.

Note

Just like with Java, C#, and PHP, JavaScript expressions use the double equals (==) for comparison. If you use the single equals in an expression, then variable assignment will occur.

What is unique in JavaScript is the triple equals (===), which only returns true if both the type and value are equal. This comparator is needed because JavaScript will coerce a primitive type to an object type when it is being compared to another object with the double equals. JavaScript will also use type coercion when comparing two primitive values of different types.

Test Your Knowledge #2

Modify your results from previous Test Your Knowledge (or create a copy of previous version) and implement the following functionality.

  1. Display an error message to the console if the user input is not a valid number.

Like conditionals, loops use the () and {} blocks to define the condition and the body of the loop, respectively.

8.5.1 While and do . . . while Loops

The while loop and the do...while loop are quite similar. Both will execute nested statements repeatedly as long as the while expression evaluates to true. In the while loop, the condition is tested at the beginning of the loop; in the do...while loop the condition is tested at the end of each iteration of the loop. Listing 8.5 provides examples of each type of loop.

Listing 8.5 While loops


let count = 0; 
while (count < 10) { 
  // do something 
  // ... 
  count++; 
} 
count = 0; 
do { 
  // do something 
  // ... 
  count++; 
} while (count < 10);

As you can see from this example, while loops normally initialize a loop control variable before the loop, use it in the condition, and modify it within the loop. One must be sure that the variables that make up the condition are updated inside the loop (or elsewhere) to avoid an infinite loop!

8.5.2 For Loops

For loops combine the common components of a loop—initialization, condition, and postloop operation—into one statement. This statement begins with the for keyword and has the components placed within () brackets, and separated by semicolons (;) as shown in Figure 8.11.

Figure 8.11 For loop

The figure consists of a JavaScript code with labels.

Probably the most common postloop operation is to increment a counter variable, as shown in Figure 8.11. An alternative way to increment this counter is to use i+=1 instead of i++.

There are two additional, more specialized, variations of the basic for loop. There is a for...in loop and in ES6 and beyond, a for...of loop. The for...in loop is used for iterating through enumerable properties of an object, while the more useful for...of loop is used to iterate through iterable objects, and will be demonstrated in the next section on arrays.

Note

Infinite while loops can happen if you are not careful, and since the scripts are executing on the client computer, it can appear to them that the browser is “locked” while endlessly caught in a loop, processing. Some browsers will even try to terminate scripts that execute for too long a time to mitigate this unpleasantness.