The `reduce()`

JavaScript array method may seem really complex at first glance but I will break it

down for you so you can understand it and comfortably use it in your projects going forward. So let’s get started!

First off, what is `reduce()`

? Well, its a JavaScript array iteration method. It will basically loop over the items in a given array and do something with it. Let’s checkout the MDN documentation for this.

According to MDN:

MDN – reduce()

*The ** reduce()** method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

*The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).**

Sounds confusing, right? Let’s break it down in simple terms with an example. Let’s say I have 2 friends and myself. We want to enjoy a game of marbles. I’ll create an array that holds the total marbles each of us have. Check it out below:

I created a variable named `players`

and set it to an array of objects. Each object has a `name`

and a `marbleCount`

property. On line 8 we create a new variable named `totalMarbles`

and set it equal to our `players`

array with our `reduce()`

method. Inside our `reduce()`

method, you see a couple of funny terms and a “0” number before the method’s closing parenthesis on line 10. Then we `console.log(totalMarbles)`

and see that our expected output is `78`

. Which is the total number of marbles. Great, but where did “accumulator” or “currentValue” come from and what does the “0” at the end of our method do? Let’s break it all down!

First I’ll give you the MDN documentation for these parameters and then I’ll explain them with our above example.

MDN documentation:

reduce() parameters

`accumulator`

*The value resulting from the previous call to callbackFn. On first call, initialValue if specified, otherwise the value of array[0].*

`currentValue`

*The value of the current element. On first call, the value of array[0] if an initialValue was specified, otherwise the value of array[1].*

The first parameter we see in our `reduce()`

method is *accumulator*. This parameter will hold the value of our accumulator each time it processes our array. The initial value of this parameter is the “0” you see just before the closing parentheses on line 10. The first time `reduce()`

goes through our array, it checks the initial value. In this case it is 0. So our *accumulator* parameter holds this value.

The *currentValue* parameter is the current item in our array being processed. The first time `reduce()`

goes through our array, *currentValue* is the first item in our array which in this case is the first object holding the `name`

of “Brian” and the `marbleCount`

of 22.

Now that we understand the parameters, let’s breakdown what our return statement is doing.

Our return statement is as follows:

`return accumulator + currentValue.marbleCount`

If you remember, the *accumulator* parameter holds the initial value we set. Which in this case is 0. So the first time `reduce()`

goes through our array, our *accumulator* parameter equals 0. Also, if you remember, *currentValue* is the current item in our array being processed. So the first time `reduce()`

goes through our array, *currentValue* equals the first item in our array. Which is an object. We are interested in the `marbleCount`

property so we write: `currentValue.marbleCount`

. Under the hood, the first time `reduce()`

goes through our array, this is being ran:

`0 + players[0].marbleCount`

The result of this is then added to our *accumulator* and then repeated. So after the first time through our array, our accumulator holds the value of `0 + players[0].marbleCount`

. Which equals 22. So the second time through the array, this is what our code looks like under the hood:

`22 + players[1].marbleCount`

The value of our *accumulator* is then updated to reflect the result of the above logic. This process is repeated until there are no more items in our array. Once `reduce()`

has processed all of our three array items, we are left with a single value; 78.

That’s it! That’s all there is to using the `reduce()`

method. This is a very powerful array method and you may find yourself using it much more often than you think.

Some of this content didn’t make sense to you yet? No worries, get familiar with JavaScript with our JavaScript Basics Course!

I hope this guide helped and I’ll see you in the next one. Until then, have fun and happy coding!