What are the differences between JavaScript's Array.filter() and Array.map() methods?
Ava W

JavaScript'sArray.filter() andArray.map() are both array methods that operate on each element of an array, but they serve different purposes. Here are the differences between them: 1. Purpose: -filter(): - Used to create a new array by filtering out elements based on a condition. - Returns an array containing only the elements that pass the condition. -map(): - Used to create a new array by transforming each element using a provided function. - Returns an array containing the transformed elements. 2. Return Value: -filter(): - Returns an array containing the elements that satisfy the provided condition. - The length of the returned array may be smaller or equal to the original array. -map(): - Returns an array containing the transformed elements. - The length of the returned array is the same as the original array. 3. Function Signature: -filter(): - Accepts a callback function with three parameters: element, index, and the array itself. - The callback function should returntrue or a truthy value for the elements that should be included in the resulting array. -map(): - Accepts a callback function with three parameters: element, index, and the array itself. - The callback function should return the transformed value for each element. 4. Modifying the Original Array: -filter() andmap() do not modify the original array. They create a new array with the filtered or transformed elements. Here's an example to illustrate the differences:

1
2
3
4
5
6
7
8
9
10
11
12

const numbers = [1, 2, 3, 4, 5];

// Using filter()
const filteredNumbers = numbers.filter((num) => num > 2);
console.log(filteredNumbers); // Output: [3, 4, 5]

// Using map()
const multipliedNumbers = numbers.map((num) => num * 2);
console.log(multipliedNumbers); // Output: [2, 4, 6, 8, 10]

console.log(numbers); // Output: [1, 2, 3, 4, 5]

In the example above, we have an array of numbers[1, 2, 3, 4, 5]. Usingfilter(), we create a new arrayfilteredNumbers by filtering out the elements that are greater than 2. The resulting array contains[3, 4, 5]. Usingmap(), we create a new arraymultipliedNumbers by multiplying each element by 2. The resulting array contains[2, 4, 6, 8, 10]. Note that bothfilter() andmap() do not modify the original arraynumbers. They create new arrays based on the provided conditions or transformations. Understanding the differences betweenfilter() andmap() allows you to choose the appropriate method based on your specific requirements. Usefilter() when you want to create a new array containing only the elements that satisfy a condition, and usemap() when you want to create a new array by transforming each element.

Similar Questions