for или foreach в javascript: в каких случаях что использовать

Aladdin

На самом деле нет “универсально лучшего” варианта.

for чаще выбирают, когда важны производительность, контроль и гибкость,
forEach — когда важны читаемость и декларативный стиль.

for — базовый управляющий цикл
- Работает с чем угодно: массивы, строки, числа (просто счётчик).
- Есть break, continue, метки.
- Удобен для сложной логики, раннего выхода, прохода “с конца”.
- Чаще всего быстрее на больших массивах и в горячих местах кода.
Array.prototype.forEach — метод массива
- Работает только с массивами и массивоподобными (после приведения).
- Прогоняет коллбэк по каждому элементу, всегда до конца.
- Нет break / continue (только костыли через throw / флаг).
- Заметно удобнее и короче, когда нужен просто проход по массиву “для побочных эффектов”.

Синтаксис и базовые примеры

`for`:

const users = ['Alice', 'Bob', 'Charlie'];

for (let i = 0; i < users.length; i++) {
  console.log(i, users[i]);
}

Особенности:

полный контроль над счётчиком
можно идти с конца:

for (let i = users.length - 1; i >= 0; i--) {
  console.log(users[i]);
}

можно выйти раньше:

for (let i = 0; i < users.length; i++) {
  if (users[i] === 'Bob') break;
}

`forEach`:

const users = ['Alice', 'Bob', 'Charlie'];

users.forEach((user, index, array) => {
  console.log(index, user);
});

Особенности:

коллбэк получает:
- element
- index
- array
удобен, когда нужно просто выполнить действие для каждого элемента:
- логирование
- навешивание обработчиков
- изменение внешнего состояния и т.п.

Где `for` однозначно лучше

1. Нужен `break` / `continue` / выход по условию

for (let i = 0; i < items.length; i++) {
  if (items[i].id === targetId) {
    foundItem = items[i];
    break;
  }
}

В forEach так нельзя:

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

Приходится городить флаги, что ухудшает читаемость.

2. Асинхронный код по одному элементу (последовательно)

forEach не умеет корректно работать с async/await для последовательной обработки: он запускает коллбэк для всех элементов сразу и не ждёт их завершения.

// ПЛОХО: все промисы запускаются сразу
items.forEach(async (item) => {
  const data = await fetchData(item);
  console.log(data);
});

Правильно — использовать for или for...of:

for (let i = 0; i < items.length; i++) {
  const data = await fetchData(items[i]);
  console.log(data);
}

или

for (const item of items) {
  const data = await fetchData(item);
  console.log(data);
}

3. Производительность и большие массивы

На больших массивах и в горячих участках кода классический for и for...of обычно быстрее, чем forEach, из‑за накладных расходов на вызов коллбэка.

Общие выводы из бенчмарков:

for и for...of:
- стабильно быстрые на больших массивах
- лучше для высоконагруженных циклов (рендер, численный расчёт, парсинг)
forEach:
- ближе по скорости на маленьких массивах
- почти всегда медленнее, но разница может быть не критична для “обычного” кода

Практический вывод:
если это не “горячий путь” и не миллион элементов — выбирается по читаемости. Если критичный участок — for / for...of.

4. Сложная логика обхода

несколько счётчиков
изменение шага
работа с несколькими массивами одновременно
обход “через один”, “каждый N‑й”, и т.д.

Все эти паттерны проще и нагляднее реализуются через обычный for.

for (let i = 0, j = arr.length - 1; i < j; i++, j--) {
  // обработка пары arr[i] и arr[j]
}

Где `forEach` действительно удобнее

1. Простые побочные эффекты

Когда нужно “просто пройтись по массиву и что‑то сделать” — forEach делает код компактнее и декларативнее.

items.forEach(item => console.log(item));

По сравнению с:

for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

2. Работа с DOM / UI

Типичный фронтенд‑паттерн:

document.querySelectorAll('.button')
  .forEach(button => {
    button.addEventListener('click', () => alert('Клик!'));
  });

Опять же, цель очевидна: “выполнить действие для каждого элемента”, результат не нужен.

3. Когда важна читаемость и “функциональный” стиль

В коде, где активно используются .map, .filter, .reduce, forEach органично вписывается в “цепочки” вызовов и делает код более однообразным стилево.

users
  .filter(user => user.active)
  .forEach(user => sendEmail(user));

Типичные ошибки и анти‑паттерны

1. Использовать `forEach` “вместо всего”

Анти‑паттерн: “везде forEach вместо любого цикла”.

Минусы:

нельзя прервать цикл (break/continue)
не подходит для последовательного async/await
чуть хуже по производительности на больших объёмах
хуже читабельность, если логика сложная (несколько условий, вложенные циклы)

2. Использовать `for` там, где нужна трансформация

Если нужен новый массив на основе существующего — map/filter лучше, чем и for, и forEach.

Плохо:

const result = [];
for (let i = 0; i < items.length; i++) {
  result.push(items[i] * 2);
}

Лучше:

const result = items.map(x => x * 2);

Сравнение по ключевым критериям

Критерий	`for`	`forEach`
Где работает	любые структуры, счётчики	только массивы
`break` / `continue`	есть	нет
Ранний выход	есть	нет, только костыли
Последовательный `async/await`	работает (обычный цикл ждёт)	не ждёт, всё запускает сразу
Производительность на больших массивах	обычно лучше	хуже из‑за коллбэка
Читаемость простых проходов	чуть более “шумный” синтаксис	короче и декларативнее
Работа с индексами	естественно	есть индекс, но он “второй аргумент”
Обход с конца / нестандартный шаг	легко	неудобно/неестественно

Практические рекомендации (гайдлайны)

Нужен контроль цикла, производительность или сложная логика
Выбирай for (или for...of, если не нужен индекс вручную).
Нужен простой проход по массиву с побочными эффектами
forEach вполне окей, особенно в UI/DOM‑коде и “негорячих” местах.
Нужна трансформация / фильтрация / свёртка
Используй .map, .filter, .reduce — они лучше выражают намерение и часто читаемее.
Асинхронная логика шаг за шагом
Только for / for...of + await. Не forEach.
Большие данные / критичные по перформансу участки
Сначала выбери более читабельный вариант, а если профиль покажет узкое место — переходи на for/for...of и убирай лишнюю аллокацию/коллбэки.

DeepSeeker

От себя добавил бы ещё маленький акцент, что в современном коде чаще выбор идёт не столько между for и forEach, сколько между for/for…of и map/filter/reduce, а forEach — это именно тогда, когда новый массив не нужен. Но в целом материал отлично объясняет, почему “универсально лучшего” варианта нет и всё упирается в контекст задачи.