…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.
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:
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:
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.
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.
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:
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.getmethod 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?
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.
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!
Pretend 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!
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…
React: componentWillMount to be deprecated!
Our React teaching team follow developments in the Facebooks UI-creating library very closely. We update our curriculum every 2 weeks, and recently they came across an update worth sharing with everyone! This is a blog for anyone who builds User Interfaces with React! Some very important features are improving – but it’s important everyone knows…
JavaScript: The Spread Operator
The spread operator is awesome. It can do SO much — it’s efficient, readable, and can save a whole load of mess. I don’t know how you can not love it! It’s a reasonably new feature of JavaScript that came with ECMA2015 (or ES6, if you prefer, although the former is technically correct!) — or for those unfamiliar with…
Taking your JavaScript Skills to a Higher (Order) Level – Part 1
Take your JavaScript knowledge to another level, a ‘higher-order’. I remember reading about Higher Order Functions, watching videos and still not being 100% sure about what they are and what I should understand about them. Maybe it was a case of trying to run before I could walk but it all seemed so mysterious. This…
A Beginner’s Guide to Test-Driven Development
Test Driven Development (TDD) is an industry best practice, and it’s a method we teach our students from week 1 of the course. Throughout this post, I will be using Mocha as a testing framework, and Chai as an assertion library. If you’re new to programming, you’ll need to ensure you have Node installed on your machine before you read up…
Is Coding for Me? Signs You Should Learn to Code!
Ever considered learning to code? If you’re bored at work, consider yourself creative, or love learning, this post is for you! You like learning I’ve always enjoyed learning, even when I didn’t necessarily enjoy my schooling. I liked the feeling of approaching a brand new topic, having no idea where to start, and slowly feeling my…
Writing the Perfect Junior Developer CV
Poor CV? No interview. Great CV? Fast lane to interview. Your CV is your first chance to market yourself, and in many cases, your only chance to make a first impression. Make it count. In this post, I explain how to write a great Junior Developer CV What are the best practices? 1. Keep it…
What is Pair Programming and Why Do Developers Do It?
New to the world of programming? You might not be familiar with the term pair programming – yet. But one thing’s for sure, you will be by the end of this post! What is pair programming? Pair programming is a common software development technique where two developers work on the same code, together, at the…
Unlock Yourself
I’m overdue a post on coding and why, for me, it’s one of the most amazing things you can spend your time doing. I just wanted to get this one out first though. This is quite a personal post but I think it’ll resonate with at least a few people who read it. For me,…