Normally we use for loop to perform any operations on array, but javascript provides various types of array methods which are suitable for these operations in different scenarios. In these reduce method is also the one which is used to reduce the array to single value.

Basic syntax of reduce is,

1. array.reduce(reducer, initialValue)
2. array.reduce((accumulator, currentValue)=> { /* reducer logic*/}, initialValue)

Parameters:

1. reducer - This is the reducer function which performs operations and returns single value or object.
2. initialValue - This parameter is used by accumulator parameter of callback function, when callback function is called accumulator value is initalized to value of initialValue.
3. accumulator - This is used to store result values returned after performing operation in callback function.
4. currentValue - This is the current value which is taken from array and going to get processed.

What if initialValue is not specified?
If initialValue is not specified then accumulator gets initialized with the first value of array i.e array[0] and currentValue gets next value i.e array[1].

Now let's see one example,

//To calculate sume of elements of array
const numbers = [1, 7, 3, 6, 4]

const reducer = (accumulator, currentValue) => accumulator + currentValue;

const result = numbers.reduce(reducer, 0)

In this reduce method applied on numbers array, reducer is the callback function, initialValue is passed as 0, reducer method gets called for each and every element of array and accumulator stores the returned value returned by reducer function.

Other parameters for callback function.

As we saw in filter and map methods reduce also passes currentIndex and array as arguments to callback/reducer function.

Syntax for this looks like,

array.reduce((accumulator, currentValue, currentIndex, array)=> { /* reducer logic*/}, initialValue)

• currentIndex - This is the index of current element which is passed to reducer function.
• array- Thisis the array on which reduce method applied.

How reduce behaves on array mutations?

• If array is appended with any value after reduce method applied on array, then reducer callback function doesnot consider appended values, It iterates over original array itself
• Similarly if any of the value of array changed after reduce method applied then it does not consider the changed value, it considers only the values when reduce method first called on array.
• If any element is deleted from array after reduce method applied but before being iterated over then it skips that value and continues.

Polyfill for reduce()

Array.prototype.myReduce = function (reducer, initialValue) {
  var accumulator = initialValue === undefined ? undefined : initialValue

  for (let i = 0; i < this.length; i++) {
    if (accumulator !== undefined) {
      accumulator = reducer.call(undefined, accumulator, this[i], i, this)
    } else {
      accumulator = this[i]
    }
    return accumulator;
  }
}

This is about reduce method of javascript. Thank you for reading...