One Simple Trick to Boosting Performance Using Reduce

Jr. Dev
codeburst
Published in
5 min readJun 28, 2020

--

Have you ever realized that using a map followed by a filter, or vice versa, is quite common? Did you know that you could halve the computation time needed if you just used a reduce instead?

We will begin by recapping the three array methods. Feel free to jump ahead to section 5 if you are already comfortable with these.

Photo by chuttersnap on Unsplash

Contents

1. Overview
2. Map
3. Filter
4. Reduce
5. Map + Filter = Reduce
6. Performance

Overview

Map, filter and reduce are all methods on the Array prototype. They are used for different purposes, but they all involve iterating over the elements within an array using a callback.

Map

Map returns an array of the same length of the original array it was called on. It takes one parameter and a function, and can take 3 arguments:
1. The current item to iterate over
2. The index of the current item
3. The original array

Map does not mutate the original array, it creates a new array, so the value of a map must be assigned to a variable like so:

Let’s take a look at an example where we have an array of years. We want to get the age that these years represent, and we also want to keep the original year value too. This means that our array of integers will be mapped to an array of objects with each object having 2 properties: year and age.

Example:

We now have an array, ages, which looks like this:

ages = [
{year: 1991, age: 29},
{year: 1999, age: 21},
{year: 2000, age: 20},
{year: 2010, age: 10},
{year: 2014, age: 6}
]

Filter

Filter, as it sounds, filters the elements we want from an array into a new array, disregarding any elements we do not want. It takes one parameter, a function, which can take 3 arguments:

  1. The current item to iterate over
  2. The index of the current item
  3. The original array

The function acts as a predicate and returns the contents of the array, as they originally were, into the newly assigned variable. Unlike map, filter does not necessarily return an array with the same length as the array it was called on.

Like map, filter does not mutate the original array, so the value of a filter must be assigned to a variable.

Let’s take a look at an example where have a years array, which represents the year people were born, and we want a new array which contains only the years which would equate to a person being over the age of 18.

Example:

We now have an array, over18, which looks like this:

over18 = [1991, 1999, 2000];

Reduce

Reduce reduces an array down into a single value. That single value could be any JavaScript type; such as a string or a number, or even an array or object.

It takes two parameters:
1. A function which takes 4 arguments:

  • An accumulator
  • The current item to iterate over
  • The current items index
  • The source array

2. The initial value of our single value we want to return

Like map and filter, reduce does not mutate the original array so the value of a reduce must be assigned to a variable.

Example:

This could also be written like this:

We initialise our array, nums, and our reducer function which just adds a number to our current total value. We then initialise sum and call the reduce method, passing our reducer as the first argument, and our initial value we set our total at, which in this case is 0. As 0 is our initial value, this will be the value of total during the first iteration.

Map + Filter = Reduce

Now that we have recapped what map, filter and reduce do, and how they differ from each other, let us now understand the title of this article.

It is quite common in programming for you to want to filter elements in an array, as well as change their contents slightly. I use the word change lightly, as we know that using these methods do not mutate our original array.

Remember:

  • A filter retains the elements from an array that we are interested in, and assigns it to a new variable
  • A map always assigns an array to a new variable of the same length as the array it was called on

So why call a filter and a map, when you can essentially get the task done in half the time using a reduce?

Using a reduce we can complete the task we need of filtering and mapping the contents of an array in one step instead of two.

Let’s look at an example where we have a years array which represents the years people were born in, and we want to retain only those who are over the age of 18 as well as work out the age of the people.

Example:

We have now essentially combined the examples which we had in our filter section, and map section, in to one a reduce. This is the result:

over18Ages = [
{year: 1991, age: 29},
{year: 1999, age: 21},
{year: 2000, age: 20}
]

Our original array, years, had 5 elements, if we used a map followed by a filter, we would have completed 10 iterations to get the same result that we got in 5 iterations with a reduce. However, under the hood, map, filter and reduce do slightly different things, so does it actually make a difference in performance?

Performance

Let’s see what an extreme, unrealistic, but simple example shows…

I was extreme to push 100,000,000 integers into an array, but I wanted to show you the performance difference in seconds. The results show that it took reduce 3.14 seconds, using a reduce, to compute what was essentially done in 5.56 seconds using filter and map. And bear in mind this is just dealing with an array of integers. The computation time would have taken longer if dealing with strings or objects.

Conclusion

When you see yourself using a map followed by a filter, or vice versa, consider using a reduce instead and complete the computation in half the time! As a programmer you need to weigh up the pros and cons, as what you may gain in terms of performance, you may lose in readability in your code.

Reduce has many use cases, this is just one.

Happy programming 😊

--

--