How does filter differ from map and reduce in JavaScript?

The filter method in JavaScript is distinct from the map and reduces its purpose and functionality. Here’s how it differs:

The filter method

filter is used to create a new array that includes elements that pass a specified test. It applies a callback function to each element of the array, and if the callback function returns true, the element is included in the new array.

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

In the example above, the filter is used to remove odd numbers from the array, leaving only even numbers.

Comparison with Map and Reduce

  • Map: Transforms each element of an array and returns a new array of the same length.
  • Filter: Selects elements based on a condition and returns a new array that could be of a different length.
  • Reduce: Reduces an array to a single value by applying a function to each element and accumulating the result.

Summary

Use a filter when you need to select a subset of elements based on a condition. Use a map when you want to transform all elements without changing the array’s length. Use reduce when you need to derive a single value from an array, such as summing numbers or concatenating strings.

Understanding these differences will help you choose the right method for your specific task and write more efficient and readable JavaScript code.