<The Northcoders Blog />

 

All Posts

Reduce: Five Unusual Uses

...for the best thing in JavaScript

The array method reduce is the best thing in JavaScript, but it's only existed as a native method of the language since 2009 or so, when the 5th Edition of ECMAScript was released. Before then, people would have relied on their own or other implementations. Even now, there are arguments for going elsewhere - lodash's reduce, for example, can handle objects too.

Master of Reduction

Learning reduce (or becoming a Master of Reduction, to give this process its formal name) is one of those release moments in learning JavaScript. The MDN docs are a touch impenetrable, with some not intuitive use cases and weird terminology like 'initial value' and 'accumulator' crazying up your mind. Thankfully, the internet is littered with blog posts from developers of all statures giving their two-penneth and most of them will tell you everything you need to know for its every-day use.


I have little to add on teaching you the common use cases of reduce. If you can use it to:

  • total up values
  • tally into an object
  • flatten an array
  • identify unique values
  • coalesce .map and .filter logic

then you're in no bad place. But here's some more interesting cases you might come across one day.

Averaging

Here's an implementation of reduce that averages an array of numbers. It totals up, and then on the last element of the array, it divides by the length of the array passed in.

reduce code snippet

OK, nothing too fancy, but it gives us the opportunity to see all four arguments that reduce will pass to the function given to it.

So why not this? I hear you cry in righteous consternation:

reduce code

 Yes, this will work fine, in this case. But it's important to remember that the array you start off with is not necessarily the same array as the fourth argument in the callback - if you're chaining methods, for example:

reduce code

 Of course, you could slice your divisor at the end too, but this approach goes against one of the principles of functional programming - give functions the arguments they need to do their job so they don't need to look outside. My version isn't perfect, to be fair - it would be nice to be able to extract and rename the function to be shared elsewhere, but what would I call it? It has very specific behaviour - sometimes total, sometimes divide. Not likely to be useful elsewhere.

Piping

You can use reduce to send a value through a number of functions and squeeze it out the other end. This makes use of JavaScript's treatment of functions as 'first class citizens' - they can be passed around as values just like any other.

reduce code

This is great for composability and shows the strength in isolating atomic behaviour into individual functions. Reorder your initial array and what result would you get?

Unlike the previous examples, this makes use of the mythical second argument reduce can take, the initial value. You'll almost always need it (unless you're ok with reduce using the first item from the array as its initial argument), but it doesn't have to be an empty string / array / object etc - start with what ever you want.

On that note :

Data transformation

Say you don't have control of the data that's coming in from a third party API or a database you didn't design. Then say you need to process that data into a format you don't control either - say, for a third party React component. Reduce is, essentially, for turning a collection into something else, and that can be any value you like. Define an initial value that looks like what you want it to look like. This is an example that turns a response from the Google Books API into data for a chart.js pie chart.

reduce code

If this looks a bit like a tally to you, it essentially is. And by the same logic, if you know what you'll be tallying, you could declare it in your initial value to save yourself some key checking in the reduce:

reduce code

Checking value existence

You may have found yourself in the position of wanting to check if a value exists inside a nested object, but not have any guarantee of the structural integirty of this object. console.log(galaxy.solarSystem.planet.satellite.manInTheMoon) won't cut it, because not all planets have satellites and not all satellites have strange men staring down at you through your bedroom window so you can't sleep. So you find yourself doing a run of every increasing nested checking:

console.log(galaxy.solarSystem && galaxy.solarSystem.planet //etc...)


Clunky and chunky. Lodash has a .get method that will take a dot-separated string and return either the existent value or undefined. But why not make our own with our newfound skills?

reduce code

See if you can make a version that can parse a string representing nested arrays too!

Sequencing

Reduce can be a way of avoiding recursion without resorting to a for loop too. I'll let you figure out what this one does.

reduce code

 If you've never made an Array directly with the constructor before, give it a go. It'll make this strangely empty, 'sparsely populated' array, for which even undefined is too corporeal. It has the length you'd expect, but as it is devoid of constituent values, it cannot be mapped, filtered, reduced etc. .fill() is a neat way of populating it with undefineds, something which can at least be iterated over.

Any more interesting ones? Let us know @Northcoders!

two fingers holding tiny ice cream conePretend to be a wizard by picking up a stick, pointing it at your computer, and commanding 'Reduce!'
 
***
 
Check out many more of Jonny's fantastic blogs on his website!
Jonny Rathbone
Jonny is a tutor at Northcoders. He thinks you should learn to code because "It's the most cost-effective way of ruling the world"!

Related Posts

5 Resources to Learn to Code for Absolute Beginners

Whether you've played about with your MySpace page back in the early noughties or you don't know your Rub...
Frankie Buttons 19 September 2019

Stats Don't Lie: Why tech is THE industry to work in

Considering changing your career to work in tech? You're not alone. Google Trends data suggests that peop...
Frankie Buttons 13 September 2019

How to ignore imposter syndrome and become a better developer

Feel like you might be in the wrong place? You might be experiencing imposter syndrome.
Frankie Buttons 09 September 2019