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

35f2db2f shutterstock 321830759


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:

d76a121b reduce skeleton

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.

c3cc0f10 sum loop

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

8ca092ef sum reduce

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.

0d59b531 fruit object sum

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:

d1c265e9 reducer object

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

2be7ecd4 fruit object long

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

c4076f0b fruit object ss

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.

d6400cc3 fruit indicies

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

f305c073 fruit multiply

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.

6f33fbea fruit count object

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.

ef77b999 count ss

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:

ff435db5 array skeleton

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.

769ba383 array

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

c0ff4e93 array of arrays

You can also pass callbacks in an array.

bcdee900 array callback


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.

group Created by sketch.


Source link

What do you think?

Leave a Reply

GIPHY App Key not set. Please check settings

    SK Siltron CSS michigan.facility

    SK Siltron CSS opens new manufacturing facility in Michigan

    James Angus smsf

    Bluestone Home Loans Launches Home Loans for SMSF