JavaScript Reduce Method Explained

January 14th, 2021

Hello everyone, in my last post about JavaScript methods I intentionally leave reduce to its own post. It's not complicated and pretty straightforward to use in my opinion, yet I've seen that lots of beginners are often struggles with reduce and I decided to write about it.

What is Reduce?

"The reduce() method reduces the array to a single value.

The reduce() method executes a provided function for each value of the array (from left-to-right).

The return value of the function is stored in an accumulator (result/total)."

This definition above comes directly from here, you can check many other concepts about javascript from the same website too. But if we want to "reduce" that definition into "Plain English" then that the definition of the reduce would be as it follows; Reduce takes an array, after iterating over each value returns a single value as an output.

I used NodeJS run time for the tutorial but you can use any platform that supports JavaScript while following along with me, example installation is below. The code for the post is here.

Optional NPM Package

We'll use Node time for this post, so if you like to follow along you need to have it on your local. You can download it here.

If you want to have hot reloading feature in you project like I used along the tutorial you can go ahead and install the code from github and simply run the command "npm install" in the root directory, or if you want to do that manually by hand on the root directory you should run the commands below in order:

npm init -y

npm install -D nodemon

After that you can go ahead and create a new script in your package.json file:

You can now start your node runtime with hot reloading by running the command:

npm run dev

USAGE

First we'll start with a normal for loop to sum over the each value of an object array then let's log it to see what's out there.

As you can see above it's also pretty straight forward this way, and the result is 517 as expected.

Now let's take a look at same operation with reduce.

As we can see reduce method takes 2 arguments here first one is a callback function and the second one is the initial value for our accumulator.

In our callback function as we can see we have 2 positional arguments and it can take 2 more positional arguments in total(they'll be used in the new example). First argument is so called accumulator value, in English; the value that is transferred from the previous iteration of reduce method, if we set is to 0 as in the example it starts with zero but it can be modified.

With the log statement in the callback function we can observe to see if the process is truly like how it's explained above.

As we can see output lines up with the explanation above.

The other 2 positional arguments are index and the array's itself. Let's take a look at them with an example on same array.

Now we are using all 4 arguments in our call back function to calculate the mean this time, rather than plain total. We are checking if the index of the element is equal to length-1 we can now return the mean value( or the average as in the example). When if statement is not satisfied we should go ahead and add the value until all the members of the array have iterated over. The result is now 64,625 as expected.

Conclusion

Yes as we can see actually reduce method is not doing anything new and from the many perspectives that's not make any sense to use it especially when it comes down to performance ( you can check other resources about the performance results here and here)

But one unmeasurable impact of the using native array methods like reduce or like the ones that I've mentioned earlier. It's the code readability. In my personal view using such widely known methods can lead to some unexpected good in the long run, because while working with bigger code bases speaking a more specific yet widely known language rather than extremely generic uses might pull you back in terms of performance but also can put you ahead in terms of productivity.

Of course, in the end the choice is up to you those were what I know and what I think about reduce method of JavaScript and I hope you enjoyed it too. See you :).