map() vs filter() vs reduce() in JS
If you’re new to JavaScript and have heard of methods like map(), reduce(), and filter() but aren’t sure what they are or why they’re used for, All of these methods, in general, are used to manipulate array elements in various ways.
Even if you have a basic understanding of these methods, you may still have the following question while using any of them:
“Is it the right one for the purpose? or, why don’t I try that instead of this?”
I’ll take you through these three methods, their applications, and the distinctions among them in this article.
Let’s dig deeper!
1.map()
The map() method is quite similar to forEach() method. The forEach() method loops through each element of the array and performs some function on each one of them in order. Let’s see how map() differs from this.
Here is an array of ‘student objects’ is given and asked to retrieve their ‘ids’ from there. You can get this done by using the forEach() or map() method. Let’s see how it happens with forEach().
You have to create an empty array to pass the output, then loop through the given array using forEach(), and inside it, push (insert) each id into the empty array which was created earlier. Now let’s see this with the map() method.
By looking at this, you might think that by using map() it just takes one less line of code than forEach(). So what’s the big deal about that? If that is the case, you can still do it with 3 lines of code with forEach as well.
This will give the same output as well. The change that has been made here compared to the previous forEach() example is that there is an additional argument passed to the callback which refers to the index of the current element and it assigns the student id of the current student element in place of each current element.
So here the output is the same, but the key difference is that when you are using map() and returning something from it, it can return those values to a new array without affecting the original array, but with forEach() it can’t return any values to a new array. It can be used to execute functions (this can be done with map() as well) within the callback of array elements, and also, if needed, it can be used to alter the current array as well.
If you are looking to alter the original array then go with forEach() else map() can be your go-to option.
forEach()— executes a provided function once for each array element.
map()— creates a new array with the results of calling a provided function on every element in the calling array.
Note:map() can do whatever forEach() does.
2.filter()
The name itself conveys what this method can do. It just filters the array and returns only the needed elements out of it.
Have a look at this example, Now you are asked to get the students who follow ‘IT’ and ‘SE’ in two separate arrays.
By looking at the previous example and the word separate arrays in the description, you might be thinking of using map() at first. Let’s see what happens if we use map() here.
In the output, there are two undefined values. Along with that, you can see the students who follow ‘IT’. Here our task is done, but not exactly done in the way we expected because we don’t want the arrays to have undefined values.
If you remember the previous explanation about the map(), it executes the function on each element and also returns the corresponding output for each element as well. That’s why when it performs the ‘if’ condition on the ‘SE’ student objects, it returns an ‘undefined’ value as there isn’t any condition given for ‘SE’ student objects to return any value.
To overcome this issue is why we need the .filter() method. Now let’s see how this goes with filter().
The only thing that has been changed here is the word filter in place of the map. So what happens here is, it checks the condition and if that is true then it returns that object to the new array. You can make it even shorter like this to make it more understandable,
If the returning value is true, no matter which operator we are using or it won’t matter if are using the condition on that array elements or not. Even if you put (return 10>5) inside the callback it will return all the objects to the resulting array because the condition will remain true throughout the loop.
So the highlight of filter() method is if the callback returns true then it will return the current object to the resulting array else it just does nothing.
3.reducue()
The reduce() method also runs a callback for each element inside an array. Here, like the filter() method, the name of the method conveys its functionality. It reduces the current array elements to a single value and returns it, unlike returning an array of elements. Let’s see how it works with an example.
Now say you need to calculate the average marks of all the students. To get that first, we need the total marks of all these students.
Here you can also apply the map() method to get the total. Remember the fact that map() is not only used to perform a callback and return elements to a new array, you can use it for some other computations as well. Let’s see how that works with this example.
So here you have to initialize a variable ‘tot’ with the value of 0. Then you have to add every student’s marks to the ‘tot’ variable inside the callback. Finally, we divide the total by 4 to get the output. Now let’s see how we can do the same thing with reduce().
Here, with the reduce() method, it’s even more straightforward. You have to pass two arguments inside the reduce method. One is the callback and the other one is the initial value. Inside the callback, you have to pass two arguments, which are the accumulator and the current object.
So the initial value you set earlier will be initialized to the accumulator. This accumulator is the one that holds the returning value or object of the callback, and eventually, it will be the one that returns the final value of the reduce method as well.
Here, for your better understanding, you can put a print statement inside the callback like above and see how the accumulator works. The reduce () method is something you might feel confused about or take time to understand at first sight. So do some more experiments with reduce () to get a clear understanding of it.
Summary
So that’s all about these three methods I wanted to cover in this article. There are a lot more you can do with these methods. Keep in mind that there is not any compulsive rule that you should only use any of these particular methods in a particular situation. Solutions are endless, but it’s all about choosing the best for the business. I hope this article will help you to get a basic knowledge of the map(), filter(), and reduce() methods.
Thanks for reading!