Understanding – Call, Apply, Bind

In JavaScript call, apply and bind functions are used to manipulate how this keyword is going to behave within a function.

So, in this article, we are going to explain how to use call, apply, and bind in JavaScript with simple examples.

Without further ado, let’s get started.

Here are some of the things you should understand to get the most out of this article:

• JavaScript Functions
• JavaScript Prototypes
• JavaScript this keyword

JavaScript Implicit & Explicit Binding

JavaScript this keyword refers to the object it belongs to. It has different values depending on where it is used.

For example: In a method, this refers to its parent object.

const student = {
      name: "Sunil",
      learning: true,
      status: "Learning",
      work: function () {
             console.log(`${this.name} is ${this.status} Software Engineering`);
      }
}

student.work() //Sunil is Learning Software Engineering

In the example above, we can see that the work() method is being invoked using student object.

This way of invoking a method using dot operator is known as Implicit binding where this refers to the object using which the method is invoked.

There are other ways as well to reuse the same method or, to invoke a method using other objects by the help of call, apply and bind methods in JavaScript where this keyword will point to the object that will be passed as an argument to the call, apply and bind methods.

This kind of invoking a method is known as Explicit binding.

How to Use the Call Function in JavaScript

Definitions: Call is a function that helps you change the context of the invoking function. In layperson’s terms, we can tie a function into an object as if it belonged to the object.

Let’s say, we have an object with some properties and functions.

let learning = {
    technology: "JavaScript",
    printActivity: function(){
        console.log("Learning ", this.technology);
    }
}
learning.printActivity(); //Learning  JavaScript

this keyword in the object points to the learning object itself in the example. And if we just try to invoke the printActivity() function, it would print Learning JavaScript. Simple! right?

Now, what if we want to print the same for other learning activities? One solution that comes to our mind easily, is to create a new object for that and call the method just like we did in the previous example.

let learningSomethingNew = {
    technology: "React",
    printActivity: function(){
        console.log("Learning ", this.technology);
    }
}

learningSomethingNew.printActivity(); //Learning  React

The other and best solution for this scenario is to use the call() method.

let learning = {
    technology: "JavaScript",
    printActivity: function(){
        console.log("Learning ", this.technology);
    }
}
learning.printActivity(); //Learning  JavaScript

let learningSomethingNew = {
    technology: "React"
}
learning.printActivity.call(learningSomethingNew); 
//Learning React

In this way, we could reuse the printActivity function for different objects. That’s why it’s recommended to write a function separately without making it a part of an object if it could be used in multiple scenarios.

let learning = {
    technology: "JavaScript",
}

let learningSomethingNew = {
    technology: "React"
}

function printActivity(){
     console.log("Learning ", this.technology);
}

printActivity.call(learning); //Learning JavaScript
printActivity.call(learningSomethingNew); //Learning React

We might need to pass some extra argument to the function as well. We can do that too.

let learning = {
    technology: "JavaScript",
}

let learningSomethingNew = {
    technology: "React"
}


function printActivity(months, days){
     console.log("Learning "+ this.technology + " since " + months + " months"  + " and " + days + " days");
}

printActivity.call(learning, 3, 15); 
//Learning JavaScript since 3 months and 15 days

printActivity.call(learningSomethingNew, 2, 15); 
//Learning React since 2 months and 15 day

How to Use the Apply Function in JavaScript

The apply() method is similar to the call() method. The only difference is that apply method takes arguments as an array whereas the call method takes arguments separately.

For example:

let learning = {
    technology: "JavaScript",
}

let learningSomethingNew = {
    technology: "React"
}


function printActivity(months, days){
     console.log("Learning "+ this.technology + " since " + months + " months"  + " and " + days + " days");
}

printActivity.apply(learning, [3, 15]); 
//Learning JavaScript since 3 months and 15 days

printActivity.apply(learningSomethingNew, [2, 15]); 
//Learning React since 2 months and 15 day

How to Use the Bind Function in JavaScript

So basically, call() and apply() methods execute the function immediately when called (and returned a value). Hence, bind() method is similar to call() and apply().

But instead of executing a function immediately, bind() returns a function that can be executed later on.

What does it mean?

The bind() method doesn’t invoke the function like call() and apply(), instead it returns a copy of the function where this keyword will point to the object that is passed as an argument.

For Example:

let learning = {
    technology: "JavaScript",   
}

function printActivity(){
     console.log("Learning ", this.technology);
}

let copyOfTheFunction = printActivity.bind(learning); 
copyOfTheFunction(); //Learning JavaScript

Conclusion

• In JavaScript this does not work the same as Java or C++. So with the help of these three methods, we can explicitly provide this to the function to prevent unexpected behavior.
• We can also use call, apply and bind to write a common function to the objects.

Thanks for reading till now🙏

Share this blog with your network if you found it useful and feel free to comment if you have any doubts about the topic.

Resource

• call MDN
• apply MDN
• bind MDN

Similar articles you may like

• JavaScript Slice Method – Practical Examples
• Text Reveal Animations On Scroll – Textify.js
• AddEventListener JavaScript: What It Is and How To Use It
• Create Animated Typing Effect (JavaScript)