map, filter, reduce functions in JavaScript made easy 🔥

JavaScript: Don't judge me by my bad parts, learn the good stuff and stick with that.

— Eric Freeman

There are many already built-in functions that make our life easier in this buzzing world.

Let's understand some important functions of them, that are "map", "filter" and "reduce". You definitely have heard about them. You probably know about them. But are they still confusing to you? Let's make them beautifully more clearer to you by using beautiful examples.

So, first of all, all are the higher-order functions (rough idea is: A “higher-order function” is a function that accepts functions as parameters and/or returns a function. ).

Map : It is a function that is used to transform an array.

Suppose we have an array

arr = [2, 7, 2, 1, 5]

And we want to double each value of it, something like [4, 49, 4, 1, 25]or to have binary number of each element of array like ['10', '111', '10', '1', '101']

For this purpose we will write .map() to our array "arr"

Like this arr.map( function ) "function" is the logic that we want to apply to our array. In our case, it will be

There are 3 ways to write code. All will yield the same output

x represents each value and we are doubling the x. This means we are doubling each value of the array.

Now a days, majorly arrow function is used as it is the latest. Let's see for binary what will be the code. Now, we will use only arrow function.

output is:

So easy 😀. Now move on to "filter". Don't worry we will do one more example for map function.

Filter: As the name suggests it is used for filtering out data that met the conditions provided by us.

Suppose, for the same array

arr = [2, 7, 2, 1, 5]

we want only the elements that are odd, like this [7, 1, 5]

For this we will add .filter( function ) to our array. And pass our custom function inside parenthesis of filter.

for this, our function will be like this

So, to get odd data we will write

And our output will be

The entities that match the condition get printed. For example 7, modulus of 7 is 1 which is true. So, 7 gets printed in array. For 2, modulus is 0 which is false in return status. So, it gets rejected !!

Easy peasy 😉. We'll have another example on filter also. But first let's move on to

reduce : It is used when we want to loop over an entire array and just want a single value out of it based on our given logic.

Suppose we have the same array

arr=[2, 7, 2, 1, 5]

And we want sum of all elements of array. i.e. 17

Before heading direct to reduce function. Let's see how we will do it if we have to do it without reduce.

We will make a function to findSum that is using for-loop:

in for-loop we are iterating over each element via arr[i] and adding that indexed value to sum.

This is the same process with reduce. i.e. iterating over each value then, doing work as per the requirements, in our case addition.

we have passed 2 parameters in this function

1. accumulator: It works like storing/accumulating the values.
2. current: It is the iterator that iterates over the entire array.

If we compare this to our normal function. Here accumulator = sum & current = arr[i] And we are doing the same thing like sum = sum + arr[i] in reduce function as accumulator = accumulator + current.

the 2nd argument 0 represents the initial value. As we are starting by assuming the minimum value in our array is 0. In reduce, words are different from normal, but intentions are same :)

So, how are all these three functions to you? Entirely strangers or good friends now 🤭.

Let's make these good friends, your best friends.

Here is the example that covers all these functions into 1 🚀

Question: Now, records is given, we want the total marks of aspirants having marks greater than 70 after giving grace of 10 marks to aspirant having marks less than 50.

Here is the code:

steps: 1. We first iterate over the entire array using map(). Then gave 10 marks to aspirants having marks less than 50.

2. Then we filter out the array with aspirants having marks greater than 70 using filter().

3. Then using reduce(), we sum the marks of aspirants having marks greater than 70. In our case Vishal : 100 & Isha : 95. i.e. 195 (output)

Now, I bet on you, that your concepts are clear now. Only you need is practice more with a variety of questions based on this.

Conclusion

In this article, we saw how map(), filter() and reduce() can ease the life of a developer by reducing the number of unnecessary lines of code & complexity. The end result of this is that our code is made more functional and easy to comprehend. Try replacing your for-loops with these state-of-the-art functions whenever you get a chance.

Happy coding 😎👨‍💻 !!