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);

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

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

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