Blog

Understanding reduce() as a combination of map() and filter()

Published by: Daniel

It can be tough to identify use cases for something like reduce() until you’re already comfortable using it. Consider this a gentle entry point on your path to advanced use of the Swiss Army Knife of Array Methods...

Getting an understanding of Array Methods is key to feeling increasingly confident writing JavaScript. The most powerful – and therefore most complex – is reduce()

I never found it helpful to try and understand reduce() reading explainers like “reduce can take an array and return anything”. What?

That’s true – but when starting it's likely more mental overhead than you need.

In this article we’ll look at reduce() for a simple use case – taking an array and returning an array. That’s what map() and filter() do, and hopefully you're already comfortable with those.

Mapping and filtering

Imagine we have an array of numbers, and we need to increase every score by 1 and eliminate any scores now over 5.

Unknown block type "code", specify a component for it in the `components.types` prop

The above illustration performs map() and filter() separately in their own variables. But it’s possible to chain the methods and get the same result stored in one variable.

Unknown block type "code", specify a component for it in the `components.types` prop

Make no mistake: There’s nothing “wrong” with chaining Array Methods – and you could argue they’re easier to read than the code below – but it presents us an opportunity to perform a very simple reduce(). So let’s do it!

Reducing

When using map() and filter() our logic is only concerned with each individual item in the array.

With reduce() we get access to the individual item as well as the entire array during each iteration. This means we can modify each item as well as selectively add to the array with each iteration.Comment on this paragraph

Consider these differences:

  • In map() we return an updated item
  • In filter() we return a boolean to include/exclude that item
  • In reduce() we return the latest value of the entire array
Unknown block type "code", specify a component for it in the `components.types` prop

The second parameter ([] on the last line) is the default value for output. In this instance, an empty array.

This second parameter can be anything, and what you return inside of the reduce can be anything. This is the confusing part I'm deliberately avoiding in this particular article. Once you're more comfortable with reduce() you'll find reasons to use.

For example instead of returning an array, you could return a number like the average of all scores under 6.

Believe me: Programming is a passion you develop
through challenging yourself to the imagination of beautiful possibilities.

© 2022 Daniel Dozie. All rights reserved.