Различия между методами .forEach() и .map() в JavaScript

Быстрый ответ

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

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

Применение .forEach():

// Задача: удвоить все числа!
[1, 2, 3].forEach(item => console.log(item * 2)); // Выведет в консоль: 2, 4, 6

Применение .map():

// Удвоим числа и получим новый массив!
const doubled = [1, 2, 3].map(item => item * 2);
console.log(doubled); // Выведет новый массив: [2, 4, 6]

Стратегия: Когда использовать .forEach() и когда .map()

Выбирайте .forEach(), если нужно осуществить действия без возвращения результата. Например, при логировании, взаимодействии с DOM или изменении внешних переменных.

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

Взгляд на производительность

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

Визуализация

Представьте методы '.forEach()' и '.map()', как художников с разными подходами к работе над массивом:

Художник с .forEach() почти не вносит изменений в исходный массив:

До: 🖼️ – Исходный массив [🍎, 🍊, 🍌] После: 🎨 – Лёгкие штрихи [🍎✏️, 🍊✏️, 🍌✏️]

Работа с .map() превращает массив в нечто инное:

До: 🖼️ – Исходный массив [🍎, 🍊, 🍌] После: 🎨 – Новое произведение: [🍎🎨, 🍊🎨, 🍌🎨]

Истинная суть в том, что .forEach() добавляет уникальные черты, в то время как .map() порождает новое произведение искусства. 🔄

Подробнее об этом расскажет наш спикер на видео

Разочарование в undefined

При работе .forEach() результатом всегда будет undefined, если из обратной функции не производится возврат значения. Это ситуация, когда задача выполнется, но результат ее исполнения не используйтся. В случае .map() необходимо явно вернуть значение, иначе в новом массиве только undefined.

Опасность мутации массивов

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

Хорошая практика – делай выбор осознанно

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

Полезные материалы

1. Array.prototype.forEach() – JavaScript | MDN — справочник о .forEach() от MDN.
2. Array.prototype.map() – JavaScript | MDN — обязательный источник информации о .map() в документации MDN.
3. Understanding Map and Set Objects in JavaScript | DigitalOcean — доступное пособие с практическими примерами использования.
4. JavaScript — Map vs. ForEach | codeburst — интересное сравнение map() и forEach() на примерах с ресурса codeburst.