The for Loop

Writing three console.log statements for three tours works. Writing one for thirty does not. A loop lets you write code once and have the engine run it as many times as needed.

for loop syntax

for (initialization; condition; update) {
  // body
}

The three parts in the parentheses control how the loop runs:

• Initialization — runs once before the loop starts; usually declares the counter variable
• Condition — checked before each iteration; loop runs while this is true
• Update — runs after each iteration; usually increments the counter

for (let i = 0; i < 3; i++) {
  console.log('Iteration:', i);
}
// Iteration: 0
// Iteration: 1
// Iteration: 2

Execution order

Walk through the first few iterations of for (let i = 0; i < 3; i++):

1. let i = 0 — initialization, runs once
2. 0 < 3 — condition is true, body runs
3. i++ — update, i becomes 1
4. 1 < 3 — condition is true, body runs
5. i++ — update, i becomes 2
6. 2 < 3 — condition is true, body runs
7. i++ — update, i becomes 3
8. 3 < 3 — condition is false, loop exits

The loop counter variable

By convention, the counter variable is named i (short for index). It is declared with let because its value changes each iteration.

Counting down works the same way — just reverse the direction:

for (let i = 3; i > 0; i--) {
  console.log(i);
}
// 3, 2, 1

Accessing array elements by index

The counter variable is the key to processing an array — array[i] gives you the element at each position:

const tours = ['Cascade Ridge Hike', 'Summit Trail Run', 'Alpine Lakes Trek'];

for (let i = 0; i < tours.length; i++) {
  console.log(tours[i]);
}
// Cascade Ridge Hike
// Summit Trail Run
// Alpine Lakes Trek

Using tours.length as the upper bound means the loop automatically adjusts if the array grows or shrinks. Never hardcode the length.

break and continue

break exits the loop immediately:

for (let i = 0; i < tours.length; i++) {
  if (tours[i] === 'Summit Trail Run') {
    console.log('Found it!');
    break;  // stop — no need to keep looking
  }
}

continue skips the current iteration and moves to the next:

for (let i = 0; i < tours.length; i++) {
  if (tours[i] === 'Summit Trail Run') {
    continue;  // skip this tour
  }
  console.log(tours[i]);
}
// Cascade Ridge Hike
// Alpine Lakes Trek

Common mistakes

Off-by-one error — using <= instead of < when the condition should stop before the last index:

for (let i = 0; i <= tours.length; i++) {  // BUG: goes one past the end
  console.log(tours[i]);  // logs 'undefined' on the last pass
}

Use i < tours.length, not i <= tours.length, when iterating a zero-indexed array.

Infinite loop — forgetting the update expression so i never changes:

for (let i = 0; i < 3; ) {  // BUG: no i++ — loops forever
  console.log(i);
}

If your browser tab freezes, an infinite loop is the likely cause.

Exercise

const tours = ['Cascade Ridge Hike', 'Summit Trail Run', 'Alpine Lakes Trek'];

// Log every tour
for (let i = 0; i < tours.length; i++) {
  console.log(tours[i]);
}

// Log only even-indexed tours (index 0, 2, ...)
for (let i = 0; i < tours.length; i++) {
  if (i % 2 === 0) {
    console.log(`Even index ${i}: ${tours[i]}`);
  }
}

After running both loops, try adding a fourth tour to the array and confirm the loops handle the new element without any changes.

Recap

• for (initialization; condition; update) runs the body while the condition is true, executing the update after each iteration.
• Execution order: initialize once → check condition → run body → update → repeat.
• Use let i = 0 as the counter; i < array.length as the upper bound; i++ to advance.
• array[i] accesses each element by index inside the loop.
• break exits the loop; continue skips the current iteration.
• Off-by-one: use <, not <=, for zero-indexed arrays. Forgetting the update causes an infinite loop.