Map Filter Reduce in JavaScript
map(), filter(), and reduce() are higher-order functions because they take other functions as arguments. What is the use of these functions?
In JavaScript, We have many pre-defined functions for working with arrays but among those three functions are the most popular because they have the following benefits:
👉 Concise and efficient code, widely supported.
👉 Promote the immutability of Array.
👉 Lean to Functional programming.
I hope you got the idea why they are so useful, let’s understand them one by one.
Map() : map() is one of the most used and efficient functions available in JavaScript. It calls the function for each element of the array and returns the array of results.
let arr = ["saurav", "rahul", "gaurav"];
let result = arr.map((item) => item.length);
console.log("output", result);//[6,5,6]Arguments available in the callback function:
(1) item: current element of array
(2) index: position in array[optional]
(3)array: The array map() was called upon. [Optional]
Facts:
👉Does not mutate the original array instead it returns a new array.
👉callback function will not invoked for empty slots in the array.
👉Don’t use map() if you are not interested to use getting a new transformed array as it will be an anti-pattern.
filter() : filter() is used to derive a new array based on the particular condition, this condition is written inside the callback function, in other words, filter is a collection of elements having truthy value.
let arr = [1, 2, 3, 4, 5];
let result = arr.filter((item) => item > 3);
console.log("result's output", result); //[4,5]Facts:
👉 filter() returns the shallow copy of an array.
👉Performance wise reduce() or forEach() is better option if applicable
Reduce(): Reduce() is used when you want to calculate a single value from an array.
const arr=[1,2,3,4]
const result=arr.reduce(function(acc,curr, index array){
.......//some code
},[initialValue])the function passed inside a reduce() will iterate over every element of an array and pass it to the next element
Understand the arguments:
acc: reduce() function stores the result of each iteration value in acc, hence it is called as accumulator. If initialValue is provided then it would be the first value of acc otherwise it will consider array[0] value as the first value. [Mandatory]
curr: It is the current array item.[Mandatory]
index: It is a position in an array. [Optional]
array: The array reduce() was called upon. [Optional]
let arr = [1, 2, 3, 4, 5];
let initial_value = 0;
let result = arr.reduce((acc, curr) => {
return acc + curr;
},0);
console.log("SK@re", result);//15
Facts:
👉You can omit the initial value and if it is omitted reduce()will take the first element of an array as an initial.
👉The accumulator reduce() can be of any type
👉Use reduceRight() if you want to iterate an array from last to first element or right to left.
Note: It is considered best practice to provide an initial value as if an array is empty reduce() will throw and typeError and may behave unexpectedly.
Similarity in map filter reduce:
(1) They all are higher-order functions.
(2) They all iterate over each element of an array.
(3) All emphasis on Functional programming.
(4) They all are non-mutating.
(5) Supports method chaining.
Conclusion: This article is a brief description of the map filter reduce. i hope you understand what and how this function works, stay tuned for more such content.
Thank you so much for your support
SAURAV KUMAR SHARMA
