Loops in JavaScript

This chapter follows Control flow in JavaScript.

for, while, and do-while

The C-style for (init; test; update) loop is unchanged. while prechecks; do...while runs at least once.

1
for (let i = 0; i < items.length; i++) {
2
  process(items[i]);
3
}
4

5
let n = 0;
6
while (n < 10) n++;
7

8
do {
9
  readChunk();
10
} while (hasMore);

Prefer let in the init clause so the index is block-scoped per iteration when using modern style.

for-of versus for-in

for...of iterates values of iterable objects (arrays, strings, Map, Set, generators, most DOM collections). for...in enumerates enumerable string keys on an object and its prototype chain—wrong for dense arrays and a security footgun on plain objects.

1
const ids = [10, 20, 30];
2
for (const id of ids) console.log(id); // 10, 20, 30
3

4
const obj = { a: 1, b: 2 };
5
for (const key in obj) console.log(key, obj[key]); // own + inherited enumerable keys

Use Object.keys(obj), Object.entries(obj), or for...of over a Map when you need predictable iteration.

break and continue

Unlabeled break exits the innermost loop or switch. continue skips to the next iteration of the innermost loop. Labelled forms are described in the control-flow chapter.

1
for (const row of matrix) {
2
  if (row.every((cell) => cell === 0)) continue;
3
  if (row.some((cell) => cell < 0)) break;
4
  render(row);
5
}

The var closure trap

var is function-scoped, not per-iteration. A classic interview bug: scheduling callbacks in a loop with var.

1
for (var i = 0; i < 3; i++) {
2
  setTimeout(() => console.log(i), 0);
3
}
4
// Logs 3, 3, 3
5

6
for (let j = 0; j < 3; j++) {
7
  setTimeout(() => console.log(j), 0);
8
}
9
// Logs 0, 1, 2

let and const in a for loop head get a new binding per iteration. With var, capture the value with an IIFE or forEach if you cannot use let.

for-await-of

for await...of consumes async iterables (streams, paginated APIs wrapped as async generators). It must appear inside an async function or top-level module context that allows await.

1
async function drain(readable) {
2
  for await (const chunk of readable) {
3
    process(chunk);
4
  }
5
}

Array methods versus loops

.forEach, .map, and .filter are not loops in the grammar sense—they are function calls and cannot use break/continue on an outer loop. Use a for...of when you need early exit or await inside the body (unless you use Promise.all with map).

Destructuring in loop heads appears in Destructuring and spread.

Next: Functions in JavaScript.