Skip to content

MangoBass Consulting

Javascript Array.reduce - When To Use

Posted tutorial, javascript, react, coding, technical


Psst, if you wanna skip ahead to the final code example, click here.

The Array.reduce method can be a bit mystifying. It can be difficult to know exactly when to use it. The point of this blog is to illustrate when Array.reduce should be used.

We'll be covering the following:

What Is Array.reduce?

The Array.reduce method executes a custom reducer function on each item in an array. Each item in the array has the opportunity to add or mutate the value of an accumulator, which is the final returned value.

The definition of “reduce” being used with the Javascript Array method is consolidate. Basically, we are reducing the many elements inside of an array into a single value.

Array.reduce takes 2 arguments:

  1. callback (AKA reducer function): called on every function, unless initialValue isn't supplied
  2. initialValue: first argument to the first call of the callback
    • Note: This value is optional, but more on that later.

The reducer function takes 4 arguments:

  1. accumulator: accumulates the return values of each iteration of the callback
  2. currentValue: current array element being processed
  3. index: index of current array element being processed
  4. array: the array being processed

Note: For the sake of simplicity, I will only be using the accumulator and currentValue parameters in each of the reducer functions in my code examples.

Code Examples

The best way to examine example cases of Array.reduce is to look at some of the different data types that can be used as the accumulator, or initialValue.

Number

The accumulator works great with numbers! I was surprised when I discovered that the accumulator didn’t have to be iterative.

In this example, I'll use a number as the initialValue:

Using reduce allows me to declare the totalEarnings variable and use the result of my array method to define it.

Before I was comfortable with the reduce method, I would have used a let to declare my totalEarnings variable and the Array.forEach method to add the value of each shift to this variable:

I prefer to use the const declaration whenever possible to help avoid the mistake of redefining my variables.

Would you switch to the reduce method to use a const declaration? Do you prefer using a let declaration? Tweet me @leovolving to let me know!

Object

One of my favorite uses of the reduce method is converting arrays to objects. I often run into problems where I have an array of objects that need to be converted to a single object.

In this code example, I want to group the array of attendees* to a tech conference by job:

The result of the console.log on line 15 should look like this:

Each element in the array has been sorted by job, and now we have an object!

Undefined

initialValue can be undefined either implicitly or explicitly, both having different effects.

Implicit

As I mentioned earlier, if you don't provide an initialValue, the first value in your array will be used instead.

I'm going to use the same example as the number code example from earlier, but without an initialValue:

Because I did not provide an initialValue, the first value of acc was the first value of the earnings array, which was 80.

Explicit (advanced)

Note: I don't generally recommend this use case; just because you can doesn't mean you should!

In advanced cases, the reduce method works as an alternative to Array.find in which you would want to both find and mutate the item in a single expression.

In this example, I want to find a post with the most recent date, and also format that date:

Running this from my browser in Los Angeles, the result of this function would be 6/23/2020. Note that I explicitly provided an initial value of undefined, as opposed to ommitting it.

When To Use

Well, it depends. There are several things to consider when choosing how to iterate over an array, such as readability, performance, and the presence of Promises. I generally only have one rule:

Skip social media sharing links
The best time to use Array.reduce is when it's the best soluiton to the problem that I am solving.

I know, I know it sounds obvious. But it's true! For me, this is most likely to happen when my return value is not going to be an array. (Did you notice that there wasn't an array example in my code samples?)

When Not to Use

All things considered, performance will not likely be the reason you don't use reduce. The difference between reduce and other solutions is insignificant for many apps.

There are some times when ommitting the reduce method is simply easier to read. For example, I may have an array of strings where I'd want to filter out the null values, and add an exclamation point to the end of each of the remaining string:

While this technically gets the job done, I can't help but opt for the one-line option when it doesn't add a confusing amount of logic:

As long as the array is small enough that iterating over it twice won't cause performance issues, I always go with the logic that is easiest to understand without an explaination.

Skip social media sharing links
I try to remember that while I'm building a product for users, I am also writing code for the developer that will inherit my work.

At first glance, the logic around a reduce method isn't as straightforward as the other array methods. This is because the accumulator can be virtually any data type.

Meanwhile, I know that the filter and map methods can only return arrays. Seeing them immediately conveys information that would not have been obvious to me if I had instead seen reduce.

Conclusion

The answer of when to use the reduce method isn't binary.

The reduce method is a great tool; it’s just as important to know when to use it as it is to know how to use it.

Do you agree with my use cases for Array.reduce? Did I miss a good one? Tweet me @leovolving to let me know!

*The people in my examples could never attend a tech conference, because all of them were murdered. Click here to see how you can support Black lives.

Subscribe to be the first to get the latest from Leo!

Share This Article


About the Author: Leo Yockey

Leo Yockey (he/him/his) is the Founder of MangoBass Consulting. He is also a co-founder of Hackertunity and an advocate for underrepresented technologists. If you enjoy his writing, you can see more on his personal blog or twitter.