What are Arrays? - Part IV

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 the numbers array.

• We assign the result of numbers.reduce() to a new variable called sum.

• 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 '👋'.