JS метод Array.reduce()

Опис

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

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

Приклад використання:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // Output: 10

У цьому прикладі ми сумуємо всі числа масиву за допомогою reduce(). Ітерації відбуваються наступним чином: 1+2+3+4=101+2+3+4=10, тому результатом виконання коду буде 10.

reduce(), на відміну від деяких інших методів, не приймає аргумент thisArg. Замість цього callbackFn завжди викликається з undefined як контекст this, який замінюється на globalThis, якщо callbackFn не виконується в строгому режимі.

reduce() є важливою частиною функціонального програмування, де зміна значень вважається небажаною. Тому, щоб накопичити всі значення в масиві, на кожній ітерації повертається нове значення аккумулятора. В JavaScript рекомендується використовувати spread оператор або інші методи копіювання, де це можливо, для створення нових масивів та об'єктів як аккумулятора. Якщо ви все-таки вирішите модифікувати аккумулятор, не забудьте повернути його з callbackFn, інакше наступна ітерація отримає undefined.

Зверніть увагу, що reduce() не модифікує масив, для якого було зроблено виклик, але callbackFn може це зробити. Однак важливо відзначити, що довжина масиву зафіксована перед першим викликом callbackFn. Таким чином:

• callbackFn не буде відвідувати жодні елементи, додані після початкової довжини масиву під час виклику reduce().
• Зміни, зроблені в індексах, які вже були відвідані, не призведуть до повторного виклику callbackFn.
• Якщо відвіданий, але ще не оброблений елемент масиву був змінений callbackFn, значення, передане в callbackFn, буде відповідати значенню на момент відвідування. Видалені елементи не відвідуються.

Попередження: Модифікації, описані вище, можуть ускладнити розуміння коду, тому рекомендовано їх уникати, якщо вони не є необхідними для конкретної задачі.

Синтаксис

reduce(callbackFn)
reduce(callbackFn, initialValue)

Параметри

*callbackFn

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

Функція callbackFn викликається з наступними аргументами:

• accumulator: Значення, що отримано в результаті попереднього виклику callbackFn. При першому виклику - це initialValue, якщо вказано, в іншому випадку - значення array[0].
• currentValue: Значення поточного елемента. При першому виклику - це значення array[0], якщо було вказано initialValue, в іншому випадку - значення array[1].
• currentIndex: Позиція індексу currentValue в масиві. При першому виклику - 0, якщо було вказано initialValue, в іншому випадку - 1.
• array: Масив, на якому було викликано reduce().

initialValue

Початкове значення для accumulator, коли здійснюється перший виклик зворотньої функції callbackFn. Якщо передбачено параметр initialValue, то зворотня функція розпочинає свою роботу з першого елемента масиву, вважаючи його поточним значенням.

Return

value

Результат, який виходить після того, як "редуктор" зворотної функції успішно опрацював весь масив.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5

[15, 16, 17, 18, 19].reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  10,
);

const objects = [{ x: 1 }, { x: 2 }, { x: 3 }];
const sum = objects.reduce(
  (accumulator, currentValue) => accumulator + currentValue.x,
  0
);

console.log(sum); // 6

console.log([1, 2, , 4].reduce((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduce((a, b) => a + b)); // NaN

const array = [15, 16, 17, 18, 19];

function reducer(accumulator, currentValue, index) {
  const returns = accumulator + currentValue;
  console.log(
    `accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`,
  );
  return returns;
}

array.reduce(reducer);