How to use Map, Filter and Reduce in Javascript

Map, Filter and Reduce are three major bits of functionality that arrived in Javascript as part of the ES6 spec back in 2015.

Ultimately, map, filter and reduce are simply functions that can be used on arrays. The things that each of them do can all be achieved through other means, ranging from simple for-loops, to things a little more complex such as calling functions inside of for-loops. At the heart of it, map, filter and reduce provide really nice, concise ways of doing certain things.

Note: If you want to sound like you know what you’re talking about, Map, Filter and Reduce are higher order functions (these are basically functions that take other functions as parameters).

Heads up, this tutorial will be making use of arrow functions. If you’ve yet to learn how to use them, that’s no problem, as you can still write map, filter and reduce functions with regular function syntax.

Okay, now that’s out of the way, let’s go!

So, let’s say that we have been building a To Do App (because the world needs another To-Do app!)

And let’s say that whenever we create a new task, it gets added onto an array that we have, and let’s say that we’ve added three tasks to it so far.

Wanna see what our array looks like so far? Look below:

let tasks = [
{
'name' : 'Buy milk from the shop',
   'duration' : 20,
   'priority' : 1
},
{
'name' : 'Clean the house',
   'duration' : 120,
   'priority' : 3
},
{
'name' : 'Study JS functions',
   'duration' : 180,
   'priority' : 1
},
]

Now let’s say that we want a quick and easy way to display all of the tasks names, but don’t care about the durations, because we just want a nice, clean list of tasks that need to be completed. Well, that’s where we can use the map function.

tasks.map(task => task.name)

// Output

["Buy milk from the shop", "Clean the house", "Study JS functions"]

Now let’s imagine that our To Do App has the ability to mark each task with a different priority (1 for high, 2 for medium, 3 for low). If we wanted our app to have a section that only shows high priority tasks, we could use the filter function.

tasks.filter(task => task.priority == 1)

// Output

[{name: "Buy milk from the shop", duration: 20, priority: 1}, {name: "Study JS functions", duration: 180, priority: 1}]

Now let’s imagine that the duration part of each object in the tasks array is allocated to the estimated amount of time we reckon each task will take to complete. Maybe we want there to be a little section in the corner of our To Do App that shows the total amount of estimated time it will take to complete all of the tasks in our list. Well, we could just add them all up one by one, or we could use a nice, clean reduce function to do this for us.

tasks.map(task => task.duration).reduce((total, amount) => total + amount)

// Output

320

The reduce function required a little more set up here as we initially needed to use map to create an array of durations. We could then chain a reduce function onto it to simply add up the numbers in the array and output the result.

And there we have it, some working examples of how to use map, filter and reduce 😄

For anyone who would like to read a really, really, really detailed review of map, filter and reduce, I’d recommend reading: 
https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209. This post goes into the real nitty, gritty and should help you to understand it all a little better — truth be told, it served as the foundation for this very post :)