JavaScript’s reduce method. A Powerful Ally
Reduce is an extremely helpful swiss army knife of array methods. Reduce works like this, let’s say you have an array of numbers:
Now let’s say you want the sum of all the numbers in this array, reduce can work perfectly for this!
The way reduce works here, is that it takes an accumulator and a current value as arguments, the accumulator represents the starting value for this function, while the current value represents the current element in the array that reduce() is iterating over. In the body of my example, we are adding the accumulator with whatever element of the array is currently being iterated over. The accumulator automatically starts at 0 so when the first thing that happens is 0 + 8, then the accumulator is the result of that equation which is 8. Next up would be 8 + 3 which will change our accumulator to 11. This will work through every element in the numArray until it’s finished resulting in the sum of the numArray, so when we console.log(sumNumArray) the result of 61 appears in our console. The 0 at the end of the block is for setting a custom accumulator starting value, if I had set it to 10, the resulting console.log would have logged 71.
Something I have found reduce() especially useful for is when trying to find the average of an array. Let’s take our same numArray and find the average.
And wallah! By dividing the ending current value by the length of the array we can return the average.
Reduce is excellent with numbers, but reduce can also help us to do some interesting things when working with objects. Let’s create an Array of Objects.
Now let’s use the reduce method to make each object dog object a bit more simple to access.
This is certainly a bit more complicated than just working with numbers, but let’s walk through it step by step.
First, we create a new const called dogObj that is equal to the return value from the dogs.reduce function. Then we call reduce on our array of dog objects that will take the accumulator argument and we’ll call our currentValue argument dog. For the return, we’ll use the spread operator on the accumulator which will take each of the dog’s names and turn it into a property, then assign that property with its appropriate key-value pairs such as its name, breed, and age. Finally, we set the initial accumulator to an empty object so that our return is the newly arranged array of objects. Our return when we console.log(dogObj) looks like this.
Although this might not change the accessibility of this array of objects too much, this could potentially make things easier if you had a much larger array of objects and needed something more descriptive than grabbing each object by its index. This is just one example of how the reduce method can be used in new and interesting ways for many varied outcomes.
For a more in-depth look at the above code, watch this video by All Things JavaScript, LLC:
This all goes to show that the reduce method is a flexible and powerful method. Although reduce can become a bit more complicated outside of working with arrays of numbers, I believe it is a method that can grow alongside your travels in Java Script, as you learn and grow in your knowledge, reduce will continue to be a powerful method in your toolkit.
Resources: