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);
Output
[ 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);
Output
[ 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);
Output
[ 2, 4, 8, 10 ] 24
Difference Between map(), filter(), and reduce() Methods
Property | map() | filter() | reduce() |
---|---|---|---|
Return type | Returns a new array | Returns a new array | Returns a single element |
Action | Modifies each element of the array | Filter out the element which passes the condition | Reduces array to a single value |
Parameters | value, index, array | value, index, array | accumulator, value, index, array |