One thing I always end up doing in my project is decoupling methods from their objects. `map`, `filter` and `reduce` are not the only ones, but they are definitely among the first to be given freedom.

> 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 `map` from Array. Fortunately JavaScript’s prototypal inheritance makes this easy for us as the function we want is just sitting at `Array.prototype.map`. One cool thing about JavaScript is that we can call this method directly. We just have to use `.call` because `map` expects a `this` parameter.

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 `map` function sans-Array!

### Alternate ways to map

There are many different ways of calling `map` and due to V8 engine optimizations and there’s really no difference in performance.

![](https://hackernoon.com/images/1*i8mZiUCkRGxTFsvwyrU4hw.gif)

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.

`document.querySelectorAll` (and similar methods) do not return an Array, they return a NodeList and a NodeList does not contain a `map` method. There are some magic tricks you can do to convert a NodeList into an Array, but conversion is not necessary as our `map` can enumerate over a NodeList with as if it were an Array.

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

We can even `map` over a string without the need to first cast it to an array of characters.

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

Decoupling allows us to easily turn an object mapping into a list mapping:

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

We can even `map` over objects.

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

Decoupling allows us to compose functions:

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

Decoupling (with curry) allows us to partially apply the function arguments and create new functions.

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

Say goodbye to `this`!!!

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

In this example `cat.speak` works but `catSpeak` does not work because the `this` context changes. What a pain! Instead we can decouple the `speak` method and **never worry about** `**this**` **ever again!**

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

Then we can create new functions that use our decoupled functions.

![](https://avatars0.githubusercontent.com/u/742630?v=3&s=400)

### 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 `this` context, which that alone is enough for me!

I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter ([@joelnet](https://twitter.com/joelnet)). Or if you think I’m full of shit, tell me in the comments below.

Cheers!

### Related Articles

[**Functional JavaScript: Function Composition For Every Day Use.**  
_Function composition has got to be my favorite part of functional programming. I hope to provide you with a good real…_hackernoon.com](https://hackernoon.com/javascript-functional-composition-for-every-day-use-22421ef65a10 "https://hackernoon.com/javascript-functional-composition-for-every-day-use-22421ef65a10")[](https://hackernoon.com/javascript-functional-composition-for-every-day-use-22421ef65a10)

[**Rethinking JavaScript: Death of the For Loop**  
_JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com](https://hackernoon.com/rethinking-javascript-death-of-the-for-loop-c431564c84a8 "https://hackernoon.com/rethinking-javascript-death-of-the-for-loop-c431564c84a8")[](https://hackernoon.com/rethinking-javascript-death-of-the-for-loop-c431564c84a8)

[**Rethinking JavaScript: The if statement**  
_Thinking functionally has opened my mind about programming. It has given me a greater depth of understanding of code…_hackernoon.com](https://hackernoon.com/rethinking-javascript-the-if-statement-b158a61cd6cb "https://hackernoon.com/rethinking-javascript-the-if-statement-b158a61cd6cb")[](https://hackernoon.com/rethinking-javascript-the-if-statement-b158a61cd6cb)

Functional JavaScript: Decoupling methods from their objects

Too Long; Didn't Read

Company Mentioned

@joelthoms

RELATED STORIES