Array.reduce(): Addition
A single value from an array can be calculated using the reduce() function. In other words, an array is condensed into a single value.
Example:
const numbers = [20, 13, 5, 31];
const sum = numbers.reduce((accumulator, current) => {
return accumulator + current;
}, 0);
Let’s examine it step by step:
-
We call the
.reduce()
method on thenumbers
array. -
We assign the result of
numbers.reduce()
to a new variable calledsum
. -
The reduce method needs two parameters: the reducer and the starting value.
Reducer
Example:
(accumulator, current) => {
return accumulator, current;
}
This is a callback that is applied to each element in the array, but this callback has two parameters: accumulator
and current
.
The last value that the reduce function last calculated is always referenced by the accumulator
. Additionally, the term current
refers to a single element in the array.
Example:
const numbers = [20, 13, 3, 31];
const sum = numbers.reduce((accumulator, current) => {
return accumulator + current;
}, 0);
Detailed Explanation:
The first time the callback is executed, accumulator is set to 0 (due to the initial value) and current is set to the first element of the array. Consequently, accumulator is 0 and current is 20.
Then we output accumulator + current
, which is 0 + 20 = 20. The updated value of the accumulator
is 20.
The callback executes a second time, with current = 13
(the second item in the array) and accumulator = 20
. We return accumulator + current
, which is 20 + 13 = 33
. The accumulator
is 33.
The callback executes a third time, with current = 3
(the third item in the array) and accumulator = 33
. We return accumulator + current
, which is 33 + 3 = 36
. The accumulator
is 36.
The callback executes a fourth time, with current = 31
(the fourth item in the array) and accumulator = 36
. We return accumulator + current
, which is 36 + 31 = 67
. The accumulator
is 67.
The array has no additional items, therefore the reduce produces the final value of accumulator
, which is 67.
Inital Value
Reducer
and initialValue
are the two parameters that the .reduce()
method accepts (not to be confused with the 2 parameters of reducer
i.e. accumulator
and current
). The value we assign to the accumulator
the first time the callback executes is known as the initialValue
.
The first time that callback is executed, JavaScript will automatically take your initialValue
and pass it to the accumulator
parameter in the reducer
.
Array.reduce(): Multiplication
Example:
const numbers = [1, 2, 5];
const finalResult = numbers.reduce((accumulator, current) => {
return accumulator * current;
}, 1);
console.log(finalResult); // 10
The initial value for multiplication
We cannot begin a multiplication with a value of 0
. This is due to the fact that any number multiplied by 0 will produce 0, 1 * 0 = 0
. Given that any number multiplied by 1 would result in the same number, the number 1
act as the neutral multiplier in multiplication. Example: 1 * 1 = 1
.
This is why we use a starting value of 1
for multiplication and a starting value of 0
for addition.
Example:
const numbers = [1, 2, 5];
const finalResult = numbers.reduce((accumulator, current) => {
return accumulator * current;
}, 1);
Detailed Explanation:
The first time the callback is executed, accumulator is set to 1 (due to the initial value) and current is set to the first element of the array. Consequently, accumulator
is 1 and current
is 1.
Then we output accumulator * current
, which is 1 * 1 = 1. The updated value of the accumulator
is 1.
The callback executes a second time, with current = 2
(the second item in the array) and accumulator = 1
. We return accumulator * current
, which is 1 * 2 = 2
. The accumulator
is 2.
The callback executes a third time, with current = 5
(the third item in the array) and accumulator = 2
. We return accumulator * current
, which is 2 * 5 = 10
. The accumulator
is 10.
The result of the .reduce()
is 10 which is stored in the variable finalResult.
Please share your thoughts in the comments section below. I’d love to hear your thoughts. Or please drop by and say ‘👋’.