JavaScript - Arrays - reduce


// JavaScript - Array.prototype.reduce()
The reduce() method applies a function against an accumulator and each value of 
the array (from left-to-right) to reduce it to a single value.

arr.reduce(callback[, initialValue])

callback: Function to execute on each value in the array, taking four arguments: 
1. previousValue: The value previously returned in the last invocation of the 
   callback, or initialValue, if supplied.
2. currentValue: The current element being processed in the array.
3. currentIndex: The index of the current element being processed in the array. 
   Starts at index 0, if an initialValue is provided, and at index 1 otherwise.
4. array: The array reduce was called upon.

initialValue: Optional. Value to use as the first argument to the first call of 
  the callback.

The reduce method returns the value that results from the reduction.

The first time the callback is called, previousValue and currentValue can be 
one of two values. If initialValue is provided in the call to reduce, then 
previousValue will be equal to initialValue and currentValue will be equal to 
the first value in the array. If no initialValue was provided, then 
previousValue will be equal to the first value in the array and currentValue 
will be equal to the second.

If initialValue isn't provided, reduce will execute the callback function 
starting at index 1, skipping the first index. If initialValue is provided, 
it will start at index 0.

If the array is empty and no initialValue was provided, TypeError would be 
thrown. If the array has only one element (regardless of position) and no 
initialValue was provided, or if initialValue is provided but the array is 
empty, the solo value would be returned without calling callback.

It is usually safer to provide an initial value because there are three possible 
outputs without initialValue, as shown in the following example.

var maxCallback = ( pre, cur ) => Math.max( pre.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// reduce() without initialValue
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce; better solution, also works for empty arrays
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

You can also provide an Arrow Function in lieu of a full function. 

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

If you were to provide an initial value as the second argument to reduce, the 
result would look like this:

[0,1,2,3,4].reduce( (previousValue, currentValue, currentIndex, array) => {
  return previousValue + currentValue;
}, 10);

var sum = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
}, 0);
// sum is 6

Alternatively, written with an arrow function:

var total = [ 0, 1, 2, 3 ].reduce( ( acc, cur ) => acc + cur, 0 );

Flatten an array of arrays:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License