Map() vs Filter() in Javascript

In JavaScript, the map() and filter() methods are powerful array functions that allow you to transform and filter arrays easily. We will discuss the required concepts about each method in this article.

JavaScript Array Map()

The map() method in JavaScript is used to create a new array by applying a given function to each element of the original array.

Syntax:

array.map(function_to_be_applied)
array.map(function (args) {
    // code;
})

Example 1: In this example, we will transform each element by multiplying with 3.

Javascript

const numbers = [5, 10, 15, 20, 25, 30];

const multipliedNumbers =
    numbers.map(num => num * 3);
console.log(multipliedNumbers)

Output

[ 15, 30, 45, 60, 75, 90 ]

Example 2: In this example, we will transform all values making them uppercase alphabets.

Javascript

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'kiwi', color: 'green' },
    { name: 'orange', color: 'orange' },
    { name: 'pineapple', color: 'yellow' }
];

const transformedFruits = fruits.map(fruit => ({
    fruitName: fruit.name.toUpperCase(),
    fruitColor: fruit.color.toUpperCase()
}));

console.log(transformedFruits);

Output:

[
  { fruitName: 'APPLE', fruitColor: 'RED' },
  { fruitName: 'BANANA', fruitColor: 'YELLOW' },
  { fruitName: 'KIWI', fruitColor: 'GREEN' },
  { fruitName: 'ORANGE', fruitColor: 'ORANGE' },
  { fruitName: 'PINEAPPLE', fruitColor: 'YELLOW' }
]

JavaScript Array filter()

It is used to create a new array that includes only the elements from an existing array that pass a specified condition.

Syntax:

array.filter(function_to_be_applied)
array.filter(function (args) {
    // condition;
}) 

Example 1: In this example, we will filter the values greater than 20.

Javascript

const numbers = [5, 10, 15, 20, 25, 30];

const numbersGreaterThan20 =
    numbers.filter(num => num > 20);

console.log(numbersGreaterThan20);

Output

[ 25, 30 ]

Example 2: In this example, we will filter the fruites having the color yellow.

Javascript

// Using filter to get fruits which are yellow in color
const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'kiwi', color: 'green' },
    { name: 'orange', color: 'orange' },
    { name: 'pineapple', color: 'yellow' }
];

const yellowFruits =
    fruits.filter(fruit => fruit.color === 'yellow');

console.log(yellowFruits);

Output

[
  { name: 'banana', color: 'yellow' },
  { name: 'pineapple', color: 'yellow' }
]

Differences of Map() and Filter() methods

map()	filter()
Creates a new array with the same length as the original array, but with each element transformed by the callback function.	Creates a new array with only the elements that pass the conditions implemented by the callback function.
Used when you want to transform each element in an array	Used when you want to select only certain elements that meet a specific condition.
Returns a new array with the same length as the original array.	Returns a new array with a length that is equal to or less than the original array.