External Binding in Javascript using Call(), Apply() and Bind()

Binding in JavaScript

Binding in JavaScript means recording that identifier in specific environment record. Each environment is related to a specific execution context and that binds the identifier(variable or function name) to the this keyword for that execution context More on Binding.

JavaScript has built in internal binding method in which this keyword will refer to the environment in which it is defined. If it is in global environment it refers to window object or if it is in an object it refers to that object. Below example explains the internal binding in JS.

const person = {
  firstName: "Abdul",
  lastName: "Kalam",
  printFullName: function(){
    console.log(this.firstName + this.lastName)
  }
}
person.printFullName()

In the above code this refers to the object that it is defined in. So this is a default behaviour in JavaScript.

Now the question is what if we want to use printFullName function with a different object? To use the same function with different objects JavaScript has external binding methods.

const personTwo = {
  firstName: "Sachin",
  lastName: "Tendulkar"
}
person.printFullName.call(personTwo)

In the above code we have used the printFullName() with a different object than it is defined in. For this we have used Call() method.Here Call() method simply binds the object passed to it with the function it is called with. Now the this keyword in printFullName() function refers to personTwo object instead of person and prints personTwo details. Using Call() method we can even pass the arguments to the function.

const printFullName = function(home){
    console.log(this.firstName + this.lastName + "lives in " + home)//"Sachin Tendulkarlives in Mumbai"
  }
printFullName.call(personTwo, "Mumbai")

Now we can extract the printFullName function and apply the call() method, this time we are passing an argument to the function. We can pass more than one parameters to printFullName function with call () however the first argument passed to call will be considered as this. If you have more than one arguments to pass to a function then you can simply use apply() method which works very similar to call() except the arguments are passed as an array.

const printFullName = function(home, state){
    console.log(this.firstName + " " + this.lastName + " lives in " + home +" "+ state)
  }
const personTwo = {
  firstName: "Sachin",
  lastName: "Tendulkar"  
}
printFullName.apply(personTwo, ["Mumbai", "Maharastra"])

The call() and apply() invokes the function upon binding. But What if we want to just bind the object with function and call it later. We can do this by using bind() method. It works very similar to call except it won't invoke the function instead it creates a copy and returns it.

const printFullName = function(home){
    console.log(this.firstName + " " + this.lastName + " lives in " + home)
  }
const personTwo = {
  firstName: "Sachin",
  lastName: "Tendulkar"  
}
const printPersonDetails = printFullName.bind(personTwo, "Mumbai")
printPersonDetails()

Conclusion

1. Call() method allows to bind a function with different objects.
2. Apply() works similar to Call() except it takes the arguments as an array.
3. Bind() method returns a function after binding, which can be called later.