В чем разница между Map и ForEach в JavaScript?

Основное определение

Согласно MDN:

forEach() — «Выполняет указанную функцию для каждого элемента массива.»

map() — «создаёт новый массив с результатом вызова указанной функции для каждого элемента массива.»

Что именно это означает?

Метод forEach() фактически ничего не возвращает (undefined). Он просто вызывает указанную функцию для каждого элемента вашего массива. Этот каллбек разрешает мутировать вызывающий массив.

В то время как метод map() вызовет указанную функцию для каждого элемента массива. Разница в том, что map() использует возвращаемые значения и фактически возвращает новый массив того же размера.

Примеры кода

Рассмотрим на примере массива чисел:

let arr = [1, 2, 3, 4, 5];

Пример с forEach — мутирует исходный массив:

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

// Результат
// arr = [2, 4, 6, 8, 10]

Аналогичный пример с помощью метода map — возвращает новый массив:

let doubled = arr.map(num => {
    return num * 2;
});

// Результат
// doubled = [2, 4, 6, 8, 10]

Ключевое различие: используйте map(), когда вам нужен новый массив с трансформированными данными. Используйте forEach(), когда нужно выполнить побочные эффекты для каждого элемента без создания нового массива.