.reduce() in Simple Terms
Learning a new or different coding language is hard. It’s amazing how despite it just being a few short weeks of learning Ruby, I feel like this transition into Javascript is shaking my fundamental knowledge to its core. The subtle but very consequential differences in coding languages really made me understand why they are called “languages” in the first place. Whether it was “method” changing to “function”, the change in loops and enumerators, or simply declaring variables, learning Javascript immediately reminded me of my father, quick to tell me I was wrong, but seldomly telling me why.
One of these new changes that baffled me is a function called reduce. I do not know enough myself to show you everything that reduce can do, but here is a quick rundown on the basics to help explain how you can leverage it in your favor. Reduce, according to MDN documentation “executes a reducer function (that you provide) on each element of the array, resulting in single output value.”
wut?
If you only take one thing away from this, it should be that last bit of the definition. “…resulting in single output value”.Maybe you are quicker to understand the name than I was, but that is the key to reduce. Reduce is best used to take data, which can be a string, array, or even object, and reduce it down to one value. This can be something like a math equation over numbers in an array, or the total cost of items in an online shopping cart.
For the following example, we will be looking to keep the total of our cart online.
In the code above, cart is set to an array of objects, and cost is our function to find the total. On line 1, we see a basic example of how we are structuring this function.
‘cart’ = array
‘prev’ = accumulator
‘next’ = currentValue
‘prev’ + next.price’ = ‘work’
‘0’ = initial value
The initial value is not always necessary, but when reducing objects it is required in most cases. So let’s break down exactly what is happening with each piece of the puzzle. Essentially, for every item in our cart, add its price to the price of the previous item. Seems easy enough, right?
WRONG
There are a couple sneaky things at play in this very simple function. Notice in our ‘work’ (prev + next.price) portion of this function, we only call the ‘.price’ on the currentValue (next.price). Why is this? Look up and notice we included an initial value of 0. This is absolutely necessary to make this function work because we are operating on objects. This 0 as our initial value means that on the very first loop through, 0 is ‘prev’. This means that we are adding the price of an apple (1) to 0. This sets us up to be working with integers and ensures our return is what we are expecting. Without this 0, we would get a return that reads ‘[object Object]234’. If we try to skip the initial value and set our ‘work’ to ‘prev.price + next.price’ our return will be ‘NaN’ or ‘not a number’. This strange quirk is due to the nature of how exactly this loop executes. It took me a while to understand why calling both value would not work, until I broke it down step by step.
Above is what this code is doing, step by step.
- 0 is defined as our initial value, so 0 becomes the first ‘prev’ while ‘next.price’ is set to 1, the price of apple. 0 + 1 = 1
- 1 (the total of the first loop) is now ‘prev’ while 2, the price of banana is set to ‘next.price’. 1 + 2= 3.
These first 2 steps hopefully shed more light on some of the confusion from above in regards to a bare ‘prev’ and inclusion of an initial value.
3. 3(total of last loop) is now ‘prev’ and ‘next.price’ is set to 3, the cost of cheese. 3 + 3 = 6
4. 6(total of last loop) is now ‘prev’, and we are at our last loop which sets ‘next.price’ to 4, the cost of some duff.
After all of this code runs, we are left with what we wanted in the first place, our variable cost = 10.
I hope you find this brief breakdown helpful, for a more in-depth insight, check out the MDN documentation, happy coding!
