Javascript reduce() Array Method

The reduce array method is used to reduce all values in an array to a single value. It is passed an argument which is a function that is executed on every value in the array.

Syntax

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Explanation of identifiers

• function: executed on all elements.
• total: This is the previously returned value of the function. That is, the return value from the previous function execution. It is also used as the initial value for the first iteration of the reduce method if the initialValue is not stated.
• currentValue: The value of the current element.
• currentIndex: The index of the current element. This is optional. It starts from 0 if initialValue was provided, otherwise, 1.
• arr: The array the method was called upon. This is optional.
• initialValue: The value which would be passed to the function as an initial value. That is, the value which the iteration would start with before incrementing. It is optional. The default initial value is the value of total.

In other words,

If initialValue is provided, the execution starts from the first element, otherwise, the second element of which the first element would be the initialValue.

Return Value

The return value of the reduce method is total. This would be passed to the next iteration (if there exists another element) or be returned as the final result from the method.

Examples

1. Add all elements of an array

let addFunction = (a, b) => a + b;
let arr = [2,3,4,5];
let result = arr.reduce(addFunction);
console.log(result);
// Expected output
// 14

The output is 14 How?

Using arrow function, addFunction has only two arguments - total and currentValue. initialValue is not stated, hence, total will be the initial which as seen above is 2. Since, 2 is the initial value, the iteration passes onto the next value, 3.

The initial value is then added to the current value (3) which increments total (2+3 = 5). 5 is passed to the next value (4) as a total and also incremented until the last element, 5. After addition, there is no other element for total to be passed to, hence, the method returns total.

2. Maximum Number in Array

let maxNum = (a, b) => a > b ? a : b;
let arr = [34, 56, 12];
let maximumNumber = arr.reduce(maxNum, 40);
console.log(maximumNumber);
// Expected Output
// 56

Here, we have an initialValue - 40. This becomes a and 34 becomes b. 34 is less than 40, so 40 is returned an passed to the next value, 56. 56 is greater, hence, returned and passed to 12. 56 remains greater and it is returned as the final result.

I hope with this, you can see how the reduce array method works. Like I stated before, it reduces all values in an array to a single value.

Thanks for reading! 🙂