JavaScript: Понимание функции Reduce()

Метод reduce() применяет функцию к каждому элементу массива для сворачивания данных в одно значение.

Синтаксис

let result = arr.reduce(callback);
let result = arr.reduce(callback, initValue);

Аргументы callback функции: accumulator — накапливает результаты, val — текущее значение, index — индекс элемента, arr — исходный массив.

Reduce vs. For Loop

Традиционный цикл для суммирования:

var arr = [1, 2, 3, 4];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
  sum += arr[i];
}
// sum = 10

То же самое через reduce():

let sum = arr.reduce((acc, val) => {
  return acc + val;
});
// sum = 10

Начальное значение

Второй аргумент задаёт начальное значение аккумулятора. Например, начать суммирование со 100:

let sum = arr.reduce((acc, val) => acc + val, 100);
// sum = 110

Практический пример с объектами

Подсчёт населения стран, исключая Китай:

let data = [
  { country: 'China',     pop: 1409517397 },
  { country: 'India',     pop: 1339180127 },
  { country: 'USA',       pop: 324459463  },
  { country: 'Indonesia', pop: 263991379  }
];

let sum = data.reduce((acc, val) => {
  return val.country == 'China' ? acc : acc + val.pop;
}, 0);

// sum = 1927630969

Функция reduce() позволяет эффективно обрабатывать большие коллекции данных с минимальным количеством кода.