reduce() у масиві

JavaScriptJunior~2 хв читання

Метод reduce() - один з найпотужніших та найуніверсальніших інструментів роботи з масивами у JavaScript. Він використовується для того, щоб послідовно звести (reduce) масив до одного значення: числа, рядка, об'єкта, масиву тощо.

Синтаксис

javascript

const result = array.reduce((accumulator, currentValue, index, array) => {
  return newAccumulatorValue;
}, initialValue);

Параметри:

Аргумент	Опис
`accumulator`	накопичене значення (те, що повертається на кожній ітерації)
`currentValue`	поточний елемент масиву
`index`	індекс поточного елемента
`array`	сам масив
`initialValue`	початкове значення акумулятора (опційно, але дуже бажано задавати!)

Приклад 1. Сума чисел у масиві

javascript

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

const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 10

Пояснення:

acc = 0 (початкове значення)
0 + 1 → 1
1 + 2 → 3
3 + 3 → 6
6 + 4 → 10

Приклад 2. Підрахунок кількості елементів за умовою

javascript

const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 17 },
  { name: 'John', age: 30 }
];

const adultsCount = users.reduce((acc, user) => {
  return user.age >= 18 ? acc + 1 : acc;
}, 0);

console.log(adultsCount); // 2

reduce() часто використовують для агрегації - підрахунків, статистики, об'єднань тощо.

Приклад 3. Перетворення масиву на об'єкт

javascript

const fruits = ['apple', 'banana', 'cherry'];

const fruitMap = fruits.reduce((acc, fruit, index) => {
  acc[index] = fruit;
  return acc;
}, {});

console.log(fruitMap);
// { 0: 'apple', 1: 'banana', 2: 'cherry' }

Дуже зручно для перетворення даних в іншу структуру.

Приклад 4. Об'єднання масиву об'єктів

javascript

const products = [
  { price: 10 },
  { price: 20 },
  { price: 30 }
];

const total = products.reduce((acc, item) => acc + item.price, 0);

console.log(total); // 60

Якщо не вказати initialValue

javascript

const arr = [1, 2, 3];
const sum = arr.reduce((acc, num) => acc + num);
console.log(sum); // 6

Тут:

acc на першій ітерації = 1 (перший елемент)
currentValue = 2, потім 3

Якщо масив порожній, і немає initialValue → буде помилка:

javascript

[].reduce((acc, x) => acc + x); // TypeError

Тому завжди вказуй початкове значення, особливо для порожніх масивів.

Часті помилки

Відсутній return

javascript

arr.reduce((acc, num) => { acc + num }, 0); // undefined

Виправ:

javascript

arr.reduce((acc, num) => { return acc + num }, 0);

Неправильний тип початкового значення

javascript

['1', '2', '3'].reduce((acc, n) => acc + n, 0); // '0123', рядок

Перетвори явно:

javascript

['1', '2', '3'].reduce((acc, n) => acc + Number(n), 0); // 6

Коли використовувати reduce()

Мета	Чи підходить `reduce()`
Сума або добуток чисел	Так
Підрахунок статистики або кількості	Так
Перетворення масиву на об'єкт	Так
Конкатенація рядків або масивів	Так
Перетворення кожного елемента	Ні - краще `map()`
Відбір елементів	Ні - краще `filter()`

Коротко:

reduce() - "універсальний швейцарський ніж": зводить масив до одного підсумкового значення.

Формула запам'ятовування: arr.reduce((acc, elem) => newValue, initialValue)

Порівняння з іншими методами

Метод	Що робить	Повертає	Може перервати цикл
forEach()	Перебирає елементи	`undefined`	Ні
map()	Перетворює елементи	Новий масив	Ні
filter()	Відбирає елементи	Новий масив	Ні
find()	Знаходить перший відповідний елемент	Елемент або `undefined`	Так
reduce()	Зводить увесь масив до одного значення	Будь-який тип (число, рядок, об'єкт тощо)	Може через логіку

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.