Reduce JavaScript
The Reduce Function has much more power then a first thought, as I continue coding and learning more complex algorithms, I have realized the power of the reduce function. The MDN docs are not that easy to understand, so in this post we will go over some useful ways to use Reduce. This post will hopefully help you better understand a very understated JS ES6 function.
If we wanted to get the sum of an array without using reduce, we would have to manually iterate through each value, which would be more time consuming:
let arr = [1,3,5,7,9]
let sum = 0
for (let i=0; i<arr.length; i++){sum += arr[i]}All these lines of code can be reduced into one line by utilizing the Reduce function ( sooo much power ;) ). It’s very important to remember that the Reduce Function can be only called on an array. It takes in both a callback function and an initial value. The initial value can be left out if we are starting with zero.
arr.reduce(callback, initialValue)Helper Function vs No Helper Function
The Reduce Function can be written in multiple ways: either including a helper callback function (for more complex logic) or writing the code out on one line. This example shown below illustrates both methods accomplishing the same task: counting the number of items in the array. For easier visualization we will try to keep with the one-line approach.
In the one line function we pass a callback function (acc, tree) => acc +1 and the initial value 0 to the reduce function. After the first iteration of the first object in the array, the accumulator will be equal to 0 +1. Second iteration would be 1+1 and so on.
Some things to note:
The callback function will always receive an accumulator (acc) and an element of the array as the function iterates through. The accumulator is the number/object/array that is passed from one call of this callback function to the next.
The bottom function returns the same result as the top. Can you see why? If this does not make sense yet, keep reading on and look at the pattern between all these use cases.
Sum Up A Value in the Array
We can just as easily sum up the ages of the tree.
As we can see, we went deeper a full level.
If we wanted to initialize this function, we could pass an integer as the initial value instead of zero. If we changed the 0 to a 10, our result would then be 98. Try it out and see!.
Using Reduce instead of Map
The Reduce Function is so powerful that we can even replicate the functionality of the Map Function with the reduce function. Maybe it's not something that we are going to use in a real life scenario, but it makes it easier to understand the functionality of Reduce. We initialize the reduce function with an empty array here as we want the tree types held in an array, but we can as easily convert this output to a string.
Creating a Dictionary
I recently discovered this trick that makes searching through an array of objects much quicker. If you’re looking for a specific object within an array, we can use reduce to create “key: value” pairs instead of looping through each object in the entire array. This saves so much time as datasets get larger. The example below will explain further.
Now each object is stored with a key value and we can retrieve any object by just knowing the key, saving so much time! Make sure to initialize with an empty object instead of array.
Searching for Max Value
Thus far, we have been treating the callback function (accumulator) only as a value that accumulates, but in reality it is just a variable that persists through each iteration of the array. If we are looking for just the maximum value of an array, we can compare this each iteration and only keep the max (or min).
Let’s look at what is happening here. The callback function starts with a null value the first iteration, so the accumulator is set to tree.age when checking the object item in the array (return tree.age). Then through the next iterations, the current tree.age will be compared with the stored accumulator!
Conclusion
I hope this little blog allows you to get more use out of the Reduce function. AS we can see reduce is a very powerful functions to use for a Developer. Below i'll share some resources so we can understand better reduce.
