# How to use the JavaScript reduce method

7 min read

The JavaScript `reduce`

method is one of the more challenging JavaScript methods to understand. This article will simplify it for you and provide you with several examples.

The `reduce`

method is performed on arrays. It allows us to reduce an array using a *reducer* function. The reducer function performs an *accumulation* of an array's values in order to reduce that array to a single result.

## The reduce method

The reduce method accepts two arguments.

```
const result = array.reduce(callback, initialValue);
```

The first argument is a *callback function* that performs the reduce operation. The second argument is an optional argument for the initial value of the operation.

When applied to an array, the *callback function* is called for each item of the array.

Four optional arguments are available to the *callback function*.

```
array.reduce((accumulator, item, index, array) => {
// ...
})
```

The first argument is the *accumulator* value that collects the function's accumulated result. The second argument is the current array item of the iteration. The third argument is the current array item's index, and the last argument is the array itself. The first two arguments are most commonly used. The third and fourth arguments are often omitted.

The `reduce`

method will not change the original array that it executes on. Also, the reduce function won't run if the array has no elements.

## Calculating the sum of an array

Calculating the sum of an array is the easiest example of a reduce operation. The array `[1, 2, 3]`

will get reduced to a sum of `6`

.

```
const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
return sum + number;
}, 0);
console.log(sum); // 6
```

### The callback function

```
(sum, number) => {
return sum + number;
}
```

The arrow function above is the *callback* function that gets invoked for every item in the array.

### The accumulator

Notice that the second argument of `reduce`

is set to `0`

. This initializes the *accumulator* with an initial value.

`sum`

is the *accumulator*. It starts with the initial value of `0`

. The return value of each `reduce`

call is used as the new accumulator value for the next iteration.

```
const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
console.log(sum); // 0, then 1, then 3, then 6
return sum + number;
}, 0);
```

### Without an initial value

The second argument of `reduce`

, the initial value, is optional. This means we can omit it.

```
const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
return sum + number;
});
console.log(sum); // 6
```

When we omit the initial value, the `reduce`

method will initialize the *accumulator* with the first item of the array instead. Iteration will then start with the second item of the array. In this case, the *accumulator* was initialized with the array item `1`

and iteration started with the array item `2`

.

## Finding the maximum value

The `reduce`

method can be used to find the max value in an array.

```
const numbers = [1, 2, 3];
const sum = numbers.reduce((max, item) => {
return item > max ? item : max;
});
console.log(sum);
```

`max`

is the *accumulator*. It starts with the first array item of `1`

since no initial value was provided to the `reduce`

method for the accumulator. The return value of each `reduce`

call will be the new accumulator value for the next iteration.

For the first iteration, `max`

will be `1`

and `item`

will be `2`

, since iteration starts with the second array item when no initial value is provided for `reduce`

. `2`

is greater than `1`

, so `2`

is returned as the new *accumulator* value. For the last iteration on the `numbers`

array, `max`

is `2`

and `item`

is `3`

. `3`

is greater than `2`

, so `3`

is returned as the final reduced value.

## The sum of an array of objects

The `reduce`

method can also help with finding the sum of an array of objects.

```
const items = [{ n: 1 }, { n: 2 }, { n: 3 }];
const sum = items.reduce((accumulator, currentItem) => {
return accumulator + currentItem.n;
}, 0);
console.log(sum); // 6
```

## Flattening an array of arrays

The `reduce`

method can also help with flatting an array of arrays so that a flat, one-dimensional array is returned as the result.

```
const items = [[0, 1], [2, 3], [4, 5]];
const result = items.reduce((accumulator, currentItem) => {
// concat() merges two or more arrays
return accumulator.concat(currentItem);
}, []);
console.log(result); // [0, 1, 2, 3, 4, 5]
```

The initial value for the *accumulator* of `reduce`

is set to an empty array and the `concat`

method is used to merge the *accumulator* array and the current array per iteration.

## Removing duplicates in an array

The `reduce`

method can also help with removing duplicate entries from an array.

```
const items = [1, 2, 1, 2, 3, 4];
const result = items.reduce((accumulator, current) => {
if (accumulator.indexOf(current) === -1) {
accumulator.push(current)
}
return accumulator;
}, []);
console.log(result); // [1, 2, 3, 4]
```

The *accumulator* is used as the array that groups unique items. If the array item for the current iteration is not in the accumulating array, then and only then, does it get added. The accumulating array is then returned after each iteration to serve as the accumulator value for the next iteration.

## Counting occurences

The `reduce`

method can also help with counting the occurence of values.

```
const items = [1, 2, 1, 2, 3];
const result = items.reduce((accumulator, current) => {
if (current in accumulator) {
accumulator[current]++;
} else {
accumulator[current] = 1;
}
return accumulator;
}, {});
console.log(result); // { 1: 2, 2: 2, 3: 1 }
```

The *accumulator* is initialized as an empty object `{}`

. Each unique array value becomes a *key* of that object in order to track the number of occurences of each. For the first iteration, `current`

will not be found as a key of the accumulator object, so execution will enter the `else`

clause and set the current value's occurences to `1`

. When the current array value is found as a key in the accumulator, then that value's occurences is incremented by one.

## Grouping objects

The `reduce`

method can also help with grouping objects in an array of objects.

```
const items = [
{ name: 'Mario', gender: 'M' },
{ name: 'Luigi', gender: 'M' },
{ name: 'Peach', gender: 'F' },
];
const result = items.reduce((acc, item) => {
const key = item['gender'];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {});
console.log(result);
```

The *accumulator* is initialized as an empty object `{}`

. During each iteration of the `reduce`

method, the *gender* value is retrieved from each object in the array. If the accumulator object does not contain the gender value as a key, it is added to it and initialized with an empty array. In the following iterations, if the current `items`

array object's *gender* key is found in the accumulator object, then its corresponding array gets the current object added to it.

The result is:

```
{
F: [
{
gender: "F",
name: "Peach"
}
],
M: [
{
gender: "M",
name: "Mario"
},
{
gender: "M",
name: "Luigi"
}
]
}
```

## Conclusion

We saw how to use the JavaScript `reduce`

method to apply a *reducer* callback function to each element of an array. After working through the examples that we covered, you will be able to use the `reduce`

method with confidence.