Reduce против for: подсчёт суммы корзины без мутаций

hannadev

Представьте: нужно просуммировать цены товаров в корзине. Первый порыв - взять обычный for цикл, завести переменную total и в каждой итерации добавлять к ней новое значение. Работает? Да. Но есть ловушка - мутируете переменную, плодите побочные эффекты, делаете код менее предсказуемым. reduce() решает эту задачу элегантнее: превращает массив в одно значение, не трогая исходные данные.

В этом разборе разберёмся, почему reduce() - не просто красивый синтаксис, а инструмент для чистого, функционального подхода. Покажу реальные примеры из жизни: от простого суммирования до сложных расчётов с фильтрацией на лету. И главное - поймёте, когда for остаётся более читаемым вариантом.

Старый добрый for: удобно, но грязно

Возьмём классический пример с банковскими счетами. Цикл проходит по каждому счету, и мы добавляем его баланс к переменной totalAmount. Логика понятна даже ребёнку - вот в чём её прелесть. Но посмотрите на этот код: переменная totalAmount существует вне цикла, меняется внутри него, и если в другом месте вы тоже её используете, возникает путаница. Кто её менял последним? На каком этапе она принимает нужное значение? Вот это побочные эффекты - враги чистоты кода.

Еще одна проблема for - он предполагает мутацию состояния. Переменная totalAmount не просто вычисляется, а переписывается в каждой итерации. Это создаёт когнитивную нагрузку: вам нужно держать в голове, как она менялась, чтобы понять финальный результат. А если завтра нужно будет отследить, почему итоговая сумма вышла неправильной? Отловить баг в цикле с мутацией - мука.

Мутация переменной - каждая итерация меняет внешнее состояние, усложняя отладку
Побочные эффекты - переменная видна за пределами цикла, может быть случайно переиспользована
Явная инициализация - нужно помнить, что totalAmount должен начинаться с 0, иначе результат сломается
Читаемость - код требует умственного разбора логики цикла на каждый раз

reduce(): функциональный подход к аккумуляции

reduce() - это метод массива, который применяет функцию-колбэк к каждому элементу и возвращает одно итоговое значение. Ключевое отличие от for: нет мутации внешних переменных. Вместо этого на каждой итерации вы возвращаете новое значение аккумулятора, которое становится исходным для следующей итерации.

Синтаксис выглядит так: array.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue). Первый параметр - аккумулятор (начальное значение или результат предыдущей итерации), второй - текущий элемент. Третий параметр (если нужен) - индекс, четвёртый - сам массив. Но в 99% случаев хватает первых двух.

Почему это чище? Потому что reduce() - декларативный, а не императивный. Вы не говорите компьютеру “сделай цикл, инкрементируй счетчик, делай это столько раз”. Вы говорите: “свертай этот массив в одно значение по такому правилу”. Интенция ясна с первого взгляда.

Нет мутации - каждая итерация производит новое значение, исходный массив не меняется
Чистая функция - при одинаковых входных данных результат всегда одинаков
Одна ответственность - reduce() делает ровно одно: аккумулирует значение
Естественное начальное значение - initialValue передается явно, ошибка исключена

Практика: считаем сумму корзины

Допустим, у вас есть корзина товаров - массив объектов, где каждый товар имеет свойство price. Вот решение на for:

const cart = [
  { id: 1, name: 'Товар A', price: 500 },
  { id: 2, name: 'Товар B', price: 1200 },
  { id: 3, name: 'Товар C', price: 300 }
];

let total = 0;
for (let i = 0; i < cart.length; i++) {
  total += cart[i].price;
}
console.log(total); // 2000

А вот то же самое с reduce():

