Select Page

JavaScript Array Methods: reduce() [Article]

Dustin Usey
Published: December 13, 2022

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!

Source: blog.teamtreehouse.com