Loops & Iteration

Repeating an action — processing a list, retrying a request, running a game frame — is a loop's job. JavaScript offers for, while, do…while, plus the modern for…of and for…in. Knowing which loop fits which job keeps your code short and bug-free.

for: the classic

for (let i = 0; i < 5; i++) {
  console.log(`Iteration ${i}`);
}
// Expected output:
// Iteration 0
// Iteration 1
// … through Iteration 4

Three clauses: initialise (let i = 0), condition (i < 5 — checked before each run), update (i++ after each run). Using let scopes i to the loop, so it cannot leak out.

Counting patterns

// Down
for (let i = 10; i > 0; i--) console.log(i);

// Even numbers only (step by 2)
for (let i = 0; i <= 10; i += 2) console.log(i);

// Loop an array by index
const fruits = ['apple', 'mango', 'kiwi'];
for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}

Tip: cache fruits.length only if you mutate the array inside the loop; otherwise reading .length each pass is clearer.

while and do…while

// while: checks BEFORE running — may run zero times
let n = 5;
while (n > 0) {
  console.log(n--);
}
// → 5 4 3 2 1

// do…while: runs at least ONCE, then checks
let attempts = 0;
do {
  attempts++;
} while (attempts < 3);
console.log(attempts);   // → 3

Rule: use while when the count is unknown up front (keep reading until a condition changes); use do…while for “run once, then maybe repeat” flows like menus.

break and continue

// break — leave the loop entirely
for (const n of [3, 8, 15, 4]) {
  if (n > 10) break;
  console.log(n);       // → 3, 8  (stops at 15)
}

// continue — skip to the next iteration
for (const n of [3, 8, 15, 4]) {
  if (n % 2 !== 0) continue;   // skip odds
  console.log(n);              // → 8, 4
}

for…of: the modern default for lists

const scores = [88, 92, 75];
for (const score of scores) {
  console.log(score);
}

for (const [name, role] of Object.entries({ ada: 'admin' })) {
  console.log(`${name} = ${role}`);   // → ada = admin
}

for…of works on any iterable: arrays, strings, Maps, Sets, NodeLists. It gives values directly — no index bookkeeping, no off-by-one errors. Use it for 90% of list work.

for…in: keys of an object

const user = { name: 'Asha', role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);   // → name: Asha, role: admin
}

Iterating without loop variables: forEach and array methods

[1, 2, 3].forEach((n) => console.log(n * 2));   // → 2 4 6

const doubled = [1, 2, 3].map((n) => n * 2);    // → [2, 4, 6]
const big = [4, 9, 16].filter((n) => n > 5);    // → [9, 16]

map/filter/reduce express what transformation happens instead of how to step through — the full toolkit is next in Arrays & Array Methods.

The infinite loop (and how to avoid it)

// ❌ i never changes — freezes the tab
for (let i = 0; i < 5; ) { … }

// ✅ always include a reachable exit
for (let i = 0; i < 5; i++) { … }

If a loop hangs, check that the condition eventually turns false. Browser dev tools offer a “Stop script” button and per-loop breakpoints to escape.

Loop performance, in one paragraph

Modern engines optimise all of these loops well. Only micro-optimise when profiling proves a hotspot; then prefer simple for loops over deeply chained method calls inside hot paths. Clarity first, speed when measured.

Common mistakes

• Off-by-one — < vs <= decides whether the last element is included; arrays start at index 0.
• Mutating an array while looping it — skipping elements; loop a copy ([...arr]) or iterate backwards when removing.
• for…in over arrays — string keys, inherited props, order surprises.
• Missing update — an accidental infinite loop.
• var in loops — with async callbacks, every iteration shares one binding; let creates a fresh one per pass (the famous timer bug in chapter 19).

Practice checklist

1. Print the multiplication table for 7 (1–12) with a for loop.
2. Find the first element over 100 in an array using for…of + break.
3. Sum an array of numbers with a plain loop, then verify with reduce.
4. Deliberately write an infinite loop, stop it with dev tools, then fix it.

Loops are the machinery — but functions are where programs get their structure. Next: Functions in JavaScript.