В JavaScript есть несколько удобных методов, которые помогают перебирать массивы. Два наиболее часто используемых для итерации - Array.prototype.map() и Array.prototype.forEach(). Так в чем же разница?

Определение

1. Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента в массиве, который вызывается 
2. Метод forEach() выполняет предоставленную функцию один раз для каждого элемента массива 

1. Возвращаемое значение

map() выделяет память и сохраняет значение return. forEach() выбрасывает значение return и всегда возвращает undefined.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]

2. Возможность привязывать другие методы

Второе различие между этими методами: map() можно привязывать к другим методам -  reduce(), sort(), filter() и т.д. А вот forEach(), как вы можете догадаться, возвращается undefined.

const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55

3. Изменчивость

map() возвращает совершенно новый массив с преобразованными элементами и тем же количеством данных. В случае forEach(), даже если он вернется undefined, он изменит исходный массив с помощью callback.

Поэтому что map() опирается на неизменность и forEach() является мутатором.

4. Скорость исполнения

Что касается производительности, они немного отличаются. Ну, это зависит от разных вещей, таких как компьютер, объем данных и т.д. Вы можете проверить это самостоятельно с помощью приведенного ниже примера или с помощью jsPerf, чтобы узнать, какой метод быстрее.

const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)

Во многих случаях forEach() медленнее map(). Результаты для различных ОС и браузеров могут отличаться.

Вывод

Выбор между map() и forEach() будет зависеть от варианта использования. Если вы планируете изменять, чередовать или использовать данные, лучше выбирать map(), поскольку он возвращает новый массив с преобразованными данными. Но, если вам не понадобится возвращаемый массив, не используйте map(), вместо этого используйте forEach() или даже цикл for.

Источник перевода