Open In App

How to use map(), filter(), and reduce() in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

The map(), filter(), and reduce() are the array functions that allow us to manipulate an array according to our own logic and return a new array after applying the modified operations on it.

JavaScript map() Method

The map() method in JavaScript is used to create a new array by applying a function to each element of the original array. It iterates through each element of the array and invokes a callback function for each element. The result of the callback function is then added to the new array.

Syntax:

arr.map(function(args){
...
})

Example: Using JavaScript’s map() Method to Update Array Elements

The code initializes an array arr with values [2, 4, 8, 10]. The map() method is then used to create a new array updatedArr where each element of arr is incremented by 2. Both the original and updated arrays are logged to the console.

Javascript
let arr= [2,4,8,10]
let updatedArr = arr.map(val=> val+2)
console.log(arr);
console.log(updatedArr);

Output
[ 2, 4, 8, 10 ]
[ 4, 6, 10, 12 ]

JavaScript filter() Method

The filter() method in JavaScript is used to create a new array with all elements that pass a certain condition defined by a callback function. It iterates through each element of the array and invokes the callback function for each element. If the callback function returns true for an element, that element is included in the new array; otherwise, it is excluded.

Syntax:

arr.filter(function(){
// condition
})

Example: Filtering Array Elements in JavaScript

The code initializes an array arr with values [2, 4, 8, 10]. The filter() method is then used to create a new array updatedArr containing only the elements of arr that are less than 5. Both the original and filtered arrays are logged to the console.

Javascript
let arr = [2, 4, 8, 10];
let updatedArr = arr.slice().filter(val => val < 5);
console.log(arr);
console.log(updatedArr);

Output
[ 2, 4, 8, 10 ]
[ 2, 4 ]

JavaScript reduce() Method

The reduce() method in JavaScript is used to reduce an array to a single value. It executes a provided callback function once for each element in the array, resulting in a single output value. The callback function takes four arguments: accumulator, currentValue, currentIndex, and the array itself.

Syntax:

arr.reduce(function(){
...
})

Example: Using JavaScript’s reduce() Method to Accumulate Array Elements

The code initializes an array arr with values [2, 4, 8, 10]. The reduce() method is then used to accumulate the elements of arr by adding them together. However, the code has a mistake where curr is mistakenly assigned prev + curr instead of adding prev and curr. Additionally, the initial value for the accumulator is not provided. Thus, the code will result in an error.

Javascript
let arr= [2,4,8,10]
let updatedArr = arr.reduce((prev, curr)=> curr= prev+curr)
console.log(arr);
console.log(updatedArr);

Output
[ 2, 4, 8, 10 ]
24

The table below shows the comparison of properties of the above-mentioned methods:

Property

map()

filter()

reduce()

Return typeReturns a new arrayReturns a new arrayReturns a single element
ActionModifies each element of the arrayFilter out the element which passes the conditionReduces array to a single value
Parametersvalue, index, arrayvalue, index, arrayaccumulator, value, index, array


Last Updated : 15 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads