Which Iteration Method Fits Which Job?

Choose the method by thinking about the shape of the answer that you want. If you want a new array of changed values, use map. If you want a smaller group, use filter. If you want a single value, use reduce. If you only want to run something for each item, use forEach. If you want a yes-or-no answer, use some or every. If you want the one item that matches, use find.

const scores = [12, 45, 78, 91];

// forEach: do something for each item, and build no new array.
let total = 0;
scores.forEach(function (score) {
  total = total + score;
});
console.log(total);   // 226

// map: change every item into a new array of the same length.
const marks = scores.map(function (score) {
  return score / 10;
});
console.log(marks);   // 1.2, 4.5, 7.8, 9.1

// filter: keep only the items that match.
const high = scores.filter(function (score) {
  return score >= 50;
});
console.log(high);   // 78, 91

// find: only the first match.
console.log(scores.find(function (score) {
  return score > 50;
}));   // 78

// some and every: yes-or-no questions.
console.log(scores.some(function (score) {
  return score > 90;
}));   // true
console.log(scores.every(function (score) {
  return score > 10;
}));   // true

Two differences are worth making clear. some and every stop early, so some stops as soon as it finds a true result and every stops at the first false one. find and findIndex stop early as well, which is why they are cheaper than filter when you only want the first match.

And forEach is the one that people use wrongly most often. It gives back nothing, so you cannot chain it, and using it to build a new array means that you are changing a variable from outside the callback. That is exactly the problem that map exists to solve.

One more difference catches people out. map and filter skip the gaps in a sparse array, and map leaves those gaps in the result. If your array might have gaps, fill it in before you change it.

They differ in what they give back and what they walk over. forEach calls your function once for each item and gives back nothing, so it exists purely for the things your function does. map calls your function once for each item and gives back a new array that holds the results. for...of is not an array method at all. It is a loop in the language that hands you the values of anything you can loop over, one at a time.

const items = [1, 2, 3];

const viaForEach = [];
items.forEach(function (number) {
  viaForEach.push(number * 2);
});

const viaMap = items.map(function (number) {
  return number * 2;
});

console.log(viaForEach, viaMap);   // 2, 4, 6 and 2, 4, 6
console.log(viaForEach === viaMap); // false, they are two different arrays

// for...of gives you the values.
for (const value of items) {
  console.log(value);   // 1, 2, 3
}

// for...in gives you the keys as text.
for (const key in items) {
  console.log(key);   // 0, 1, 2
}

The practical difference between forEach and map is that map keeps the change inside the array tools, so the result is a value rather than a variable that you changed from inside a callback.

The difference between for...of and for...in is the one that causes real bugs. for...of gives you the values, and for...in gives you the keys, and keys are always text. Using for...in on an array gives you the index as a piece of text, and it also walks the prototype chain, so it can pick up inherited properties. for...in is meant for objects. For an array, use for...of or one of the array methods.

for...of has one more advantage. It works with anything you can loop over, so you can use it on a string, a Set, a Map, or the result of a generator. It also supports break and continue, which the array methods do not.

A classic for loop hands you the index and expects you to reach into the array with it. A for...of loop hands you the value directly, and it works with anything you can loop over, not only arrays.

const items = ['a', 'b', 'c'];

// The classic loop gives you the index.
for (let index = 0; index < items.length; index++) {
  console.log(index, items[index]);
}

// for...of gives you the values.
for (const item of items) {
  console.log(item);
}

// for...of works on anything you can loop over.
for (const letter of 'hi') {
  console.log(letter);
}

Three differences matter in practice. The classic loop is easy to get wrong at the edges, because the boundary check has to be written correctly, and for...of removes that whole class of bug. The classic loop can count backwards or skip items easily, while for...of needs a counter of your own for that. And for...of reads the values in order from anything you can loop over, including strings, sets, maps, and generators.

There are two small details to remember. The for...of loop creates an iterator for the collection, which costs a little more than an index loop over a small full array, so in a very hot number loop a plain for loop can still be measurably faster. And if you change the array while you are looping over it with for...of, the iterator reads the live length, so adding items inside the loop will keep the loop visiting the new items, which surprises people.

If you need the index together with the value, call the entries() method on the array and take the pair apart. That keeps the value-first way of reading while still giving you the position.