Метод reduce()

Метод reduce() використовується для зведення (редукції) елементів масиву до єдиного значення шляхом виконання функції для кожного елемента масиву.

Синтаксис методу reduce():

const result = outputArray.reduce((previousValue, element, index, array) => {
    // Обчислення нового значення акумулятора
}, initialValue);

previousValue - це акумулятор, значення, яке накопичується під час обробки масиву.

initialValue - початкове значення для акумулятора (опціонально).

Що виконує метод:

• Не змінює вихідний масив.

• Поелементо перебирає вихідний масив.

• Повертає все, що завгодно.

• Робить все, що завгодно.

Приклад

Найкраще зрозуміти прнцип роботи цього методу - підрахувавши суму елементів масиву.

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

const summ = numbers.reduce((acum, el) => {
  return acum + el;
}, 0);

console.log(numbers); //[1, 2, 3, 4, 5];
console.log(summ); // 15

У цьому прикладі метод reduce() обчислює суму всіх елементів масиву numbers, використовуючи функцію, яка додає поточний елемент el до акумулятора acum. Початкове значення акумулятора передається як другий аргумент методу reduce() (в даному випадку це 0).

reduce() може використовуватись для виконання різних операцій з масивом, таких як обчислення суми, середнього значення, максимуму, мінімуму тощо, залежно від логіки функції, що передається.

Масив об'єктів

Робота методу reduce() у більшості випадків зводиться до обробки чисел. Зокрема можна обробляти і якусь властивість обʼєктів, які зберігаються в масиві.

Приклад

Визначимо середній вік користувачів.

const people = [
  { name: "Alex", age: 18 },
  { name: "Max", age: 67 },
  { name: "Helga", age: 14 },
  { name: "Mathew", age: 36 },
  { name: "Angelina", age: 59 },
  { name: "Pablo", age: 7 },
  { name: "Paolina", age: 61 },
];

// Визначаємо загальну кількість років на всіх 
const totalAge = people.reduce((accum, el) => {
  return accum + el.age;
}, 0);

// Визначаємо середньоарифметичний вік користувачів
const averageAge = totalAge / people.length;
console.log(averageAge); //37.42857142857143

Але метод може не тільки робити арифметичні операції з числами, а й працювати з масивами.

Приклад

Спробуємо реалізувати приклад розглянутий в flatMap() але за допомогою reduce(), сформувавший одновимірний масив.

const users = [
  { name: "Alex", languages: ["ua", "en", "es"] },
  { name: "Mathew", languages: ["ua", "fr", "jp"] },
  { name: "Angelina", languages: ["fr", "en", "de", "it"] },
];

const usersLanguages = users.reduce((accum, user) => {
  accum.push(...user.languages);
  return accum;
}, []);

console.log(usersLanguages);
// ['ua', 'en', 'es', 'ua', 'fr', 'jp', 'fr', 'en', 'de', 'it']

За допомогою методу reduce() можна реалізувати будь-яку логіку перебору масиву.