# Make array calculations with the reduce() method

0

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.

## 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) { }`