Bojan Gvozderac

JavaScript Functional Programming — map, filter and reduce

Even if you don’t know what functional programming is you’ve probably been using map, filter and reduce just because they’re so incredibly useful and make your code stink less by allowing you to write cleaner logic.

Disclaimer: the title of this article is ‘JavaScript Functional Programming’ but I won’t be diving too deep in to that topic, we’ll be looking at map, filter and reduce.
It’s basically a marketing trick to raise awareness of a really cool world of coding called functional, maybe you never heard of it or maybe you heard of it but never gave it much thought.
If you’re suddenly interested in finding out more about functional programming check out Professor Frisby’s Mostly Adequate Guide to Functional Programming (Link)
Functional-Light JavaScript by the awesome Kyle Simpson (Link)
take a look at Eric Elliott (Link) the dude’s a legend(!!!) and talks about functional programming often.
Even if some of these concepts fly over your head the first time you read them, don’t worry, that’s natural, keep at it and soon you’ll be reaping the rewards.
In my opinion, the most important thing here is to introduce you to new approaches that will help you write better JavaScript code.

Let’s move on to the stars of this article…


Let’s take a look what MDN says ‘map’ is (Link):
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
1const numbers = [2, 4, 8, 10];
2const halves = => x / 2);
4// halves is [1, 2, 4, 5]
Nothing fancy here, we’re just going over the values in ‘numbers’ array, halving them and creating a brand new array with the halved values (big reveal: the array with halved values is called ‘halves’. SHOCKER!)
map is used when you have an array of stuff ( scientific term ) and you want to do something ( another scientific term ) for every item in that array.

For a more in depth look at map go over to MDN (Link)


What does MDN think filter is? (Link)
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
1const words = [
2 "spray",
3 "limit",
4 "elite",
5 "exuberant",
6 "destruction",
7 "present",
10const longWords = words.filter(word => word.length > 6);
11// longWords is ["exuberant", "destruction", "present"]
Just like map ‘filter’ is nothing special. It’s going over values in ‘words’ array checking which values pass the test, in this case which value has length greater than 6 and then returns a new array with those values

For a more in depth look at map go over to MDN (Link)


And now we’ve arrived at the fun part and the inspiration for this article.
reduce is incredibly versatile and flexible! It can be used in a tonne of scenarios, it’s a damn shame that it’s mostly used to get the sum of numbers in an array or the “more advanced version” ( *sarcasm* ) in an array of objects get the sum of a certain property.
MDN! What’s your take on reduce? (Link)
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
1const total = [0, 1, 2, 3].reduce((sum, value) => sum + value, 1);
2// total is 7
See that up there? The most common reduce example known to man and that wouldn’t be a problem if developers expanded on it rather than stopping there.
What I noticed happening with developers and reduce is that they either don’t need to sum up some numbers so they forget reduce exists or they remember reduce exists only when they need to sum up some numbers but ( as was implied before ) reduce can do so much more than just sum stuff.
The really cool thing about reduce is that it passes the result of one callback function invocation to the next one allowing us to do some crazy ass shenanigans like…
Compose Functions

The example for composing functions using reduce we’ll be looking at I jacked from Eric Elliott and his post about reducers (Link), which I can’t recommend enough.
Eric Elliott always produces quality content and you should definitely follow him on every possible platform!

The part that’s most interesting to us is this one:
1const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
That up there is poetry!
‘compose’ is partially applied ( curried ) with functions that will do their work and pass along the results to the next function in line, notice the usage of rest parameters so that we can compose as many functions as we want and all of them will be put in the ‘fns’ array. Baller!
Then we feed it the initial value ( x ) or rather the value on which you’ll apply actions — compose functions.
After that we reduceRight the array of gathered functions with the initial value — x, this is the same as reduce but starts at the end of the array and moves to the start because that is how ‘compose’ works if the opposite is more natural to you than you want to pipe functions.
Example usage:
1const add1 = n => n + 1;
2const double = n => n * 2;
3const add1ThenDouble = compose(
4 double,
5 add1
7add1ThenDouble(2); // 6
8// ((2 + 1 = 3) * 2 = 6)


Chaining Promises

The example for chaining promises using reduce I jacked from Bobby Brennan and his excellent post about promise patterns and anti-patterns (Link). Check it out!

The interesting part:
1let itemIDs = [1, 2, 3, 4, 5];
2itemIDs.reduce((promise, itemID) => {
3 return promise.then(_ => api.deleteItem(itemID));
4}, Promise.resolve());
The code up there translates to:
2.then(_ => api.deleteItem(1))
3.then(_ => api.deleteItem(2))
4.then(_ => api.deleteItem(3))
5.then(_ => api.deleteItem(4))
6.then(_ => api.deleteItem(5));
Look at how nice and clean reduce makes the code, now imagine how much cleaner it would get if it was an array of 40 or more id’s!
It’s not even a complicated example, it’s really straightforward, that’s what makes it so bitchin’!

Call to Action

We saw some really cool and creative uses of map, filter and reduce… who are we shitting here? The cool and creative examples were only for reduce but never mind that!
If you’ve stumbled upon some interesting ways map, filter or reduce were used send me an email, I’m sure there are heaps of practical ways these 3 can be used!
Share Article on:  or 
Bojan Gvozderac profile image

Bojan Gvozderac is an experienced web and mobile developer specializing in JavaScript with almost a decade and a half developing software Bojan has proven that he has the knowledge and the expertise to deliver the goods!
If you'd like to get in touch and talk about potential projects, one of my articles, ask a question or just say "Hi!" please do by clicking  here.