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 theaccumulator
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 arrayarray
(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) { }