Which JavaScript Loop Should You Use?

JavaScript gives you many ways to repeat code. Here is how to choose.

The same task in different styles

Double every number.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const numbers = [1, 2, 3];

// classic for
const a = [];
for (let i = 0; i < numbers.length; i++) {
  a.push(numbers[i] * 2);
}

// for...of
const b = [];
for (const n of numbers) {
  b.push(n * 2);
}

// map
const c = numbers.map(n => n * 2);

console.log(a, b, c); // → [2, 4, 6] [2, 4, 6] [2, 4, 6]

All three give the same result. The map version says what you want (a new array where each number is doubled). The loops spell out how.

Practical advice

1. Start with array methods (map, filter, find) when transforming data. They are short and do not need extra variables. See the Arrays chapter.
2. Use for...of when you need a loop with break, continue, await, or several steps per item.
3. Use for when the index matters, you step by something other than 1, or you go backwards.
4. Use while when the end depends on something other than a counter.
5. Avoid for...in on arrays.

About forEach

forEach calls a function for each item and returns nothing. It cannot be stopped with break, and it does not wait for async work. That is why many developers prefer for...of for side effects (printing, updating the page) and map for creating new arrays.

1

["a", "b"].forEach(item => console.log(item));