Reducing is one of those things that took me forever to understand. Honestly, I still feel less than comfortable with reduce than I want to feel. You know that you really know a tool when you feel super comfortable reaching for it in a lot of situations.
That's what I want to try to give you today, the opportunity to become comfortable with reduce.
Versions of reduce exist on most collections in most languages, but we'll specifically be talking about JavaScript's Array.reduce() - and therefore Array.reduceRight() since it's identical with one small change. We'll do that with some examples, and then an exercise you can go do. If you read this, you'll understand a lot about reduce, but you'll forget most of it tomorrow. If you spend 10 minutes and do the exercise, you'll remember it all for a long time, and give yourself a new tool you can add to your toolbelt.
The quick summary of reduce is that it takes an entire array, and reduces it down to a single thing. This might be math, adding all elements together, it might be boolean logic, ANDing all values together. It's only limited by your imagination.
There are two versions: reduce() and reduceRight(). Reduce loops over each element from index 0 to the last element, reduceRight loops over the elements from the last element down to index 0.
Each time reduce iterates, it keeps track of what work has been done so far in an intermediate value, and then takes the current element, and somehow combines it with the work done so far.
The canonical example is to sum all the numbers in an array.
Let's first see an example using the standard method with a forEach loop
Now let's see the same thing with reduce
In the above, you can see how reduce works. It takes in a callback. The first parameter is the result of the previous operation. The second parameter is the current element. When we add the two together, we get a running total. In our array of 2, 6, 10, we first add 2 and 6, and get 8. Then this intermediate value, 8, is passed into the function again with the new current element which is the value 10. 8 + 10 is 18. That's our final result.
Notice a couple of things. Reduce executes one time less than the number of elements. The first time it executes, it uses the first element - in our case the number 2 - as the first parameter to our callback, and the second element as the second parameter.
The first parameter to the reduce function is a callback that executes on each iteration. There is an optional second argument which is an initial value. If we pass in that second argument, then reduce executes once for each element of the array, using this initial value as the first argument to our callback instead of using the first element.
Let's use the value 10 as an initial value and see this again.
Now the result will be 28. 10 + 2 + 6 + 10.
The first call will pass in 10 as result, and 2 as cur as the arguments to our callback. The second call will be 12 and 6, and the third and final iteration will be 18 and 10.
This initial value is very useful if we ever need to do something to each current element before combining it. For example, let's say we're summing up the cost of the items in a shopping cart. Our cart will look like this:
Now we first have to multiply the quantity by the cost, then we need to add that to the previous result. The elements in the array are objects. So we can't add the result of this math to an object. We need to add it to a number. So we use an initial value of 0 so that we get the correct result as we add the quantity times cost to the previous value on the first iteration. That will look like so:
Every operation with reduce can be written using forEach or a for loop, but reduce makes the syntax much more succinct.
You may not entirely feel comfortable with it yet. But hands-on work will fix that.
It's time for you to practice. Click the link to go to the exercise and follow the directions. I guarantee you, if you complete every exercise, you will feel VERY comfortable with reduce and find it surprising how often you can use it in your programming. Just keep an eye out for the times that you need to operate on the elements of an array and combine them together into a single result of some kind. Refer to the solution ONLY after you finish the exercise, or if you get stuck, just to get unstuck, but doing the work is how you will obtain the knowledge. Don't cheat yourself.
Do the Exercise
See Solution
If you're interested in REALLY learning JavaScript, check out our 100 Algorithms challenge.
And don't forget to check out all our awesome courses on JavaScript, Node, React, Angular, Vue, Docker, etc.
Happy Coding!
Enjoy this discussion? Sign up for our newsletter here.
Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @gothinkster
Top comments (0)