JavaScript functions map(), filter(), reduce()

Learn to love what you do by simplification

Why do we need these functions in JavaScript? It will be naive to call yourself a JavaScript developer without knowing how to use these functions. The basic functionality of these functions revolve around arrays, transforming each array element, finding an element in an array or simplifying a computation etc. Not knowing the applications of these functions will be like taking the stairs instead of the elevator. We have all done that and no one likes that!

Not using map, reduce, filter can be exhausting

A real world application for map could be in the case of subscription. A site visitor can easily transform into a subscribed user by the payment of a monthly fee or a one time fee in many cases. But what happens in the background is that as soon as the payment goes through an action is triggered and a value is changed. In some cases the value could be an integer or a string. For instance, a non subscribed person can have a value of 0 and a subscribed person can have a value of 1. Then the map function can look like this.

JavaScript map()

What map does is that it transforms a set of arrays. Here is another example of using a map.

JavaScript map()

Filter looks similar to mapping except what filter does is exactly what the name implies that it would do. It separates what we want from what we do not want. Imagine using a coffee filter, we separate the coffee residue from the liquid coffee. We filter out the undesired part of coffee.

filtering is separating the wanted from the unwanted

A very common usage of JavaScript filters is to build a search filter.

Search filter with JSON data

Here is what the React JS code for the search filter looks like

JavaScript filter

You can build search filters using various APIs. For example, here is an example using the Breaking Bad API

Search filters using API

Here is the basic syntax for filters in JavaScript

Syntax for search filters

The filter method takes an array and applies a conditional statement against it. If this condition is true, the element gets pushed into the output array, if it is false the element is not pushed into the output. In the case of search filters, it checks if the letter or number typed into the search input is included in the first name of the JSON array or the first name array provided by the API. If it is the value is outputted and exposed to the visitor.

Here is another example which is way simpler.

JavaScript filters

The reduce function can make life easier by reducing an array of values just down to one value.

Here is the syntax for reducer function

JavaScript reduce

Here is a simple example

JavaScript reduce

A more complicated usage or a real life usage of a JavaScript reduce function is when we convert excel spreadsheets into a JavaScript arrays and perform calculations on them. We can perform calculations using reduce functions. For example, suppose you have to count inventory from a .csv file. For simplicity I am not going to discuss how to convert data from a .csv file into an array, but there are really good resources out there. But in a scenario such as this, we can use reduce function using the given syntax.

JavaScript reduce

I feel like I have covered JavaScript functions with both practical and complicated, and very basic simple examples. Hope it makes exploring JavaScript built in functions more interesting for you.

Code and Create!

Samanja