Demystifying Array.prototype.reduce()
Tags: javascript, beginners, tutorial
Published: 2021-10-16 18:45:05

# Array.prototype.reduce()
[reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) is considered by some Javascript beginners to be one of the most confusing array methods. In this tutorial I will present the method in a way that is easily understood, so you can start experimenting with `reduce()` in your own code. We'll start by taking a macroscopic view of the method, then break it down into digestible bite-sized chunks to understand how each individual part works.

## Description
`reduce()` is an Array method that executes a "reducer" [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) on each element of the target array. **The "reducer" callback function must return a single value** for use in the next callback method on each subsequent array element.

### Returns
After `reduce()` iterates over the last array element, the method returns the result of the final "reducer" callback function.

I personally interpret that the method is called `reduce` because it will iterate over every individual element of an array, but ultimately the method only returns one single value after traversing the entire array.

### Destructive?
The `reduce()` method itself does not directly mutate the array it is called on, so it is *not* considered a destructive method. However, it's important to note that the callback function might call destructive methods that could mutate the original array.

## Syntax
The syntax of the `reduce()` function itself is *very* simple:
```js
const numbers = [1, 2, 3];
numbers.reduce(callbackFn, initialValue);
```
>Note: The second parameter, `initialValue`, is optional and not required for the function to run. 

As you can see from above, the syntax to implement `reduce()` is not confusing at all. I found the complexity of using `reduce()` comes from the requirements of the "reducer" `callbackFn` that is passed into the method. So, let's dive into the syntax of the callback function now.

Here is an example "reducer" callback function that will sum all elements of an array:

```js
const reducer = function(accumulator, currentElement) {
  return accumulator + currentElement;
}
```
>Note: Similar to other array methods, it is possible to pass two additional parameters to the callback function. The 3rd parameter passed represents the current index of the array, and the 4th parameter represents the array being traversed.

Here's how each element works:
* `accumulator`: This parameter "accumulates" the results of each execution of the callback function. The value that is returned by the preceding callback function becomes the accumulator value in each execution of the callback function. 

>Note: By default if no `initialValue` is passed in the `reduce()` function, then `accumulator` is initially set to equal the first element of the array. 

* `currentElement`: This parameter represents the value of the current array element that is being iterated over.

#### Still confused?
Not to worry, let's go into a simple example together and I'll explain how all of these moving pieces work together in the `reduce()` method.

## Example Breakdown
The most basic implementation of `reduce()` is to return the sum of all the elements in an array. To start, let's sum up the following odd numbers.

```js
const numbers = [1, 3, 5, 7];

const reducer = function(accumulator, currentElement) {
  return accumulator + currentElement;
}

console.log(numbers.reduce(reducer));
```

This code snippet will "reduce" the array of numbers into a single number by adding them together. The expected result is `16` because `1 + 3 + 5 + 7 = 16`.

Let's break this example down to make it more simple.

* To start, we call `reduce` on the `numbers` array and we pass in the callback function `reducer` as a parameter into `reduce`. 
* We did not pass the 2nd optional parameter, `initialValue`, into the `reduce()` function. So, for the first execution of `reducer` the `accumulator` is set to the value of the first element in the array and `currentElement` is set to the value of the second element in the array.

Here's what the first call of `reduce()` looks like with the `reducer` callback parameters replaced with array elements:
```js
reducer(numbers[0], numbers[1]) {
  return numbers[0] + numbers[1];
}
```
Now written with the values in place of the parameters:
```js
reducer(1, 3) {
  return 1 + 3;
}
```
After the initial call of the `reducer` callback function, `reduce()` iterates to the next array element executing the `reducer` callback function over and over until it reaches the end of the array. 

Here's a breakdown of the next call of the `reducer` callback function. This time `accumulator` is set to equal the returned result of the previous callback function.
```js
reducer(4, numbers[2]) {
  return 4 + numbers[2];
}
```
Now written with the values in place of the parameters:
```js
reducer(4, 5) {
  return 4 + 5;
}
```
Are you getting the pattern yet? The `accumulator` simply accumulates the result of the previous callback function and uses it in the next execution of the callback. So for our final call of the example, the `accumulator` will be equal to `9` as that is the returned value of the previous callback function.
```js
reducer(9, numbers[3]) {
  return 9 + numbers[3];
}
```
Now written with the values in place of the parameters:
```js
reducer(9, 7) {
  return 9 + 7;
}
```
This was the final call of the `reducer` callback function because we have now iterated over each array element, so `16` will be the value returned from the original `reduce` method called on the `numbers` array.

## Other Uses of reduce()
As you saw from the example above, `reduce()` is very effective at returning the sum of all elements in an array. You might be wondering what other practical uses exist for `reduce()`. Here are a few:
* Sum values in an object array
* Flatten an array of arrays
* Replace .filter().map() 
* And more!

## Challenge
Want more practice? Try to code the following challenge:
```
Using reduce(), write an implementation that will return the sum of all even numbers in an array. 

Hint: You must use a conditional statement in your callback function.
```