Как перебрать массив в JavaScript через forEach и map — в чём разница?
Учу JS, постоянно вижу и forEach, и map для перебора массива. Они вроде делают одно и то же — пройтись по элементам. Когда какой использовать и почему не просто for? Хочу понять, когда лучше map, а когда forEach.
2 ответа
Оба перебирают массив, но возвращают разное.
forEach просто прогоняет функцию для каждого элемента и возвращает undefined. Берёшь, когда нужен побочный эффект — вывести, изменить DOM, посчитать сумму во внешнюю переменную:
const nums = [1, 2, 3];
nums.forEach((n, i) => {
console.log(`Элемент ${i}: ${n}`);
});
map возвращает новый массив той же длины из того, что ты вернул в колбэке. Берёшь, когда из старого массива делаешь новый:
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3] — исходный не тронут
Правило простыми словами: если результат перебора тебе нужен как новый массив — map. Если просто что-то поделать на каждой итерации и результат не нужен — forEach.
Частая ошибка: писать map ради побочного эффекта и не использовать результат — линтер будет ругаться, и читателю кода непонятно. И ещё: из forEach нельзя выйти через break — для досрочного выхода бери обычный for или for...of.
Короткая подсказка-мнемоника: map = маппинг (преобразование), forEach = «для каждого сделай».
Ещё момент: map можно сцеплять в цепочку, потому что он возвращает массив:
const res = [1, 2, 3, 4]
.map(n => n * 10)
.filter(n => n > 20);
console.log(res); // [30, 40]
С forEach так не получится — он вернёт undefined, и следующий .filter упадёт.