JavaScript: Use Reduce() to construct objects and eliminate loops

JavaScript’s reduce method reduces an array to a single value, but what exactly does that mean and why is it useful? JavaScript has several ways to iterate over an array, so why use reduce? Is it?

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 parameters required for reduce are accumulation, current value, and initial value. The baseline for the function looks like this:

of accumulator (referred to as previous value in the MDN docs) is the value to which all previous values ​​and the initial value (if an initial value is desired) will be set.

of current value Where callbacks or actions later in the reducer function are being executed.

of initial value The starting value of the accumulator. If the single value to which the array is reduced is numeric, the initial value will be an integer. If an object is created, the initial value will be the object. If an array is created, the initial value will be the array.

There are other options that can be specified, such as current index and array, but are not required.

To easily understand this, look at this simple loop function as an example. The sum variable performs the function of an accumulator.and an array[I] Current value at each iteration of the loop.

The above loop expressed as a reduce method looks like this:

Reduce also works when working with arrays of objects. One thing to note is that the return statement is absolutely necessary if you have multiple lines of code. The example below shows the accumulator console.log inside the reduce callback and the first multiline reduce example.

Constructing Objects with Reduce

As in the previous example, the initial value sets the pace for the remainder of the reduce function. So if the initial value is 0, all other values ​​are added to that 0. If the initial value is an empty object, the remaining values ​​are added to the empty object. The baseline reducer function looks like this:

If you wanted to convert the array of fruits in this example into a single object, in long form it would be:

There is a way to shorten this. This is a syntactic sugar version of this. And it looks like this.

The above example creates a copy of the previous accumulator and adds the current value key-value pair.

But what if the array in question is an array of strings instead of an array of objects? No problem! The structures are similar. You can use Reduce to create an object of elements and their indices.

You can also pass additional callbacks to your reducer function. This is a very basic example.

A final example of object construction is an example of a count object. In this example, the object we are constructing keeps track of the number of times each fruit appears in the array.

Below is one version of what the count object might look like.

There is a way to make this solution a little more elegant. Similar to the syntactic sugar above, the spread operator copies the previous accumulator object and adds new key-value pairs to it. The values ​​in brackets have the following meanings: Sets the value of the key to the current value of the key or adds 1 to 0. This also works outside reducer functions.

Building Arrays with Reduce

You can use Reduce to create an array. By setting the initial value to an empty array, the reduce function accumulates values ​​into the array. The skeleton looks like this:

Constructing an array is similar to constructing an object. Reduce can build arrays and arrays of arrays. Below is an example of a reduce method that creates an array.

Here’s an example of how to build an array of arrays using reduce.

You can also pass callbacks in an array.

Conclusion

Reduce is another useful tool when it comes to various ways to iterate over arrays in JavaScript. Reduce is great for chaining higher-order functions and abstracting looping processes. The time complexity is O(n) because it iterates over all the elements of the array. Be careful when adding processes inside the reduce function.