Javascript call(), apply(), bind()

If you’ve ever Googled Javascript interview questions, you’ve probably come across questions asking the interviewee to discuss the differences between Javascript’s call, apply, and bind functions.

At a first glance, these seem to be very confusing, but if you take the time to really study them, they’re pretty easy to understand.

Before we get started discussing the differences between call, apply, and bind, I’d like to give a shoutout to a course called JavaScript: The Advanced Concepts (2021). The lessons here really helped me increase my Javascript knowledge.

Call, apply, and bind are all centered around the ‘this’ keyword. I’ll write a more in-depth article covering the ‘this’ keyword in Javascript at later date, but you can just remember that ‘this’ refers to the object that calls the function with the ‘this’ keyword.

You might have code that looks like the following.

let person = {
  age: 30,
  name: "Josh"
}

person.greet = function() {
  console.log(`My name is ${this.name}.`)

}


person.greet();

This would output: “My name is Josh.”

But what if you wanted to call that function, but use something else for ‘this’?

That’s where call and apply come in.

Let’s change our code a bit and add another person so our code looks like the following.

let josh = {
  age: 30,
  name: "Josh"
}

josh.greet = function() {
  console.log(`My name is ${this.name}.`)
}

let frank = {
  age: 25,
  name: "Frank"
}

We can “hijack” the greet function from josh and let frank use it by using call or apply.

josh.greet.call(frank);

josh.greet.apply(frank);

Both of these log “My name is Frank.”

Bind is very similar, but it’s used to store a function and then call at a later time.

let frankGreeting = josh.greet.bind(frank);

frankGreeting();

We can pass arguments to these if we want. Let’s revise the main function we’re working with to the following.

josh.greet = function(lastName) {
   console.log(`My name is ${this.name} ${lastName}.`);
}

We can use the call function like this.

josh.greet.call(frank, "smith");

Or, if we want to use apply, we use an array for the arguments:

josh.greet.apply(frank, ["smith"]);

And bind works similarly.

let frankGreeting = josh.greet.bind(frank);

frankGreeting("Smith");

And that’s how call, apply, and bind work in Javascript! I think it’s pretty easy to wrap your head around when you break it down like this.

If you want to learn more about web development, make sure to follow me on Twitter.