Почему for of предпочтительнее forEach?

Сравнение for...of и forEach в JavaScript

Оба цикла используются для итерации по коллекциям, но имеют фундаментальные различия. for...of действительно часто предпочтительнее forEach() в современных JavaScript-приложениях, и вот почему:

Ключевые различия в работе

Основное отличие — контроль над выполнением цикла:

С for...of у вас есть полный контроль:

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
    if (num === 3) {
        break; // Можно прервать цикл полностью
    }
    if (num === 2) {
        continue; // Можно пропустить итерацию
    }
    console.log(num);
}
// Вывод: 1, 4, 5

С forEach() контроль ограничен:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => {
    if (num === 3) {
        // break или continue здесь вызовут ошибку!
        // return лишь прекратит текущую итерацию
        return;
    }
    console.log(num);
});
// Вывод: 1, 2, 4, 5

Технические преимущества for...of

1. Работа с любыми итерируемыми объектами

   // for...of работает с массивами, строками, Map, Set, NodeList и др.
   const set = new Set([1, 2, 3]);
   for (const item of set) {
       console.log(item);
   }
   
   // forEach есть только у конкретных структур
   set.forEach(item => console.log(item)); // Работает
   // Но у строки forEach нет!
   

2. Лучшая производительность в некоторых сценариях Хотя разница часто незначительна, for...of может быть быстрее при работе с большими массивами, особенно с операциями break/continue.

3. Чистый синтаксис без колбэков

   // for...of - прямое чтение
   for (const item of collection) {
       process(item);
   }
   
   // forEach требует колбэк-функции
   collection.forEach(item => process(item));
   

Сценарии, где forEach может быть лучше

Однако forEach тоже имеет свои преимущества:

1. Цепочки методов (method chaining):

   // Чистая цепочка вызовов
   array
       .filter(x => x > 2)
       .map(x => x * 2)
       .forEach(x => console.log(x));
   

2. Работа с асинхронными функциями (хотя с осторожностью):

   // forEach не ждет завершения асинхронных операций
   urls.forEach(async url => {
       const data = await fetch(url);
       // Проблемы с ожиданием!
   });
   

3. Более функциональный стиль в функциональном программировании.

Практические рекомендации

Используйте for...of когда:

• Нужны break, continue или return из родительской функции
• Работаете с разными типами итерируемых объектов
• Важен максимальный контроль над потоком выполнения
• Обрабатываете огромные массивы (в сочетании с break)

Используйте forEach когда:

• Пишете в функциональном стиле с цепочками методов
• Вам нужна только простая итерация без усложнений
• Работаете исключительно с массивами
• Предпочитаете декларативный стиль

Современные альтернативы

// Современный JavaScript предлагает и другие варианты:
const array = [1, 2, 3];

// for await...of для асинхронных итераций
for await (const item of asyncIterable) {
    // Асинхронная обработка
}

// Array.from() для преобразования итераторов
const doubled = Array.from(array, x => x * 2);

Итог: for...of является более универсальным и контролируемым инструментом, который чаще рекомендуется в современном JavaScript. Однако выбор между ними должен основываться на конкретной задаче, стиле кода и требованиях проекта. Важно понимать различия, чтобы выбирать правильный инструмент для каждой ситуации, а не следовать жестким правилам.