Map, Filter, and Reduce Functions on JavaScript

Map, Filter and Reduce are all higher-order functions, this means that they all receive a function as a parameter. They’re all called by an array (initial data) and return another array (in filter and map) or a value (reduce).

This article will show, with examples, how each of them works.

Before looking at the syntax of the functions, let’s try to understand how they work with an analogy.

Imagine we have a bunch of ingredients in our pantry and want to make spaghetti.

All our items in our pantry are stored in an array:

With the filter, we’ll use a function to select only the ingredients we want:

Now we have an array with the necessary items:

Using map() and another function, we’ll modify those ingredients:

After that, our dish is almost finished:

We still need to put it all together, using reduce:

It’s done!

Now let’s look closer into each of the functions.

Filter

The Filter function, like the name suggests, is used to filter a collection data.

Its function passed as a parameter must be a boolean, every item of the parent array will be called and it’ll be returned a new array with the items that passed the test.

Syntax:

• array: parent array, where the initial data is.
• function: it’s going to be called on every element of the array, it can have up to 3 arguments:
• value: current element from the parent array.
• index (optional): holds the index of the current element.
• arr (optional): holds the parent array.
• thisValue (optional): holds the value passed as ‘this’ to the function.
• returnedArray: new array with the elements that passed the filter, empty array if none element passed.

Example, filtering affordable rent:

A bit more complex example, filtering users that are not active on Twitter:

Reviewing Filter

We have iterable data:

We have a function that receives one parameter and returns true or false.

We use the filter method:

that will apply the function to every element from data and it’ll be returned a new array with the items that passed the test:

Map

The map function is a method used to call a certain function on each item of an iterable, returning a new iterable with the results. There are also other optional parameters.

Syntax:

• array: parent array, where the initial data is.
• function: it’s going to be called on every element of the array, it can have up to 3 arguments:
• value: current element from the parent array.
• index (optional): holds the index of the current element.
• arr (optional): holds the parent array.
• thisValue (optional): holds the value passed as ‘this’ to the function.
• returnedArray: new array where the elements and the values returned by the function.

As an example, we’ll create a function that calculates the area of a circle:

Now, if we have an array of radius, and want to use Map to calculate all the respective areas, it’d look like this:

We can also use an anonymous function:

Reviewing — Map

We have iterable data:

We have a function that receives one parameter and returns one value.

We use the map method:

that will apply the function to every element from data and it’ll be returned:

Reduce

The reduce function is used to reduce an array to a single element.

Syntax:

• array: parent array, where the initial data is.
• function: it’s going to be called on every element of the array, it can have up to 4 arguments:
• total: the initial value, or the previously returned value.
• currentValue: current element from the parent array.
• currentIndex (optional): holds the index of the current element.
• arr (optional): holds the parent array.
• initialValue (optional): a value that’ll be the initial value.
• returnedValue: the last value returned by the function.

Imagine that you have a data collection and a function that receives 2 parameters

just like map() and filter(), the function reduce() receives two parameter: the function and the array:

This is how it works:

calls the function with the first 2 elements of the array and keeps the result:

calls the function with the result from step 1 and the third element and keeps the result:

and so on:

In other words, in every step, it calls the function with the result of the last function as the first parameter and the next element of the array as the second. In the end, reduce() is going to return the final result.

Alternatively, we could see reduce() as:

Here’s an example using reduce to multiply all the elements in an array:

Conclusion

Being able to dominate these higher-order functions is going to help you in many ways such as having a clean and simple code, preventing bugs. Also, your code is going to be easier to debug and test!