for Loops

If you want to run the same code multiple times, you could use a while loop, but you would have to carefully manage a counting variable yourself. You have to remember to set it up before the loop, check it in the condition, and manually change it inside the loop body. If you forget to update the variable, your program will freeze forever in an infinite loop.

To solve this problem, JavaScript provides the for statement. It creates a loop by packing the setup, the condition, and the update step all into one neat package at the top of the loop.

Anatomy of a for Loop

Here is the most common way you will see a for loop written:

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

0
1
2

Notice that the parentheses contain three separate expressions separated by semicolons. Let’s look at the exact order in which JavaScript evaluates them:

1. Initialization: This runs exactly once, before the loop even starts. It is usually where you declare your counting variable (like let i = 0).
2. Condition: This is evaluated before every single iteration. If it is true, the loop body runs. If it is false, the loop immediately stops.
3. Afterthought: This is executed at the very end of every iteration, right after the body finishes, but before the next condition check. It is typically used to increment or decrement the counter.

We can prove that the initialization runs exactly once by tracking an outside variable.

let count = 0;
for (let i = (count += 5); i < 10; i++) {
  console.log(i);
}
console.log('Final count:', count);

5
6
7
8
9
Final count: 5

If the initialization ran multiple times, count would have kept increasing. It stayed at 5 because that piece of the statement only executes once.

Skipping the Expressions

Three slots separated by semicolons look like three required parts. All three are optional.

If you omit the condition, JavaScript simply defaults it to true. This means you can leave slots blank if you are managing the logic elsewhere, or even omit them all to create an infinite loop.

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

0
1
2

Going Backwards and By Steps

You are not restricted to just counting up by 1. The afterthought expression can be absolutely anything. If you want to count downwards, or skip numbers, you simply change the condition and the afterthought.

for (let i = 5; i > 0; i -= 2) {
  console.log(i);
}

5
3
1

The Scope Trap: let vs var

When you declare a variable using let inside the initialization block, JavaScript does something very clever: it creates a brand new lexical scope for each iteration of the loop. This means the variable i inside the loop body is actually a fresh binding every time.

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

0
1
2

However, if you use the older var keyword, the variable is shared across all iterations. By the time the asynchronous setTimeout functions actually run, the loop has already finished and the shared var has reached its final value.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

3
3
3

This is one of the many reasons why you should always use let in modern JavaScript!