|
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.
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' }
]
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);
|
Example 2: In this example, we will filter the fruites having the color yellow.
Javascript
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
|
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.
|
|
