reduce() в JavaScript

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

Синтаксис

  
  array.reduce(function(accumulator, currentValue, index, array), initialValue)
  

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

accumulator - значение возвращаемое функцией после каждого её выполнения, если не указан initialValue, то на первом шаге принимает значение первого элемента массива.

currentValue - элемент массива в текущей итерации. Если указан initialValue, то во время первого обхода принимает значение первого элемента, в противном случае второго.

index Необязательный - индекс обрабатываемого элемента.

array Необязательный - имя обрабатываемого массива.

initialValue Необязательный - если указано, то является начальным значением accumulator.

Сумма элементов массива

Одна из самых частых задач которую решают с помощью метода reduce() это сложение всех элементов массива.

  
  let array = [1,2,3,4,15,19]

  function sumElem(accumulator, currentValue) {
      let sum = accumulator + currentValue
      return sum
  }
  let result = array.reduce(sumElem, 2) // 46
  

Аналогичный результат можно получить используя стрелочную функцию.

  
  let array = [1,2,3,4,15,19]

  let result = array.reduce((accumulator, currentValue) => {
      return accumulator + currentValue
  }, 2) // 46
  

Что здесь происходит

Шаг №1: accumulator = 2 + 1, два берется из указанного нами initialValue, плюс первый элемент массива.

Шаг №2: accumulator = 3 + 2, три - это значение полученное с шага №1 плюс второй элемент.

Шаг №3: accumulator = 5 + 3, пять - это значение с шага №2 плюс третий элемент.

И так далее, пока не будет обработан последний элемент, тогда accumulator станет равен 46 и это будет результатом работы метода.

Аналогично задачу с подсчетом суммы элементов можно решить с помощью цикла for().

  
  let array = [1,2,3,4,15,19]
  let sum = 2
  
  for (let i = 0; i < array.length; i++) {
      sum = sum + array[i]
  } // 46
  

Однако стоит помнить, что если в array будет пропущен элемент, то результатом работы for() будет NaN, в свою очередь reduce() проигнорирует пустоты и выдаст корректное значение.

reduce() и массив объектов

Здесь мы также можем подсчитать сумму обращаясь к значениям свойства x

  
  let array = [{x:1},{x:2},{x:3},{x:4},{x:15},{x:19}]

  let result = array.reduce((accumulator, currentValue) => {
      return accumulator + currentValue.x
  }, 2) // 46
  

Для того, чтобы обработать все объекты в массиве начиная с первого необходимо указать initialValue.

Создадим новый объект с помощью reduce()

  
  let courses = [
    {course: 'JavaScript', price: '30000'},
    {course: 'React', price: '40000'},
    {course: 'HTML + CSS', price: '25000'},
  ]

  let newArray = courses.reduce((newArr, elem) =>{
    return {
        ...newArr,
        [elem.course]: elem.price,
    }
  }, {}) // {JavaScript: '30000', React: '40000', HTML + CSS: '25000'}
  

Итого

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

reduce() работает с любыми типами данных, как с примитивными (числа, строки…), так и составными (массивы, объекты…).

Если reduce() столкнется с пустыми массивом, тогда код вернет ошибку, если в массиве будет один элемент или хотя бы указан initialValue, тогда вернет это значение.

Метод reduce() может принять 5 аргументов, но обычно используются первые два: accumulator (аккумулятор) и currentValue (текущий обрабатываемый элемент массива), которые являются обязательными.