const cart = [
  { id: 1, name: 'Товар A', price: 500 },
  { id: 2, name: 'Товар B', price: 1200 },
  { id: 3, name: 'Товар C', price: 300 }
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 2000

Видите разницу? В первом случае total - переменная, которая меняется. Во втором - значение, которое вычисляется. А еще reduce() решает в одной строке то, что в for занимает четыре. Понятнее? Конечно, предпочтение зависит от того, к какому стилю вы привыкли. Но функциональный подход становится очевидным, когда логика усложняется.

Теперь представьте, что нужно подсчитать сумму только товаров, которые в наличии. С for пришлось бы добавить условие:

let total = 0;
for (let i = 0; i < cart.length; i++) {
  if (cart[i].inStock) {
    total += cart[i].price;
  }
}

С reduce() логика встраивается прямо в аккумулятор:

const total = cart.reduce((sum, item) => 
  item.inStock ? sum + item.price : sum, 0
);

Однострочная, понятная, нет побочных эффектов. Вот это уже начинает видно преимущество.

Аспект	for	reduce()
Мутирует переменную	Да	Нет
Побочные эффекты	Есть	Отсутствуют
Читаемость при простой логике	Хорошая	Хорошая
Читаемость при сложной логике	Хуже	Лучше
Производительность	Чуть быстрее	Микросекунды разницы
Комбинирование с фильтром	Нужно вложенное условие	Встраивается в логику

Сложные случаи: когда reduce становится по-настоящему полезным

Вот где reduce() показывает свою мощь - когда нужно комбинировать несколько операций. Представьте: нужно просуммировать только товары определённой категории, которые дороже 100 рублей. Наивный подход - сначала отфильтровать filter(), потом отобрать нужные поля map(), потом просуммировать reduce(). Проблема: три прохода по массиву вместо одного.

const sum = cart
  .filter(item => item.category === 'electronics')
  .map(item => item.price)
  .filter(price => price > 100)
  .reduce((sum, price) => sum + price, 0);

Это работает, но неэффективно. Вот что может сделать один reduce():

const sum = cart.reduce((acc, item) => {
  if (item.category === 'electronics' && item.price > 100) {
    return acc + item.price;
  }
  return acc;
}, 0);

Один проход, одна переменная-аккумулятор, никаких промежуточных массивов. На большом датасете разница в производительности будет заметна. Но есть нюанс: когда логика совсем сложная, такой код становится нечитаемым. Если в функции 10 условий и вложенные расчёты - может быть лучше разбить на несколько методов, чем лепить всё в один reduce(). Чистота кода важнее микро-оптимизаций, помните это.

Вот еще один классический паттерн - подсчёт количества элементов по категориям. На for пришлось бы создавать объект и обновлять счётчики:

const counts = {};
for (let i = 0; i < cart.length; i++) {
  const category = cart[i].category;
  counts[category] = (counts[category] || 0) + 1;
}

А с reduce() это выглядит как естественное преобразование:

const counts = cart.reduce((acc, item) => {
  acc[item.category] = (acc[item.category] || 0) + 1;
  return acc;
}, {});

Видите? Аккумулятор здесь - не просто число, а объект. reduce() может аккумулировать всё: числа, строки, объекты, новые массивы - что угодно. Это делает его универсальным инструментом для трансформации данных.

Фильтрация + суммирование за один проход - экономия на чтение массива
Создание новых структур данных - от простых сумм до сложных объектов
Группировка данных - из плоского массива в иерархическую структуру
Валидация с накоплением ошибок - аккумулятор может собирать список проблем

Когда `reduce()` становится врагом читаемости

Но будьте осторожны. reduce() - не серебряная пуля. Есть случаи, когда он делает код менее понятным, а не более. Если логика сложная, с множеством условий и вложенностей - могло быть что-нибудь простое и прямолинейное, станет волшебным чёрным ящиком, который никто не хочет трогать.

Пример, когда for выигрывает:

let result = [];
let sum = 0;
let lastCategory = null;

for (const item of cart) {
  if (item.category !== lastCategory) {
    if (sum > 0) {
      result.push({ category: lastCategory, total: sum });
    }
    lastCategory = item.category;
    sum = 0;
  }
  sum += item.price;
}

Это логика группировки с накоплением информации. Она сложная, и for здесь - друг. Можно прочитать пошагово, понять, что происходит. А вот reduce() с такой же логикой станет каша:

const result = cart.reduce((acc, item, idx) => {
  if (item.category !== (cart[idx - 1]?.category)) {
    if (acc.sum > 0) {
      acc.result.push({ category: acc.lastCategory, total: acc.sum });
    }
    acc.lastCategory = item.category;
    acc.sum = 0;
  }
  acc.sum += item.price;
  if (idx === cart.length - 1 && acc.sum > 0) {
    acc.result.push({ category: acc.lastCategory, total: acc.sum });
  }
  return acc;
}, { result: [], sum: 0, lastCategory: null }).result;

Пока не завод болт. В этом случае лучше использовать for или разбить задачу на несколько методов. reduce() - инструмент для аккумуляции, а не для всех задач подряд.

Много условий - reduce() становится нечитаемым
Нужен break или continue - for здесь естественнее
Сложная логика состояния - лучше явный цикл
Множественные побочные эффекты - reduce() не поможет, нужна обычная функция

Финальный вердикт: выбираем правильный инструмент

Итак, reduce() - это не панацея, это просто другой способ думать о трансформации данных. Когда задача простая - суммирование, фильтрация, преобразование - reduce() победит своей лаконичностью и отсутствием мутаций. Когда задача становится сложной, с множеством условных переходов и побочных эффектов - обычный for будет честнее и понятнее.

Главное, что нужно усвоить: функциональный подход снижает количество ошибок. Код, который не мутирует переменные, легче отладить. Функция, которая всегда возвращает один и тот же результат при одинаковых входных данных, предсказуема. А предсказуемый код - основа надежного приложения. Выбирайте инструмент в зависимости от задачи, но помните о принципах: минимум мутаций, максимум ясности, тесты на все граничные случаи.