Learn map, filter and reduce in Javascript

The perfect toolset for your venture in Functional Programming

This article is pointed towards beginners in Javascript or people who are just starting working with functional Javascript and never heard of map, filter and reduce. If you already have a lot of practice with these, you can just jump to the end of the article where I point you towards some other interesting pieces.

What is functional programming?

Functional programming is a programming paradigm where the output value of a function depends only on the arguments that are passed to the function, so calling a function a determinate amount of times will always produce the same result, no matter the amount of times you call it. This contrasts with a lot of common and contemporary code, where a lot of functions work with a local or global state, which may end up returning different results at different executions. A change in that state is a side-effect and, eliminating these, can make it easier to understand and predict the behavior of your code.

Why map, filter, reduce?

One of the key foundations of functional programming is its use of lists and list operations. In Javascript we have map, filter and reduce, all functions that given an initial list (array of things), transform it into something else, while keeping that same original list intact.

Map

Sometimes we have an array of objects that we wish to modify/add properties of each object, other times we might have an array of strings that we which to turn all of them lower case. In reality there might be countless situations in which map is your savior and it’s really simple to use.

How to use it?

This is the most basic way to call map

Multiplying every number in the array by 2 using Map

As you can see, map receives a callback as an argument. That callback is then given the current value of the iteration, the index of the iteration and the original array from which map was called. There is also an optional second argument for map (after the callback) that is the value to use as “this” inside the callback.

Examples

Given this javascript array of objects:

Our songs array

• Simple transformation of array of objects into array of strings

Getting all the song names using map

• Applying a transformation through an util function

Using an util function with map to lower case all song names

• Transforming the given array and adding and removing properties from each object

Removing properties and adding new ones to the object in the array using Map

Browser Compatibility

Javascript map browser compatibility

Filter

I’m pretty confident that in your entire path as a programmer you’ve had to filter some items out of an existing array, as it is one of the most common exercises. This used to be quite annoying to do yourself but now there is no need to sweat, filter is here to help!

How to use it?

Pretty similar to map. If you know map, you know filter!

Filtering out the even numbers from the array using Filter

Filter receives the same arguments as map, and works very similarly. The only difference is that the callback needs to return either true or false. If it returns true then the array keeps that element and if it returns false the element is filtered out.

Examples

Given the same song array as before

• Filter the even numbers

Filtering the even numbers using filter

• Do a simple string search

Filtering all words that have “at” using filter

• Filtering arrays of objects

Getting all Mastodon songs from the song array using filter

Browser compatibility

Javascript filter browser compatibility

Reduce

Last but not least, reduce takes an array and reduces it into a single value. For example, with an array of numbers you can easily find the average of all values.

How to use it?

It is similar to both map and filter but, it differs in the callback arguments. The callback now receives the accumulator (it accumulates all the return values. Its value is the accumulation of the previous returned accumulations), the current value, the current index and finally the whole array.

Calculating the sum of the array using Reduce and then finding out the average

Examples

Given the same song array as before

• Calculate the sum of an array of integers

Calculating the sum of the array

• Build an object from an array — { artist: song count}

Creating an object from an array using reduce

• Turn an array of arrays into a single one

Flattening an array of arrays using reduce

Browser compatibility

Javascript reduce browser compatibility

The Triforce ✨

Map, Filter and Reduce are chainable and, together, you hold an unlimited amount of mystical power! 😄 ✨ ✨

Given these more complex arrays of songs where we have an array of arrays with songs from Spotify and LastFM. Each song has a duration in seconds.

Now we must get a string separated by commas with all the songs that have a duration superior to 3 minutes.

The triforce!

Eddy Murphy approves the triforce

Why use map, filter and reduce?

• You work directly with the current value instead of accessing it through an index (i.e array[i]);
• Avoid mutation of the original array, therefore, minimizing side-effects;
• No need to manage a for loop;
• No more creating empty arrays and push stuff into them;
• REMEMBER THE RETURN STATEMENT IN THE CALLBACK;
• You can call it the triforce of functional Javascript and that sounds cool?!

The triforce of functional Javascript

Conclusion & further work

I hope you enjoyed and learned something with this article and that you leave with a will to explore more about functional programming in Javascript. If you want to know more about the funcional reality in Javascript, I highly recommend these reads.

Master the JavaScript Interview: What is Functional Programming?

Functional JS with ES6 — Recursive Patterns

If you want to stay updated on everything I write please feel free to Follow me!

João Miguel Cunha - Medium

And if you want to see more stuff from me I can recommend these posts:

React patterns you should know

React performance tips