Understand Call, Bind and Apply in JavaScript

Understanding Call, Bind and Apply while dealing with JavaScript Arrow functions is very important. As you might face some issues while working with Arrow functions. I have written a post earlier covering the things you should know while implementing functionalities with JavaScript Arrow function and this. I highly recommend you to go through those first, as this sets the context of this post.

Quick Reference of Arrow Function in JavaScript“.

How ‘this’ works with JavaScript Arrow Functions

With that let’s get started.

Bind()

Bind() method is used to create a new function and sets the this keyword to the specified object.

Syntax:

function.bind(thisArg, optionalArguments)

Let’s say I have two students and a method which is supposed to print the student details

const james = {
  name: "James Bond",
  studentNum: 100,
  department: "Computer Science",
};

const shane = {
  name: "Shane Warne",
  studentNum: 200,
  department: "Physics",
};

function printStudentDetails() {
  console.log(
    "Student Name: " +
      this.name +
      " Student Number: " +
      this.studentNum +
      " Student Department: " +
      this.department
  );
}

Now here I can use the bind method with the printStudentDetails function to bind the this keyword to shane and james. So the code will become –

const printJames = printStudentDetails.bind(james);
printJames();

const printShane = printStudentDetails.bind(shane);
printShane();

And the output will be –

Student Name: James Bond Student Number: 100 Student Department: Computer Science
Student Name: Shane Warne Student Number: 200 Student Department: Physics

So what is happening here is that printStudentDetails.bind(james) or printStudentDetails.bind(shane) create a new function with this set to james and shane respectively. Finally the same function is assigned to printJames and printShane constant variable.

Accepting arguments

I can pass additional arguments to Bind() method as well. For example, if I update the above code to pass some welcomeMessage, then my code will look like –

const james = {
  name: "James Bond",
  studentNum: 100,
  department: "Computer Science",
};

const shane = {
  name: "Shane Warne",
  studentNum: 200,
  department: "Physics",
};

function printStudentDetails(welcomeMessage) {
  console.log(
    welcomeMessage +
      " " +
      this.name +
      ", your student number: " +
      this.studentNum +
      " and department: " +
      this.department
  );
}

const printJames = printStudentDetails.bind(james, "Hello");
printJames();

const printShane = printStudentDetails.bind(shane, "Hi");
printShane();

And the output will be –

Hello James Bond, your student number: 100 and department: Computer Science
Hi Shane Warne, your student number: 200 and department: Physics
Call()

Call() method will set the this inside the function and immediately execute the function. The difference between call() and bind() is that call() sets the this and executes the function immediately without creating a new copy of the function, whereas bind() creates a copy of the function and sets the this keyword.

Syntax:

function.call(thisArg, arg1, agr2, arg3, ...)

I will be writing the same function and use call() to execute the function.

const james = {
  name: "James Bond",
  studentNum: 100,
  department: "Computer Science",
};

const shane = {
  name: "Shane Warne",
  studentNum: 200,
  department: "Physics",
};

function printStudentDetails() {
  console.log(
    " Hello " +
      this.name +
      ", your student number: " +
      this.studentNum +
      " and department: " +
      this.department
  );
}

printStudentDetails.call(james);
printStudentDetails.call(shane);

Output:

 Hello James Bond, your student number: 100 and department: Computer Science
 Hello Shane Warne, your student number: 200 and department: Physics

If you can see above, this time I am not storing the function in any variable before calling the function. By using call() I can directly execute the function. This is the biggest difference between call() and bind().

Accepting arguments

Like bind(), I can pass arguments to call() as well. With arguments, the above code will be –

const james = {
  name: "James Bond",
  studentNum: 100,
  department: "Computer Science",
};

const shane = {
  name: "Shane Warne",
  studentNum: 200,
  department: "Physics",
};

function printStudentDetails(welcomeMessage) {
  console.log(
    welcomeMessage +
      ", " +
      this.name +
      ", your student number: " +
      this.studentNum +
      " and department: " +
      this.department
  );
}

printStudentDetails.call(james, "Hello");
printStudentDetails.call(shane, "Hi");

Output:

Hello, James Bond, your student number: 100 and department: Computer Science
Hi, Shane Warne, your student number: 200 and department: Physics
Apply()

Apply() method is almost similar like call(). The biggest difference is that apply() method accepts an array of arguments instead of comma separated values like call().

Syntax:

function.apply(thisArg, [argumentsArr])

Below I am writing the same function with apply() and passing an array of arguments.

const james = {
  name: "James Bond",
  studentNum: 100,
  department: "Computer Science",
};

const shane = {
  name: "Shane Warne",
  studentNum: 200,
  department: "Physics",
};

function printStudentDetails(message1, message2) {
  console.log(
    message1 +
      " " +
      message2 +
      ", " +
      this.name +
      ", your student number: " +
      this.studentNum +
      " and department: " +
      this.department
  );
}

printStudentDetails.apply(james, ["Good", "Morning"]);
printStudentDetails.apply(shane, ["Good", "Afternoon"]);

Output:

Good Morning, James Bond, your student number: 100 and department: Computer Science
Good Afternoon, Shane Warne, your student number: 200 and department: Physics

Summary

I hope you now have a better understanding of how bind(), call(), and apply() can be used to make the behavior of this independent of how a function is called. Also understanding the differences between bind(), call(), and apply() is very important. Please provide your feedback in the comment below.

3 thoughts on “Understand Call, Bind, and Apply in JavaScript”

  1. This was really helpful to me . I saw many videos many pages but never understood the real use of this or bind or call but your page really helped me . I wanna learn more about javascript but right now your website has only content.I hope you bring in more content like this. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *