Using Reduce - Going beyond addition
December 22, 2016
To follow along with this section of slides, you can point your browser to repl.it/Eus4/0
We can call this function whatever we would like, and we can name its parameters whatever we would like also. But, to stick to the original example and help show what is going on, I’m calling the parameters accumulator and currentValue again.
So, every time this callback is ran, we are going to return the value of the accumulator (essentially the running total) plus the value of the current item our array is at.
Now that we have our callback function built, reducing that array of numbers is as simple as calling the reduce method on it, and passing in our callback. In this example, since we haven’t passed in an optional initial value, our addNumbers function will only be ran four times - one less than the total length of our array.
Why is that?
Well, the first time the function is ran, it will set the accumulator to the first value in our array. Since we didn’t provide an initial value, the reduce method on our very first run sets the current running total (or, the accumulator) to the first item, and then it’s going to run the function with the second number as our current value.
So here, we return 3 as our new running total - or our current accumulator.
Now we are on run two out of four. We’re taking the third item in our array and adding it to our current running total again. After this run, we’ll be passing 6 back as the current running total.
Now we are on run three out of four. We’re taking the fourth item in our array and adding it to our current running total again. After this run, we’ll be passing 10 back as the current running total.
Now we are on run four out of four. We’re taking the fifth item in our array and adding it to our current running total again. After this run, we’ll be passing 15 back as the current running total.
Now we have gone through every number in the array and successfully reduced it down.
What would this look like if we passed a starting value as the second argument into our reduce call? Let’s hop back over to our REPL and see the difference.
To follow along, head over to repl.it/Eus4/1
Here, we actually run the .reduce() method for the full length of our array. On the first run, our accumulator (or, running total) is set as the starting value - and this time the number 1 begins as the first currentValue instead.
How can we use reduce to accomplish more complex tasks? The trick is the use of the starting value argument.
You can follow along with this one at repl.it/Eus4/3
So here we have an array filled with student’s votes for their favorite colors. Without manually going through each item and tallying the votes, how can we use reduce to simplify this task?
Here on run #1, we can see the accumulator is an empty object, because that’s what we passed in as our startingValue.
The currentValue is the first item in the array, so for our first run, it will be the color red.
Inside of our combineFavorites function, we can see the if/else statement checking whether or not a key of ‘red’ exists on the accumulator object. Since the object is empty at this point, it definitely does not exist, so it will result in undefined. Therefore, the if part of the if/else statement will run, and we will create a key of ‘red’ in our empty object and set the value to 1.
Now comes the next important part - just like in our example with addition, we return the accumulator, or the running total. But this time, we now have returned an object that no longer is empty.
Here on run #2, we can see the accumulator is no longer an empty object.
Our currentValue is now orange, so this will also result in undefined from our if/else block - resulting in the ‘orange’ key adding to the object with a value of 1.
Here on run #3, we can see our if/else statement no longer returns undefined, but rather the value of the key ‘red’ on the accumulator.
So, we increment the value by one, and then continue on…
With this reduce function, we were able to create an object with the tally of votes. Now, this data is much easier to use than it was previously as an array. We reduced the array into a more usable piece of data.
How can I use the .reduce() method in web development?
There are many ways, but one important example is when connecting to APIs. APIs will often give you much more data than you may really need. For instance, this is a call to NASA’s API to get information about current Near Earth Objects, or NEOs.
What if we wanted to build a web application that utilized only a small bit of this data? Reduce to the rescue!
Head over to codepen.io/lfkwtz/pen/LbaoJJ to see this in action.