Tips & tricks

Have you ever look at the code of other developers and you see that sometimes they used functionName.bind(this), especially in React. But you wondered what does it mean, why we need to use the method directly by functionName() instead of functionName.bind(this) In this post, I gonna show you what is different between these approaches.

What is bind(something)

Lets take a normal case:

var object = {
  getValue() {
    return 123;
  },
  printValue() {
    console.log(this,this.getValue());
    console.log(this.getValue());
  }
}
object.printValue();

Result:

As you can see that, in the method printValue, the value for this is the it’s own object. It’s mean that when printValue need to access getValue method, it just call this.getValue(). But why the value is its own object? Since the method printValue()in invoked by object.printValue(). By other words printValue()is invoked in the context of the object. So printValue can easily access other properties, methods in the object

Now, what happen if we assign the method printValue to a button

var object = {
  getValue() {
    return 123;
  },
  printValue() {
    console.log(this);
    console.log(this.getValue());
  }
}
$("button").on("click",object.printValue);

When the button is clicked, this is the result:

Can you guess what is the problem? The value of this is not object anymore, it’s changed to the button who invoked that method. In consequence, we can’t access the method getValue() anymore. How can we solve this problem?

//Incorrect way
$("button").on("click",object.printValue); 
//Correct way
$("button").on("click",object.printValue.bind(object));

The difference is we call bind(object) before passing it to button event. bind(object)will tell to the browser that “Hey browser, I’m printValue function and I need to access object’s properties, method. So whenever I access this, could you please pass object as a value instead of the context I’m invoked (that is the button in this case)”.

Now you understand the responsibility of bind(something). But this is not the only use case we need to use bind(something). Let’s figure out

Use cases

setTimeout()

Let see what happen if we access thisin setTimeout method

var object = {
  getValue() {
    return 123;
  },
  printValue() {
    setTimeout(function() {
      console.log(this);
      console.log(this.getValue());
    });
  }
};

$("button").on("click", object.printValue.bind(object));

The result we have is:

In this case the value for this inside setTimeout method is changed to window. It makes sense because the function inside setTimeout will be invoked under window context. So how can we resolve this problem by bind()

Solution with .bind()

var object = {
   getValue() {
     return 123;
   },
   printValue() {
     var fn = function() {
       console.log(this);
       console.log(this.getValue());
     };
     setTimeout(fn.bind(this));
   }
 };

var object = {
getValue() {
return 123;
},
printValue() {
var fn = function() {
console.log(this);
console.log(this.getValue());
};
setTimeout(fn.bind(this));
}
};

Method preference

we also have a trouble with thisin method preference

var object = {
  getValue() {
    return 123;
  },
  printValue() {
      console.log(this);
      console.log(this.getValue());
  }
};

var fn = object.printValue;
fn();

Solution:

var object = {
  getValue() {
    return 123;
  },
  printValue() {
      console.log(this);
      console.log(this.getValue());
  }
};

var fn = object.printValue.bind(object);
fn();

Conclusion

I hope that via this post, you have learn what is the responsibility of bind(something)as well as learn one more way to deal with access thisproblem. From understanding it, you’re not confused when you see someone use bind(something) anymore. See you in the next post!