How to use map(), filter(), and reduce() in JavaScript ?
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.
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.
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.
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 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 |
Contact Us