What is the difference between forEach and map?

The methods look similar because both visit every element, but their contracts are different. Choosing the wrong one usually produces an accidental undefined or a loop that cannot be exited early.

const values = [1, 2, 3];

const doubled = values.map((value) => value * 2);
const sideEffect = values.forEach((value) => console.log(value));

console.log(doubled); // [2, 4, 6]
console.log(sideEffect); // undefined

When to use each

• Use map when you need a new array with one output per input
• Use forEach when you only need to perform an action, such as logging or updating an external store
• Use for...of when you need break, continue or await inside the loop
• Use some or every when you need to stop as soon as the answer is known

Returning a value from a forEach callback does not build an array. That value is discarded, which is a common source of bugs when someone expects forEach to behave like map.

const ids = [];

[1, 2, 3].forEach((id) => {
  ids.push(id * 10);
});

console.log(ids); // [10, 20, 30]