Blog

Understanding Call, Apply and Bind functions in Javascript.

If you are trying to understand javascript’s call apply bind function then the first step to understanding these call, apply, and bind methods are to understand ‘this‘ keyword in javascript. Which we have covered earlier here: What is ‘This’ keyword in Javascript? Be sure to read out this article if you have any sort of confusion regarding this keyword.

Simply put ‘this’ keyword refers to an object which is currently in execution. This as of now might be enough knowledge to get us through these articles

These functions allow us to set the value for ‘this‘ keyword int the function. The major difference in these functions is how the function is executed. The call and apply methods invoke the function immediately while the bind function returns a new function object which could be executed at a later time.

call():

Using the call() method in javascript. We can make use of any function and specify what this value refers to within the function. let’s take an example

var obj = {
    firstName : 'Nitin',
    lastName: 'Khare'
}

var fullName = function(arg1, arg2){
    console.log(this.firstName +" "+ this.lastName +arg1 + arg2)
}

fullName.call(obj,"1","2")

Output: Nitin Khare12

Not the most creative example in the world but gets our work done. As we saw the call function immediately executed the function when it was called. We set the value of this keyword to refer to the object obj defined above. So, the value of this.firstName and this.lastName now referred to that present in the obj Object. The whole purpose of passing those arguments was to make an understanding that we can pass any number of arguments to the calling function.

apply():

The apply function in javascript works similar to the call function but the only difference is that it accepts an array of arguments

var obj = {
    firstName : 'Nitin',
    lastName: 'Khare'
}

var fullName = function(arg1, arg2){
    console.log(this.firstName +" "+ this.lastName +arg1 + arg2)
}

fullName.apply(obj,["1","2"])

Output: Nitin Khare12

The result is similar to that of the call function. As you can see both the call method and the apply method executes the function immediately which is not the case with the bind method. The call method also doesn’t make a copy of the method it is called upon which the bind method does.

bind():

The bind method unlike the call and apply the method in javascript doesn’t invoke the function execution immediately but rather returns a new function that has this value set to the provided value.

var obj = {
    firstName : 'Nitin',
    lastName: 'Khare'
}

var fullName = function(arg1, arg2){
    console.log(this.firstName +" "+ this.lastName +arg1 + arg2)
}

let newFunction = fullName.bind(obj,"1","2")

newFunction()

Output: Nitin Khare12

Now the function returned by the bind method can be executer later. So, When you want to invoke the function immediately you would use the call or apply method but if you want that function to later be called with a certain context you would rather be using the bind method.

So, We see that all call, apply and bind functions attach value for this into a function but the difference is either in the way these function execute(call, apply vs bind method) or the way parameter are accepted(call vs apply method).

Leave a Reply