JavaScript: Build Objects and Eliminate Looping with Reduce()
The JavaScript reduce method reduces an array into a single value, but what exactly does that mean, and why is it useful? JavaScript includes more than a few ways to iterate through an array so why use reduce?
The reduce() method is similar to the built in array map method but has more built in functionality.
Let’s start with the basics. The required parameters for reduce are the accumulation, current value, and the initial value. The function’s baseline will look something like this.
The accumulator (referred to as the previous value in the MDN docs) is the value in which all previous values and the initial value (if an initial value is needed) is set.
The current value in which the callback or action later in the reducer function is being performed upon.
The initial value is the accumulator’s starting value. If the single value the array is being reduced to is a number than the initial value will be an integer. If an object is being created, the initial value will be an object. If an array is being created than the initial value will be an array.
There are other options such as current index or array that can also be specified but are not required.
To ease into this, please see this simple looping function as an example. The sum variable performs the function of the accumulator. And the array[I] is the current value on each iteration of the loop.
The loop above represented as the reduce method looks like this:
Reduce also works when working with an array of objects. One thing to make note of is that when there is more than one line of code, a return statement is absolutely necessary. The example below shows the accumulator console.log inside the reduce callback and the first multi-line reduce example.
Building Objects with Reduce
Similarly to the previous examples, the initial value will set the pace for the remainder of the reduce function. So when the initial value was 0, all other values were added to that 0. When the initial value is an empty object, the remainder of the values will be added to the empty object. The baseline reducer function will look like this:
If we want to turn the fruit array of objects in this example into one single object, it will look like this in its long form.
There is a way to make this shorter. This is the syntactical sugar version of this. And it looks like this.
The example above is making a copy of the previous accumulator and adding the current value’s key/value pair into it.
But what if the array in question is an array of strings rather than array of objects? No problem! The structure is similar. Reduce can be used to make an object of elements and their indices.
Additional callbacks can also be passed into the reducer function. Here’s a very basic example of this.
And the last example for object building is the count object example. In this example, the object being built will keep track of how many times each fruit appears in the array.
Here is one version of what a count object will look like:
There is a way to make this solution slightly more elegant. Similarly to syntactical sugar above, the spread operator will copy the previous accumulator object and add the new key/value pair to it. The value in parenthesis has the following meaning: either set the value of the key to the current value of the key or 0 then add one. This also works outside of a reducer function.
Building Arrays with Reduce
Reduce can be used to build an array. By setting the initial value to an empty array, the reduce function will accumulate values in an array. The skeleton will look like this:
Array building is similar to object building. Reduce can build arrays and arrays of arrays. Here is an example of the reduce method building an array:
And this is an example of how reduce is used to build an array of arrays:
A callback can also be passed into an array:
Conclusion
Reduce is another helpful tool when it comes to the many ways to iterate through an array in JavaScript. Reduce is great when it comes to chaining higher-order functions and abstracting away the looping process. The time complexity is O(n) because it iterates through all elements of the array so make note of that when adding additional processes inside of the reduce function.
