January 14th, 2021
reduce() method reduces the array to a single value.
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)."
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
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.
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.