Let's talk about Hard Binding in JavaScript
Tags: javascript, programming
Published: 2017-11-06 06:09:01

---
title: Let's talk about Hard Binding in JavaScript
published: true
description: How we can do an explicit and strong binding
tags: javascript,programming
cover_image: https://thepracticaldev.s3.amazonaws.com/i/gqm3t4tdzx444mqmqlo8.png
---

After a busy week, I'm here and I want to talk with you (_the reader_) some confusing (_at less for me_) and interesting concept in JavaScript.
Currently, I'm involved in different groups on facebook where we have as a principal topic talk about programming. Advice, trending, news and much more about that; obviously, all in Spanish (_I'm from Mexico if you don't know_).

One of these groups is exclusively about Node.js and JavaScript (_if you're Spanish-speaking, I invite you to join. Here's the [link] [1]_). After reading posts for a while, I found this code:


```javascript
function foo() {
console.log(this.bar);
}
var obj = { bar: "bar" };
var obj2 = { bar: "bar2" };
var orig = foo;
foo = function(){ orig.call(obj); };
foo();
foo.call(obj2);
```

Take your time to think about what this piece of code is going to print and then continue with the article. I wait for you, do not worry.

![Thinking about it](https://media.giphy.com/media/xf20D8HzvTQzu/giphy.gif)

Whether you get it or not, this code snippet prints `bar` twice in a row.

Here the [link][2] to see it and yeah, is his code.

Well, we get this result because of one thing: **Hard Binding**

![Ok?](https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.gif)

## And what is Hard Binding?

To have a good understanding of Hard Binding is important to reach some confusing things before getting a hard binding. One of these is __this__.

### This
Is a mechanism that is most commonly used in the OOP programming paradigm. In that cases, we talk about the context of the object what are creating. For example, the uses of his functions and global variables. In JS, the history is some confusing but nothing of the other world.

In JS, `this` is a contextually based mechanism which, in turn, is based on the function invocation and not in the where the function was declared. When a function is invoked a __call-stack__ is created and with this call-stack, a kind of record too. In this record is saved the information of the function with data of how and where has invoked, what parameters are passed and more. With all of that information, `this` comes as one of those properties. At the end, the record is alive as the duration of the function execution.

### Binding
In JS, **the context in where we invoke** a function has a lot of importance.

Think about this function:

```javascript
function something(){
  var a = 2;
  console.log(this.a);
}

var a = 5;

something();
```

What is going to print?

I let you try that code and explain what exactly happens.

When we call `this`, we are invoking the context of the global object. In other words, we are taking properties (_in this case, the variable_ `a`) declared as global outside of the function. Doesn't matter if I create a variable called as the same of the outside variable, I taking properties from the global object, not from the function context.


#### Implicit Binding

Now, what about this code. What is going to print?

```javascript
function something(){
  console.log(this.a);
}

var a = 5;

var obj = {
  a: 10,
  something: something
}

obj.something()
```

When we have this, we are applying something called **Implicit Binding** . . . _and with what I can eat that?_

Well, as you see in this case, we are assigning the context as an object to the function. In a more simple way, we are creating the context of the function as an object. So, instead of taking the global context, take the context of the object we made.

With this comes a problem, what if we do this?

```javascript
function something(){
  console.log(this.a);
}

var obj = {
  a: 10,
  something: something
}

var cake = obj.something

var a = 5;

cake();

```

Well, we lost the object context and we had the global context again, but why?
Remember when I told you that **the invocation matters**? Well, this is the reason why.

We lost the context of the object because we assign the function to a variable,  obtaining a reference to that function, changing the context. When we do that, a **implicit lost** occurs and we obtain the global context (_for this case_).

The same happens if we do this:

```javascript
function something(){
  console.log(this.a);
}

function anotherFunction(fn){
  fn();
}

var obj = {
  a: 10,
  something: something
}

var a = 'Five';

anotherFunction(obj.something);
```

Remember, **invocation matters**


#### Explicit Binding

As everything, every problem has a solution (_or we can make one, but in this case has one as default_).

If we want to force a function to get a particular context of an object without an implicit reference, we can use functions like `call(...)` (_[more info][3]_) or `apply(...)` (_[more info][4]_).


Calling `call()` and passing the object that you want to apply as an argument, forces the function to use the context of the object. For example, like this:


```javascript
function something(){
  console.log(this.a);
}

var obj = {
  a: 10,
}

var a = 'Five';

something.call(obj);
```

As above, we can use `apply(this, [])` instead. Passing an object and an array as arguments.


## Hard Binding


At this point, I hope everything is fine. You understood everything I wrote, I suppose. Now with this, maybe you want to know: __and a hard binding, what about that?__

Well, let me tell you something. With this solution we do not solve all the binding problems, you know?

We back to the first code that I found:

```javascript
function foo() {
console.log(this.bar);
}
var obj = { 
  bar: "bar" 
}
var obj2 = { 
  bar: "bar2" 
}
var orig = foo;
foo = function(){ 
  orig.call(obj);
}
foo();
foo.call(obj2);
```

Why do that?

Put attention just in this line: `foo = function() { orig.call(obj) }`
Ok, you see it? That's is **hard binding**.

That function makes that `foo` always do the same action every time that is called, no matter what is the invocation context. **Make a function that calls internally and manually an explicit binding and force to do the same instruction** no matter where and how you invoke that function

As we talk above, __Every problem has a solution__ (_or we can make one_):

```javascript
function foo(something) {
  console.log(this.bar + something);
  return this.bar + something
}

var obj = { 
  bar: 2
}

var obj2 = {
  bar: 4
}

function bind(fn, obj){
  return function(){
    return fn.apply(obj, arguments)
  }
}

var result = bind(foo, obj);

var result_2 = bind(foo, obj2);

result(2);

result_2(2);
```

Or, we can use the one that **ES5** gives us

```javascript
function foo(something) {
  console.log(this.bar + something);
  return this.bar + something
}

var obj = { 
  bar: 2
}

var result = foo.bind(obj);

result(2);
```

This utility was introduced by **ES5** in `Function.prototype.bind` (_[more info][5]_), it gave us the **hard binding** in an easier way.

# One more thing

Feel free to make comments and corrections to this article. I do this article just for explain and understand more clearly how Binding works and what is Hard Binding. If you want to know more about Binding or JavaScript in general, you can read [You-Dont-Know-JS][6] and understand more clearly this and more things about JS.

See ya.



[1]: https://www.facebook.com/groups/node.es
[2]: https://jsfiddle.net/greenpioneer/x16gxwk7/
[3]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call
[4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[5]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
[6]: https://github.com/getify/You-Dont-Know-JS