Functional JavaScript: Decoupling methods from their objects

One thing I always end up doing in my project is decoupling methods from their objects. , and are not the only ones, but they are definitely among the first to be given freedom. map filter reduce Decoupling a method allows it to be free of the limitations imposed by their parent object as well as giving us more freedom in the ways we can express our code. So what does that look like? To keep things simple, let’s limit ourselves to just extracting from Array. Fortunately JavaScript’s prototypal inheritance makes this easy for us as the function we want is just sitting at . One cool thing about JavaScript is that we can call this method directly. We just have to use because expects a parameter. map Array.prototype.map .call map this Sprinkle in a little curry (future article) and we end up with this neat little one liner… const map = f => x => Array.prototype.map.call(x, f) We can now call our function sans-Array! map Alternate ways to map There are many different ways of calling and due to V8 engine optimizations and there’s really no difference in performance. map Any performance difference is not significant and these numbers will change every time. The takeaway should be these methods are equal. How does decoupling make my life better? Now that is a great question! Arguably the best question. I think this is best explained with code instead of words, so let’s just dive straight in. (and similar methods) do not return an Array, they return a NodeList and a NodeList does not contain a method. There are some magic tricks you can do to convert a NodeList into an Array, but conversion is not necessary as our can enumerate over a NodeList with as if it were an Array. document.querySelectorAll map map We can even over a string without the need to first cast it to an array of characters. map Decoupling allows us to easily turn an object mapping into a list mapping: We can even over objects. map Decoupling allows us to compose functions: Decoupling (with curry) allows us to partially apply the function arguments and create new functions. Say goodbye to !!! this In this example works but does not work because the context changes. What a pain! Instead we can decouple the method and cat.speak catSpeak this speak never worry about **this** ever again! Then we can create new functions that use our decoupled functions. Summary Today we have learned there many benefits of decoupling methods and extracting them from their objects. Decoupling allows a function to be used in more places and different types of objects as well as opening it up to be composed with other functions. We also eliminate all references to the context, which that alone is enough for me! this I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter ( ). Or if you think I’m full of shit, tell me in the comments below. @joelnet Cheers! Related Articles _Function composition has got to be my favorite part of functional programming. I hope to provide you with a good real…_hackernoon.com Functional JavaScript: Function Composition For Every Day Use. _JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com Rethinking JavaScript: Death of the For Loop _Thinking functionally has opened my mind about programming. It has given me a greater depth of understanding of code…_hackernoon.com Rethinking JavaScript: The if statement