1.2 Loops — Repeating Work in Code

Say you want a program to print "hello" five times. The hard way is to write it out five times in a row:

console.log("hello");
console.log("hello");
console.log("hello");
console.log("hello");
console.log("hello");

Five lines. Now imagine a thousand. The loop way says it once and repeats it:

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

Three lines instead of five — and turning this into a thousand repeats is a one-character edit, changing the 5. A loop is how we tell a computer to repeat an instruction as many times as we need, without writing it out more than once.

Underneath, every loop is answering the same three small questions: where do I start, should I keep going, and what comes next? A for loop packs all three into one line; a while loop asks only the middle one and leaves the rest to you.

The for loop is the workhorse when you know roughly how many passes you need. It counts with a variable — usually i — that it initializes once, tests before every pass, and updates after every pass:

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

Reading it left to right: let i = 0 is the init, run once before the first pass; i < 5 is the condition, checked before every pass; and i++ is the update, run after every pass. This one prints 0, 1, 2, 3, 4 — five iterations, not six, because the condition fails as soon as i reaches 5.

Tracing a loop by hand — writing down what the counter is, whether the condition holds, and what prints — is the fastest way to catch a mistake before you run anything. Read across each row: check the condition, run the body, then update.

A while loop drops the counter and just repeats while its condition holds — no counter required. Use it when the number of passes depends on what happens inside the loop, like "keep doubling until we pass 100":

let n = 1;
while (n <= 100) {
  n = n * 2;
}
console.log(n);   // 128

You may loop zero times, or many; nothing about a while loop promises a fixed count. That gives a simple rule for picking between the two forms. Reach for for when you know how many times, or you're stepping a counter over a range or a list — the count is built into the loop header. Reach for while when you'll stop on a condition, not a count — "until the user quits," "until the number is small enough."

Two keywords change a loop's flow mid-pass. break leaves the loop immediately, skipping every remaining iteration:

for (let i = 1; i <= 10; i++) {
  if (i === 5) break;
  console.log(i);   // 1 2 3 4
}

continue is gentler — it skips only the rest of the current pass and moves on to the next one:

for (let i = 1; i <= 5; i++) {
  if (i % 2 === 0) continue;
  console.log(i);   // 1 3 5
}

The most common job a loop does is visit every item in a list. The counter doubles as the item's position, or index:

let fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(i + ": " + fruits[i]);
}
// 0: apple
// 1: pear
// 2: plum

Or, shorter, when you don't need the index at all: for (let f of fruits) { … } walks each item directly.

▶ Press Run to see the output…

The pattern behind almost every useful loop is to keep a variable outside the loop and grow it on every pass. Start it at a sensible value — zero for a sum, the first item for a maximum, zero for a tally — and let the body do the work.

▶ Press Run to see the output…

let nums = [4, 8, 15, 16, 23, 42];
let total = 0;
for (let x of nums) {
  total += x;
}
console.log(total);   // 108

▶ Press Run to see the output…

let nums = [4, 8, 15, 16, 23, 42];
let max = nums[0];
for (let x of nums) {
  if (x > max) max = x;
}
console.log(max);   // 42

▶ Press Run to see the output…

let nums = [4, 8, 15, 16, 23, 42];
let evens = 0;
for (let x of nums) {
  if (x % 2 === 0) evens++;
}
console.log(evens);   // 4

A loop needs no formula to add up \(1 + 2 + \cdots + 100\) — it just adds one number at a time, in exactly \(100\) steps, and lands on

That closed form is a nice check that the loop and the arithmetic agree.

A loop can sit inside another loop. For each pass of the outer loop, the inner loop runs start to finish — three outer passes times three inner passes is nine lines:

for (let r = 1; r <= 3; r++) {
  for (let c = 1; c <= 3; c++) {
    console.log(r, c);
  }
}

Nested loops are how we handle grids, tables, and pairs. Building each row as a string before printing it makes a multiplication grid:

for (let r = 1; r <= 3; r++) {
  let row = "";
  for (let c = 1; c <= 3; c++) {
    row += (r * c) + " ";
  }
  console.log(row);
}
// 1 2 3
// 2 4 6
// 3 6 9

Here the outer loop is the row and the inner loop is the columns across that row. The inner count can also depend on the outer counter, not just repeat a fixed number of times — one more star each row prints a triangle:

for (let r = 1; r <= 4; r++) {
  console.log("*".repeat(r));
}
// *
// **
// ***
// ****

Row r prints r stars — the shape grows with the counter.

▶ Press Run to see the output…

Two mistakes account for most loop bugs. The first is an off-by-one error — running the body one time too many:

let a = [10, 20, 30];
for (let i = 0; i <= a.length; i++) {
  console.log(a[i]);   // ...30, undefined
}

Indexes are \(0, 1, 2\) — but i <= 3 also tries a[3], which doesn't exist. The fix is to stop before the length, not at it:

let a = [10, 20, 30];
for (let i = 0; i < a.length; i++) {
  console.log(a[i]);   // 10, 20, 30
}

Use <, not <=, when looping to length. The second mistake is the infinite loop — a condition that never turns false because nothing inside the loop moves it:

let i = 0;
while (i < 5) {
  console.log(i);
}   // i stays 0 — forever

The fix is to make progress toward the exit on every pass:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;   // now it reaches 5 and stops
}

▶ Press Run to see the output…

The fastest way to trust a loop is to run it. The example below is live: the same sum-1-to-\(n\) accumulator from Worked Example 1.2.1, followed by the same triangle from the nested loops above. Change a bound, print a bigger triangle, sum only the odd numbers — then press Run.

▶ Press Run to see the output…

In one breath:

1. A loop runs a body again and again until a condition stops it.
2. for when you know the count or step a counter; while when you stop on a condition.
3. Keep an accumulator outside the loop to sum, find a max, or tally.
4. Nest loops for grids and patterns; the inner loop runs fully each outer pass.
5. Watch for off-by-one and the infinite loop — always give the loop a way to stop.

A loop trades repetition for a tiny bit of bookkeeping — a counter or a condition. Once you can read the three parts of a loop, most real programs stop looking mysterious. The fastest way to trust a loop is to run it: change a bound, print a bigger triangle, sum only the odd numbers.

You can now write for and while loops, loop over lists, accumulate results, nest loops, and avoid the classic bugs. Next: §1.3 Functions — packaging code you can reuse.