Coding / Programming Videos

Post your favorite coding videos and share them with others!

Unmasking map, reduce and the filter method of javascript

Source link

Understanding Javascript/Node.js methods working behind the abstraction

These days there is a flood of new developers in Javascript/Nodejs world and one common thing among all is that everybody is flaunting about this so-called set of new features called ES6. Everybody wants to makes his/her code modern by using some newly arrived feature in the language even if they don’t understand what’s actually happening under the abstraction for this feature.

If you belong to javascript programmers community and not living under a cave, I’m sure you must have heard about these sibling methods of the array named map, reduce and filter. When I first started using them, I really felt like that yoyo cool programmer, and there is no doubt about how easy it is to use them. A lot has already been written by many bloggers & authors over the internet about these methods and how to use them so I don’t think there is any point of explaining again with a new title to tell you how to use them. Seeing their swift way of doing the perfect work, I thought to implement these methods myself and see if I would succeed.

Following code is my implementation of these default javascript methods. In no way, I have tried to make them perfect or even close to it. So this code is never written to be used in the production. This is to just understand how each of these methods would be working behind the mask

My implementation of map, reduce and filter methods of the javascript array object
  1. map 
    It passes each element of an array to the callback function and whatever comes in return from that callback is pushed back to the new array and when the forEach loop is completed, the final array is returned as the result
let digits = [2,5,6,7,3,10]
let a1= digits.map(function(i){return i*2})
console.log(a1) // [4,10,12,14,6,20]
let a2 = digits.myMap(function(i){return i*2})
console.log(a2) // [4,10,12,14,6,20]

2. filter
It passes each element of an array to the callback function and if it returns true for that element then that element is preserved and pushed to the new array otherwise its pushing is sipped and finally when the forEach loop is completed the final array is returned as the result

let digits = [2,5,6,7,3,10]
let a1= digits.filter(function(i){if(i%2==0){return true}})
console.log(a1) // [2,6,10]
let a2 = digits.myFilter(function(i){if(i%2==0){return true}})
console.log(a2) // [2,6,10]

3. reduce
It passes each element of the array to the callback function and result of the callback is passed to same callback again with the next element of the array and finally, when the forEach loop is completed the final value is returned as the result

let digits = [2,5,6,7,3,10]
let a1= digits.reduce(function(sum,i){return sum+i})
console.log(a1) // 33
let a2 = digits.myReduce(function(sum,i){return sum+i})
console.log(a2) // 33

I hope I have put some light on the internal working of these trending methods. I know my code might have some bugs but anyways that has not been written to use in production, I wrote to them to understand how these methods might be internally working.

Your little appreciation and honest feedback make me write even more. A person who feels appreciated will always do more than expected. If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles 🙂

Source link

Bookmark(0)
 

Leave a Reply

Please Login to comment
  Subscribe  
Notify of
Translate »