Bind(), Call() and Apply() in Javascript


Introduction

In Javascript as we have learned that everything is an object including function as well. Function in Javascript is defined as lines of statements or code for a dedicated task. To define the scope inside the function, we have "this" keyword. Every function in Javascript has its own scope called "this". 
Functions in Javascript can be associated with any of the below:
  • Bind()
  • Call()
  • Apply()
  • Anonymous function or Name function
  • Bunch of statements defined as code
Bind(), Call() and Apply() are different methods in Javascript which is automatically attached with every function. All three methods Bind(), Call() and Apply() control calling(termed as invocation) of other functions.We will discuss each method with a complete understanding of their usage with examples. Difference between the three methods is another point of consideration.

Bind()

The bind() method creates a copy of the function when it is called and binds the value or argument of the bind() method with the "this" of the function. Bind() function will create a new instance of the function being called upon. 
Let us discuss the same with an example:

var employeeObj = {
    id: 'EMP011',
    name: 'Aanchal Garg',
    getDetails: function() {
        var employee = this.id + ' ' + this.name;
        return employee;
    }
};

var employeeBound = function() {
    console.log("Hello" + ' ' +this.getDetails());
};

var bindExample = employeeBound.bind(employeeObj);
// creates new instance of the employeeBound() function.
// Binds 'this' of employeeBound === employeeObj now

bindExample(); 
// Hello EMP001 Aanchal Garg

Understanding the above example

  • Whenever the bind() method is called, the javascript automatically creates a new instance of the function "objBound" in our example. Afterward, it sets the "this" of this function to the value passed. The objBound function is copied in this scenario.
     Binds 'this' of objBound === employeeObj now.
  • After calling bind on the employeeBound() function and creating a copy of this function, we can call bindExample() function. 
  • Now we will see that the properties and methods of the employeeObj are available to this function as well.

Passing arguments to the function

After binding the value using bind() function we call pass arguments to the function as a normal function. This is an amazing thing to consider.
In our example we can pass parameters to the bindExample() as follows:

var employeeObj = {
    id: 'EMP011',
    name: 'Aanchal Garg',
    getDetails: function() {
        var employee = this.id + ' ' + this.name;
        return employee;
    }
};

var employeeBound = function(a,b) {
    console.log("Hello" + ' ' +this.getDetails()+ 'from' + a +',' + b);
};

var bindExample = employeeBound.bind(employeeObj);
// creates new instance of the employeeBound() function.
// Binds 'this' of employeeBound === employeeObj now

bindExample('Rajasthan','India'); 
// Hello EMP001 Aanchal Garg from Rajasthan, India.

Call() 

The Call() method invokes a function right away and it sets the value of the called function to the value passed as an argument to the Call() method. The arguments are passed individually to the Call() method. 
Let us discuss the same with an example:

var employeeObj = {
    id: 'EMP011',
    name: 'Aanchal Garg',
    getDetails: function() {
        var employee = this.id + ' ' + this.name;
        return employee;
    }
};

var employeeBound = function(a,b) {
    console.log("Hello" + ' ' +this.getDetails()+ 'from' + a +',' + b);
};

 employeeBound.call(employeeObj,'Rajasthan','India');
// Binds 'this' of employeeBound === employeeObj now.
//Calls the employeeBound() function right away and arguments are passed one by one.


Understanding the above example
  • Whenever the call() method is called, the javascript automatically calls the invoked function right away and it sets the "this" of this function to the value passed.
     Binds 'this' of objBound === employeeObj now.
  • The first argument is the object which is set to "this" of the invoked function.
  • The other parameters passed to the Call() method is served as the arguments for the invoked function.
  • In the Call() method, the instance of the function is not created as Bind() function.
  • It accepts the additional parameters in the same call.
  • The function is called right away without any delay.

Apply()

The Apply() method invokes a function right away and it sets the value of the called function to the value passed as an argument to the Apply() method. The arguments to the actual function are passed as an array in Apply() method.
Let us discuss the same with an example:

var employeeObj = {
    id: 'EMP011',
    name: 'Aanchal Garg',
    getDetails: function() {
        var employee = this.id + ' ' + this.name;
        return employee;
    }
};

var employeeBound = function(a,b) {
    console.log("Hello" + ' ' +this.getDetails()+ 'from' + a +',' + b);
};

 employeeBound.apply(employeeObj,['Rajasthan','India']);
// Binds 'this' of employeeBound === employeeObj now.
//Calls the employeeBound() function right away and arguments are passed as an array.

Understanding the above example
  • Whenever the Apply() method is called, the javascript automatically calls the invoked function right away and it sets the "this" of this function to the value passed.
     Binds 'this' of objBound === employeeObj now.
  • The first argument is the object which is set to "this" of the invoked function.
  • The other parameters to the original function are passed as an array.
  • In the Apply() method, the instance of the function is not created as Bind() function.
  • It also accepts the parameters as an array in the same call. The function is called right away without any delay.

Comments