Make array calculations with the reduce() method

Last updated: October 7, 2021.

.reduce() is a method that can be applied to numeric arrays. Because it receives a function when it is called, it is known as a higher-order array method (other examples of these are .map() and .filter()).

It is one of the more difficult higher-order array methods to learn. In part, this is because of its intrinsic difficulty: it takes as a parameter a slightly more complex callback function that similar methods.

But in no small part, this is also due to some confusing explanations as to its workings on the internet.

This tutorial is intended to correct for this. If you are feeling confused, this article is for you! We’ll break down its workings, step by step.

What is it?

Reduce is a method that can be applied to numeric arrays. It gets its name from the fact that is reduces the values of an entire array down to a single number.

For example, we have the following array: [2, 3, 10, 5].

We might want to sum all of these numbers together or get their average value. In both cases, we want to reduce the array down to a single number.

See why reduce() might be useful already?

The mechanics of reduce()

To be able to use the reduce() method effectively, it is important to know how it processes an array that it is acting upon.

The reduce() method applies a function to each element in an array, one after the other.

The result of each application of the function to an element in the array is passed on so it is available when the function is applied to the next element in the array.

So the result from the application of the function to the first element is passed on so it is available when the function is applied to the second element. The result of its application to the second element is then passed on so it is available when the function is applied to the third element. And so on.

What is returned by calling the reduce() method is the final value of what is passed on, when reduce() reaches the end of the array.

Syntax

The reduce() syntax is as follows:

myArray.reduce(callbackFunction, intialValue);

The first parameter, callbackFunction, defines what reduce will do for each element in the array. It is often referred to as the reducer. We define what the reducer does ourselves.

The second parameter in the reduce() call, initialValue, is the starting value of what is passed on to when applying the callback function to the first element in the array (since it is the first application and no actual result of applying the function is available). It is often set to 0 but can be another number.

The reducer

When we call reduce(), the callbackFunction (the reducer) is applied to each element, one after the other. And each time it receives two arguments.

In the first parameter position, an accumulator.

When the callbackFunction is applied to the first element in the array, accumulator takes on the value of initialValue set in the reduce() call.

So, if in the reduce call, we specified myArray.reduce(callbackFunction, 0), the value of the accumulator when callbackFunction is applied to the first element would be 0.

For the second element in the array, the value of accumulator takes on the result returned after the application of callbackFunction to the first element in the array. And for the third element, the result returns from the application of the function to the second element in the array. And so on.

This is why it is called the accumulator: because it keeps receiving the returned value and updating from one application of the reducer function to the next as reduce() cycles through an array, one element at a time.

The result returned by the callbackFunction after application to the final element in an array is the single number that is returned by calling reduce().

In addition to the accumulator in the first position, callbackFunction also has available to it the current value of the array element it is currently being applied to. So for an array of [2, 3, 10, 5], its actual value 2, then 3, then 10 and then 5.

In most reducer functions, we use the current value, make a calculation with it and return the result. The returned result is then available in the accumulator position at the next application of the function. This is automatic: whatever is returned after the application of the callbackFunction to an element automatically becomes the value of the accumulator for the next element.

It is therefore important to make sure that something is always returned to the accumulator value updates itself after the application of the reducer function to each element!

Putting it all together

We are now ready to look at two important use cases.

#1 Summing the elements of an array

For this operation, we:

• Set initialValue to 0, so the starting value of the accumulator is 0;
• Add the current value of the array element to the accumulator;
• Return the result, thus becoming the new value of the accumulator.

This is achieved with the following code:

const myArray = [2, 3, 10, 5];

function reducer (accumulator, currentValue) {
  return accumulator + currentValue;
}

console.log(myArray.reduce(reducer, 0)); // 20

The cycle went like this:

Calculation 1: 0 (initialValue) + 2 (returns 2)
Calculation 2: 2 + 3 (returns 5)
Calculation 3: 5 + 10 (returns 15)
Calculation 4: 15 + 5 (returns 20)

The final returned value is 20. So this is what is returned by the reduce call.

#2 Calculating the average value of array elements

To get the average value of the array, we only have to make a slight modification to the above.

All we need to do is divide the returned value of the reduce() call by myArray.length.

const myArray = [2, 3, 10, 5];

function reducer (accumulator, currentValue) {
  return accumulator + currentValue;
}

console.log(myArray.reduce(reducer, 0)/myArray.length); // 5

More reducer parameters

For simplicity, we only mentioned the accumulator (first position) and currentValue (second position) as parameters available to the reducer function.

But we can also optionally make available:

• currentIndex (position 3): the position of the current element in the array
• array (position 4): the array object upon which the reduce() method was called

So the full reducer function syntax is:

function reducer (accumulator, initialValue, currentIndex, array) { }

---