Call, Apply & Bind Methods In Javascript

In Javascript working with "this" is very tricky if you don't understand the concept in-depth. It’s good to know the theory before putting things into practice.

Call(), Apply(), and Bind() methods can come in handy when setting the “this” value.

Before we dive deep into these methods, let's first understand the this keyword.

this in Javascript

Points To Remember !!

• this always refers to an object.
• this refers to an object which calls the function it contains.
• Each & every function in javascript has access to the this keyword.
• In the global context this refers to either window object or is undefined if the strict mode is used.

this inside a method

When this is used inside a method, it refers to the owner object.

Functions defined inside an object are called methods.

Now look at the following example:

let language = {
    name: 'JS',
    desc: 'language of web',
    displayDetails: function (){
        console.log(this.name + ' ' + this.desc);
    }
}

language.displayDetails();

In the above code snippet, this refers to the language object.

this inside a function

this inside a function is a bit complicated. The first thing to understand is that, like all objects have properties, likewise functions have properties too. Whenever that function is executed, it gets this property, which is a variable with the value of the object that invokes it.

If the function is not invoked by an object then this inside the function belongs to the global object, which is called window. In this case, this will refer to the values defined in the global scope.

Let’s see an example for better understanding:

var name = 'C++'
var desc = 'Programming language'

function displayDetails(){
    console.log(this.name + ' ' + this.desc); //Output: C++ Programming language
}

displayDetails();

this used Alone

When used alone not inside any function or object, this refers to the global object.

The this here refers to the global name property.

var name = 'Javascript'
var desc = 'language of web'

console.log(this.name); //Output: Javascript

Now, enough of this. Let's move to the call(), apply(), & bind().

Call() Method

It allows us to borrow functions and set the this value on function invocation.

Function Borrowing: We can borrow function from other objects and use it with data of some other objects.

var language = {
    name: 'JS',
    desc: 'Language of web',
    displayDetails: function (){
        console.log(this.name + ' ' + this.desc);
    }
}

var language2 = {
    name: 'C++',
    desc: 'Programming language'
}

language.displayDetails.call(language2);

Each & every method in Javascript has access to this special function which is call(). In this call() the first argument will be the reference of this (what we want this to be pointing to).

In the general case, we define our functions which are more reusable.

Look at the other example:

function displayDetails(){
    console.log(this.name + ' ' + this.desc);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.call(language);

What if we want to add more parameters to the function???

The first argument inside call() always points to the reference of this and the later arguments can be the arguments to the function.

function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.call(language, "5", "10");

Apply() Method

This method is similar to the call() method above. The only difference between call() & apply() methods is how we pass arguments to the function.

In the call() method we pass arguments using comma-separated.

In the apply() method we pass an array of arguments.

Let's look at the example for a better understanding.

function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

displayDetails.apply(language, ["5", "10"]);

Bind() Method

It creates a copy of the function and it will bind it to the object and then return a function.

It doesn't directly call the function rather it will return us a method that can be called later.

Confuse??? Let's understand using the next example.

function displayDetails(stars, points){
    console.log(this.name + ' ' + this.desc + ' ' + stars + ' ' + points);
}

var language = {
    name: 'JS',
    desc: 'Language of web'
}

let anotherDisplay = displayDetails.bind(language, "5", "10");
console.log(anotherDisplay);
anotherDisplay();

Only difference between call() & bind() is:

bind() method gives you the copy of function which can be invoked later rather than directly invoking it just like in the call() method.

Wrap Up!!

Thanks for reading!! I hope now you have a clear idea about these methods. Please share it with your network if you find it useful. Don’t forget to leave your comments below.