JavaScript forEach: запуск колбэка для элементов массива

JavaScript array forEach (Array.prototype.forEach) запускает колбэк один раз для каждого элемента массива в порядке индексов. Используйте цикл JavaScript forEach для побочных эффектов: логирования, обновления DOM или изменения внешней переменной, когда не нужен break или await. Так как метод возвращает undefined, он не подходит для преобразований (map) или поиска с ранней остановкой (find, some). Для управления потоком выполнения выбирайте for...of.

Пример JavaScript forEach для обхода массива

Вывод:

0: красный
1: зеленый
2: синий

Как работает этот пример

1. colors содержит три строки в массиве.
2. forEach вызывает стрелочную функцию один раз для каждого элемента, передавая текущий элемент и его индекс с нуля.
3. Колбэк выводит каждый цвет вместе с его позицией. forEach обрабатывает элементы в порядке возрастания индексов и пропускает пустые слоты в разреженных массивах.

Частые ошибки при использовании forEach

Использование forEach с async/await:

Неправильно:

const urls = ["https://example.com/a", "https://example.com/b"];

urls.forEach(async (url) => {
  await fetch(url);
});
console.log("готово"); // выполняется сразу

Правильно:

for (const url of urls) {
  await fetch(url);
}

forEach не ожидает промисы, которые возвращает колбэк. Используйте for...of для последовательного await, либо await Promise.all(urls.map((url) => fetch(url))) для параллельной работы.

Попытка выйти из forEach через break:

Неправильно:

const items = ["a", "b", "c"];
const target = "b";

items.forEach((item) => {
  if (item === target) break; // ошибка синтаксиса
});

Правильно:

const found = items.find((item) => item === target);

forEach не может завершиться раньше. Используйте find/some для поиска с коротким замыканием или for...of, когда нужен break.

forEach vs map vs for…of

Используйте forEach для побочных эффектов, когда не нужны ранний выход и await. Используйте map, когда нужен преобразованный массив как результат. Используйте for...of, когда нужны break, continue или последовательный await.

FAQ

Можно ли прервать JavaScript forEach раньше времени?

Нет. forEach запускает колбэк для каждого элемента. Бросок исключения тоже остановит перебор, но это антипаттерн. Используйте for...of с break или find/some/every для поиска с коротким замыканием.

Изменяет ли forEach исходный массив?

Сам forEach массив не изменяет. Но колбэк может мутировать объекты в массиве, потому что получает ссылки, а не копии. Примитивные значения, например числа и строки, передаются по значению и не могут быть изменены через параметр колбэка.

В чем разница между forEach и map?

forEach возвращает undefined и предназначен для побочных эффектов. map возвращает новый массив, построенный из значений, которые вернул колбэк. Если цель состоит в преобразовании данных, выбирайте map; если нужно выполнить действия вроде логирования или обновления DOM, выбирайте forEach.