Using Reduce in JavaScript
sticks & stones may break my bones but reduce is done confusing me
In going through the many many algorithms that make up LeetCode, I’ve noticed the reduce() method coming up in quite a few solutions on the discussion boards. This common method and its syntax has caused me to think myself into a cloud of confusion for too long. I’m sure I can’t be the only one… right? If not, read on!
I’ve since taken on the task of breaking it down to understand how I can implement it in the future, and wanted to share my findings. A good first step when any development/ syntax doubt or confusion comes up is to reference MDN- which is exactly where we are going to start. Let’s take a look!
‘The
reduce()method executes a reducer function (that you provide) on each element of the array, resulting in single output value.’ -MDN Web Docs
So, as its name suggests, it reduces a group of elements to a single value. It does this by iterating through the elements in an ARRAY from left to right. Great, so when and how do we use it?
Example #1 — find the sum of the given array
Reduce works as an iterator, in this case the value of total is going to be itemsCost[0] and the value of amount will be itemsCost[1]. Above, we are asking the reduce method to add together total + amount. We will continue on to the next iteration, now calling the value of amount to be itemsCost[2]. While the value of total = itemsCost[0] + itemsCost[1]. When there is nothing left to iterate over, the value of total will be returned.
Example #2 — List of items and their count
Without questioning the groceryItems list, we want to store all of the elements present in the array as well as their count or number of times that they appear. Another function of reduce( ) is the ability to create data structures. As seen on the last line, we are giving an empty object as a parameter. In this example we are going to fill and return that object as our single value. When we pass in an initial value ( in this example, the {}), count becomes that initial value ({}) and item will be groceryItems[0] (‘carrot’). In the first iteration we are going to be setting key value pairs to groceryItems as the keys and their values will be 1.
On the second loop we will check if the return object contains a key with the value of the the current groceryItem of the reducer. If it already exists, increment the value to current count + 1. If it doesn’t, we create it with the value of 1. After we have iterated through all elements of the input, we return the, now filled, object.
* If you don’t pass in an initial value, reduce assumes it to be the first item in your array**
*Always be sure to return the total* — reduce will only work if something is returned. Note that in the first example we did not explicitly say return, because it was all written in one line.
There is plenty more deep diving that you can do when it comes to reduce( ), but i hope that this has given you a little more clarity on the topic. Please, leave any comments, questions, feedback, etc below. Stay tuned for more algo/ JavaScript breakdowns in the near future. Thanks for stopping by!
