Introduction
Hey folks...👋
If you are a JS developer, you probably know how map, filter, and reduce help in programming. But, even If you aren't aware you won't have to worry about it.
In this blog, we will try to understand the working of each of the three methods in layman's language followed by syntax and an example, with and without using these functions.
Map()🔀
It is used when we want a new transformed array from the original array, by running a function through each element of an array.
SYNTAX :
Here, the map method takes a callback function as an argument that contains the logic to transform the array.
// Arrow function
arr.map((element) => { ... })
// Callback function
arr.map(callbackFn)
eg: (using map())
// Multiply 2 with all the elements of array and return the result array
const arr=[2,3,4,5,6]
const result=arr.map((e)=>{ return e*2 })// using arrow function
console.log(result) // [4,6,8,10,12]
What if ! map function was not there? we would try to solve the above example again without using map
const arr=[2,3,4,5,6]
const result=[] // declaring empty array to store
for(let i=0;i<arr.length;i++){
result.push(arr[i]*2)
}
console.log(result)
In the above example, we would have to maintain a result array, for loop and push every transformed element into the result array. whereas, the map function takes care of these things and return the result array.
Filter()⏬
It checks for a condition to be true for each element of an array. It then as the name suggests would filter out the elements that satisfy the specified condition by returning an array.
####SYNTAX: Here, the method is passed with a callback function which will have conditions that will be used to filter out elements from the array.
// Arrow function
const arr.filter((element) => { ... })
// Callback function
const arr.filter(callbackFn)
eg: using filter
//Find all the even numbers of an array and return the result array
const arr = [1,2,3,4,5,6,7,8]
const result = arr.filter((e)=> e%2 === 0 ) //using arrow function
console.log(result) // [2,4,6,8]
What if ! map function was not there? we would try to solve the above example again without using filter
//return array of even numbers
const arr = [1,2,3,4,5,6,7,8]
const result = []
for( let i=0; i<arr.length; i++){
arr[i]%2 === 0?result.push(arr[i]):result
}
In the above example too, we would have to maintain a result array and push every element that passes the condition into it. whereas, the filter function takes care of these things returning the result array.
Reduce()🥣
This method is the confusing one among the other two methods. Whenever we want a result to be a single value after running a function throughout an array we use reduce method. The single value can be string, object, number, etc. depending upon the type of data in the array. The callback function is also called "reducer
SYNTAX:
Here, the passed function will contain two arguments, in which the first argument (previousValue) is used to store the latest result, and the second argument (currentValue) has the current value of the array that is currently being processed.
// Arrow function
array.reduce((previousValue, currentValue) => { ... } )
// Callback function
array.reduce(callbackFn)
eg: using reduce🤏
// find sum of each element of array
const arr=[1,2,3,4,5,6,7]
const sum = arr.reduce((prev,curr)=>prev+=curr) //used arrow function
console.log(sum)// 28
What if ! reduce function was not there? we would try to solve the above example again without using reduce
// find sum of each element of array
const arr = [1,2,3,4,5,6,7]
let sum
0
for( let i=0;i<arr.length;i++){
sum+=arr[i]
}
console.log(sum) //28
In the above example, we saw, we had to maintain a for loop along with the variable sum to get the final sum. whereas the reduce function takes care of all these things and returns the sum
Conclusion
All these methods are designed to serve their own specific purpose. So, utilizing them in our code would
- Abstract the amount of code we write.
- Make managing and debugging the code easy.
- Make the performance better.
If you want to go through each topic in detail then check out the following resources Map, Filter, Reduce
Thanks for taking out time to read this blog. Feel free to share your opinion on this blog in the comments.