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

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

1. 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){
    ...
})

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

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

2. 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
}) 

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

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

3. 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: 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.

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

[ 2, 4, 8, 10 ]
24

Difference Between map(), filter(), and reduce() Methods