Difference between Filter and Map in JavaScript

Overview:

In JavaScript, both filter and map are higher-order functions that operate on arrays. However, they serve different purposes and have distinct functionalities. In this topic, we are going to discuss the difference between filter and map in JavaScript.

Filter() method:

A new array of all the elements that satisfy a specific condition is created by the filter() method. It accepts a callback function as a parameter, and each element of the array calls the callback function. Either true or false must be returned by the callback function. A component is added to the new array if the callback function for that component returns true. It does not include that element if it returns false.

Example 1:

Consider the situation where you have an array of integers and wish to make a new array that only contains even numbers.

This is how to apply the filter method:

Output

[ 2, 4, 6 ]

In this example, the callback function checks whether each element in the array is even by checking if the remainder of the division by 2 is zero. If the remainder is zero, the function returns true and that element is included in the new array.

Example 2:

Lets consider another example for filter method, and use the filter() technique to identify every left-footed player in the array.

Output

[
  { name: 'Jasu', footedness: 'left', position: 'forward' },
  { name: 'Loganadu', footedness: 'left', position: 'defense' }
]

Map() method:

The map() method calls a function for each array element and returns the results in a new array. The map method lets users manipulate the elements of an array however they see fit, returning the results of that modification in a brand-new array.

Each element in the original array is changed by the map() method to produce a new array. The callback function that is passed to map(), like filter(), is invoked for each element of the array. The new value must be returned by the callback function in order to be included in the new array.

Example:

Consider the scenario where you wish to construct a new array from a set of numbers that contains the squares of each number. The map method can be applied as follows:

Output

[ 1, 4, 9, 16, 25 ]

In this example, the callback function takes each element in the array and squares it, returning the new value. The map() method creates a new array containing the transformed elements.

Example 2:

Let's consider another example for map method to calculate the square roots of the ages contained within the array.

Output

[5, 6, 7, 8, 9]

One key difference between filter() and map() is what they return. The filter() method always returns an array that contains a subset of the elements in the original array, based on some condition. In contrast, the map() method always returns a new array with the same number of elements as the original array, but with each element transformed according to the callback function.

Another difference between filter() and map() is the type of the callback function. The callback function for filter() must return a boolean value, indicating whether or not the element should be included in the new array. The callback function for map() can return any value, and that value will become the new value of the corresponding element in the new array.

It's worth noting that both filter() and map() do not modify the original array. Instead, they create a new array that is a subset or a transformation of the original array.

Conclusion

In summary, filter() and map() are both useful array methods in JavaScript, but serve different purposes. The filter() method is used to create a new array with a subset of the original elements based on some condition, while map() is used to create a new array with each element transformed according to a callback function.