Map, Filter, Reduce in JavaScript
Map, Filter, Reduce in JavaScript
Let’s start with a common interview question: Add numbers given in an array and return a single output.
var a = [3,5,1,6,7]; // Here is the array.The following solution crosses my mind instantly:
The output here is 22.
But wait, doesn’t JavaScript has a one-line solution?
Well, you got that right. This can be solved in a single line using built-in reduce() method. Let’s have a look at that.
What is Reduce in JavaScript?
The
reduce()method executes a reducer function (that you provide) on each element of the array, resulting in single output value.
Now what is a reducer function?
Reducer is a simple callback function.
Reduce() method, adds all the elements in the array and reduces them to a single value. In the above image, the one line code is converted to get a better insight at reduce method. The first parameter acc is the accumulator which accumulates the value at every callback.
What if the question is modified a little?
Instead of adding all the variables, now we want to multiply them with 3 and return an array?
A naive solution would be:
Umm… I would prefer the one-line solution. We don’t have one in this case?
Well, JavaScript has got you covered. You can use Array.prototype.map function.
Alright.
What is Array.prototype.map?
Let’s see what MDN has to say about it.
The
map()method creates a new array populated with the results of calling a provided function on every element in the calling array.
Let’s see how we can do this in a single line
All we have to do is invoke the map() method on the array and multiply by 3. And we have a simple clean solution.
Let’s play a little. Now, what if we want to filter and get all the numbers greater than 15 in an array?
I have a solution,
a=[9,5,3,18,21] // Array returned by map() method.This is the array we get from our previous solution and we want to return all the numbers greater than 15 in an array.
Alright, here is my solution:
The output we get is [18, 21] which is greater than 15.
I know what you must be thinking.
Here it is. The one-line solution:
We have used filter() method to return all the elements greater than 15 in an array.
Can’t map() method do the same job as filter() method?
Let’s see how map() method does the same job.
Well, did you see what happened here?
Map() method will return a boolean value, true when if condition is met and false otherwise.
Filter() method does not perform an operation it only passes a test.
While map() method is used to perform an operation.
Is it important to use the arrow function (=>) notation?
The good news is, you can use traditional function notation too.
Here is the code:
In the above code, an anonymous function is invoked and the result is returned.
The map() method will work just fine with traditional notation. The same function is written twice in the above image. The second one is written for better understanding. Both the outputs are displayed in the end.
Which one should I use?
We have to write less number of lines with arrow function compared to the traditional function. You can go with any notation of your choice.
As an exercise, you can write filter() and reduce() methods in traditional function notation.
When to use filter(), reduce() and map()?
Want to perform an operation and return a single value? reduce() method is your friend.
Want to pass a test and return values in an array? filter() method comes to your rescue.
Want to perform an operation and return values in an array? map() method is there to help.
In the next article, we will see how to write our own map(), filter() and reduce() methods. Stay tuned. See you next time.
I have written this article to the best of my understanding. Do let me know in case of any error and omissions.
