Array.prototype.reduce() Made Easy

The Array.prototype.reduce() method is an immutable JavaScript array iteration method that executes a callback function on each element of the array, resulting in a single output value.  

Syntax

arr.reduce(callbackFunction, initialValue);

Callback Function

Syntax

callbackFunction( accumulator, currentValue, currentIndex, sourceArray);

The callback function houses the conditions to be executed over each element of the array. 

The callback function receives 4 parameters which include:

• Accumulator(acc): This is the previous value returned by the callback function. Initially, if the initialValue is given, the accumulator is assigned the value of the initialValue else the accumulator takes the value of the first element in the array. It is required.
• Current Value(cur): This is the value of the current executing element in the array. It is optional.
• Current Index(idx): This is the index of the current executing element in the array. It is optional.
• Source Array(src): This is the array that contains the current executing element. It is optional.

initialValue

This is the value passed into the callback function as the initial value of the accumulator. It is worth noting that calling reduce() on an empty array without an initialValue will throw a TypeError.

The return value of the reduce() method

It returns the final result from the last call of the callback function

N/B In order to avoid errors, It is always safer to provide an initialValue for the reduce() method.

How the reduce() method works

Let us see how this method works by examining the code snippet in the two case study below.

Case 1:

Given initialValue as 0.

const numberArray = [30, 20, 10];
numberArray.reduce((acc, cur, idx, src) => {
  return acc - cur
},0);

The callback would be invoked three times, with the arguments and return values in each call

First Invocation

Since the initialValue is given as 0, the value of the accumulator acc becomes 0, the current value cur is 10, the current index is 0 and the source arraysrc is [30, 20, 10]. The return value of the callback function is 0 – 30 which is -30.

Second Invocation

The value of the accumulator acc becomes the value returned in the previous callback function which is -30, the current value becomes 20, the current index is 1, and the source array is [30, 20, 10]. The return value of the callback function is -30 – 20 which is -50.

Third Invocation

The value of the accumulator acc becomes the value returned in the previous callback function which is -50, the current value is 10, the current index is 2, and the source array is [30, 20, 10]. The return value of the callback function is -50 – 10 which is -60.

Return value

The return value of the code snippet above is -60.

Case 2:

initialValue not given.

const numberArray = [30, 20, 10];
numberArray.reduce((acc, cur, idx, src) => {
  return acc - cur
});

The callback would be invoked two times, with the arguments and return values in each call.

First Invocation

Since the initialValue is not given, the value of the accumulator acc becomes 30, the current value cur becomes 20, the current index is 1 and the source arraysrc is [30, 20, 10]. The return value of the callback function is 30 – 20  which is 10.

Second Invocation

The value of the accumulator acc becomes the value returned in the previous callback function which is 10, the current value becomes 10, the current index is 2, and the source array is [30, 20, 10]. The return value of the callback function is 10 – 10  which is 0.

Return value

The return value of the code snippet above is 0.

Conclusion

The reduce() method executes a callback function on each element of the array, resulting in single output value.  Though the values in the arrays in the 2 case studies are the same, their return values are different. Hence, in order to avoid errors, It is always safe to provide an initial value for the reduce() method.