JavaScript Loops

A loop runs the same block of code over and over, each time with a different value. Instead of writing ten nearly identical lines, you write the code once and tell JavaScript how many times to repeat it, or when to stop. Loops are what let a program handle 5 items or 5 million with the same few lines.

// Why Loops Exist

// Without a loop: repetitive and fragile
console.log("Row 1");
console.log("Row 2");
console.log("Row 3");
console.log("Row 4");
console.log("Row 5");

// With a loop: one line of work, repeated
for (let i = 1; i <= 5; i++) {
  console.log("Row " + i);
}

Changing 5 to 500 in the loop version takes one keystroke. The manual version would need 495 more lines, and a typo in any one of them would be easy to miss.

// Every Loop Has Three Parts

1. Start: where the loop begins, usually a counter set to 0 or 1
2. Condition: checked before each pass; the loop keeps going while it is true
3. Change: something that moves the loop toward its end, usually adding 1 to the counter

Each single pass through the loop body is called an iteration. The counter is traditionally named i (for "index" or "iteration"), but any name works.

// The Loop Types

Here are the three core loops side by side, each printing 0 to 2. Same job, different shapes:

// for: start, condition, and change all in one line
for (let i = 0; i < 3; i++) {
  console.log(i);
}

// while: start above, condition on top, change inside
let j = 0;
while (j < 3) {
  console.log(j);
  j++;
}

// do...while: body first, condition checked at the bottom
let k = 0;
do {
  console.log(k);
  k++;
} while (k < 3);

Each of the three loops prints exactly the same thing:

// Looping Over a List

The most common job for a loop is working through every item in a list. JavaScript stores lists in arrays. Arrays get a whole section later; here is all you need for now:

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(i + ": " + fruits[i]);
}

The loop counter doubles as the index: on each pass, fruits[i] is the next item. Add a fourth fruit and the loop handles it automatically, because it stops at fruits.length, not a fixed number.

// Loop Scope

Where the counter is declared matters. Declared with let inside the loop header, it is a brand new variable that only exists inside the loop (block scope, from the JS Let lesson). Any outside variable with the same name is untouched:

let i = 5;
for (let i = 0; i < 10; i++) {
  // some code
}
console.log(i);    // the outer i

Leave off the let and the loop uses the existing outer i, changing it as it counts:

let i = 5;
for (i = 0; i < 10; i++) {
  // some code
}
console.log(i);    // the loop overwrote it

It ends at 10, not 9: the loop keeps adding 1 until the condition i < 10 fails, and that happens when i reaches 10. Always declare loop counters with let in the header, so each loop gets its own.

// The Infinite Loop

If the condition never becomes false, the loop never ends. The browser tab freezes and has to be closed.

// DANGER: i never changes, so i < 5 is always true
let i = 0;
while (i < 5) {
  console.log(i);
  // forgot i++
}

// Quick Check

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

// Try It

▶ Open Playground

1. Click Open Playground and run it. Change it to stop at 3, then at 20: only one number changes
2. Make an array of three names and loop over it, printing each one with its index
3. Change < to <= in your array loop and see the extra undefined
4. Open both loop scope examples with their Try it Yourself buttons and confirm you get 5 and 10. Which one changed the outer i?