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 often struggle 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 a hot reloading feature in your project as I used along with 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 install -D nodemon

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

Image for post

Image for post

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

USAGE

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

Image for post

Image for post

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

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

Image for post

Image for post

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). The first argument is the so-called accumulator value, in English; the value that is transferred from the previous iteration of the reduce method, if we set it 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 the index and the array itself. Let’s take a look at them with an example on the same array.

Image for post

Image for post

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 the 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 do 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 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 the reduce method of JavaScript and I hope you enjoyed it too. See you :).

Source: https://medium.com/