9.4. Breaking Down the for Statement

Having seen several examples, we will now explore the syntax of a for loop in more depth.

Recall the first example of a for loop that we looked at.

for (let i = 0; i < 51; i++) {
   console.log(i);
}

We broke down the flow of execution of this loop, noting that the loop executes once for each of the values of i from 0...50. The three components of the loop---loop variable, loop condition, and update expression---dictate exactly how this loop executes. So far, we have only seen for loops with this exact form:

for (let i = 0; i < upperBound; i++) {
   // loop body
}

However, the three components of a for loop statement can take different forms to create more complex looping behavior.

9.4.1. for Loop Anatomy

The general form of a for loop is:

for (initial expression; loop condition; update expression) {
   loop body
}

Let's look at each of the three components that affect how this loop iterates.

9.4.1.1. Initial Expression

The initial expression is executed once, before any iterations of the loop. It can be any expression, even the empty expression (which contains no code). However, it almost always declares and initializes a variable, known as the loop variable.

The loop variable can be initialized to any value.

Examples

This loop prints 3...9.

for (let i = 3; i < 10; i++) {
   console.log(i);
}

This loop prints each of the letters C, o, d, and e on a separate line.

let name = "LaunchCode";

for (let i = 6; i < name.length; i++) {
   console.log(name[i]);
}

To avoid confusion and bugs, you should give your loop variable a unique name, one that you have not used elsewhere in your program. In cases where the loop variable is serving as a "counter" for iterations of a loop, it is conventional to use i for the variable name. In the case of nested for loops (loops inside of loops), the variables j, k, etc. are often used.

Note

The loop variable is typically used by the loop body, but this is not required. The following example is a valid for loop that prints "LaunchCode" 42 times.

for (let i = 0; i < 42; i++) {
   console.log("LaunchCode");
}

9.4.1.2. Loop Condition

The loop condition is executed before each loop iteration. It is always a boolean expression, evaluating to true or false. If the condition is true, the loop body executes. If the condition is false, loop execution stops and the program continues with the next line of code below the loop.

Example

This loop does not iterate at all, because its condition is false to start with.

for (let i = 0; i < -1; i++) {
   console.log("LaunchCode");
}

It is critical that the loop condition eventually becomes false. A loop for which the condition is never false is known as an infinite loop, because it never stops iterating. A program that contains an infinite loop will only stop after running out of memory or being manually stopped (for example, using control+c in a terminal).

Example

This is an infinite loop, because its condition will always be true.

for (let i = 0; i > -1; i++) {
   console.log("LaunchCode");
}

You will accidentally write an infinite loop at some point; doing so is a rite of passage for new programmers. When this happens, don't panic. Stop your program and figure out why your loop condition never became false.

9.4.1.3. Update Expression

The final component in a for loop definition is the update expression, which executes after every iteration of the loop. While this expression may be anything, it most often updates the value of the loop variable.

In all of the examples we have seen so far, the update expression has been i++, incrementing the loop variable by 1. However, it can update the loop variable in other ways.

Example

This loop prints even integers from 0...50.

for (let i = 0; i < 51; i = i + 2) {
   console.log(i);
}

A bad choice of update expression can also cause an infinite loop.

Example

This loop repeats indefinitely, since i becomes smaller with each iteration and thus is never greater than or equal to 51.

for (let i = 0; i < 51; i--) {
   console.log(i);
}

Try It!

How does each of the three components affect the behavior of a for loop? Experiment by modifying each of them in this example: the variable initialization, the boolean condition, and the update expression.

for (let i = 0; i < 51; i++) {
   console.log(i);
}

repl.it

9.4.2. Check Your Understanding

Consider the program:

let phrase = "LaunchCode's LC101";

for (let i = 0; i < phrase.length - 1; i = i + 3) {
   console.log(phrase[i]);
}

Question

How many times does the loop body execute?

1. 5

2. 6

3. 17

4. 18

Question

Which set of characters is printed by the loop? (We have placed characters for the choices below on the same line, but they would be on separate lines in the actual program output.)

1. 'LaunchCode's LC101'

2. 'LaunchCode's LC10'

3. 'LnCe 1'

4. 'LnCe '