call(), apply() and bind() in Javascript

Hi there!

I'm back again with a new javascript tutorial. call(), bind() and apply() - you might have seen at least one of these three methods if you've spent quite some time in the Javascript realm. Well, maybe you're not using them that often in your day to day work but these are among most frequently asked questions in any Javascript interview.

Today is the day you learn them. 💪

In Javascript, functions are objects. Objects can have properties and methods. So, with every function, we get these three methods.

BUT... before starting let's revisit this in case of functions. Believe me, that's 80% of the game.

When executing a function, this is determined by how a function is called(runtime binding).

const person = {
  firstName: 'Sanjeev',
  lastName: 'Sharma',
  age: 22,
  getIntro: function() {
     console.log(`${this.firstName} ${this.lastName} is ${this.age} years old.`);
  }
}

person.getIntro(); // "Sanjeev Sharma is 22 years old."

function randomFunc() {
  console.log(this);
}

randomFunc(); // window object

In a method: this refers to the owner object.
In a function(sloppy mode): this refers to global object.
In a function(strict mode): this is undefined.

That's enough knowledge for this.article. 😉

call()

According to MDN:

The call() method calls a function with a given this value and arguments provided individually.

In simple terms, you decide what will be this inside a function when calling it.

Let's understand this with a very simple example.

function personIntro() {
  console.log(`${this.firstName} ${this.lastName}`);
};

const person1 = {
  firstName: 'Sanjeev',
  lastName: 'Sharma'
};

personIntro(); // Output 1: undefined undefined

personIntro.call(person1); // Output 2: Sanjeev Sharma

personIntro.call({ firstName : 'Harry', lastName : 'Potter' }); // Output 3: Harry Potter

We have a function personIntro() that will try to access this and console firstName and lastName. We have three outputs:

1. We didn't use the call() method, so this by default will refer to window object. window object doesn't have any properties like firstName or lastName. Hence, we get undefined undefined.
2. This time we use call() and pass an object that has the required properties. this will now be person. Hence, we get a favorable output Sanjeev Sharma.
3. It's same as above, just trying to prove how call() works. 😝

You can also pass additional arguments in call():

function personIntro(city, state) {
  console.log(`${this.name} is from ${city}, ${state}`);
};

const person = {
  name: 'Max',
  age: 26
}

personIntro.call(person, 'Los Angeles', 'California'); // Output: Max is from Los Angeles, California

So, call() a function with this. 👀

bind()

According to MDN:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Ugh, too much information to process at once. But since now we understand call(), let's use that knowledge to understand bind().

function getPerson(person) {
  console.log(`${ person } is from ${ this.state }.`);
}

getPerson.call({ state : 'California' }, 'Max'); // Output 1: Max is from California.

const personFromCalifornia = getPerson.bind({ state : 'California' });

personFromCalifornia('Max'); // Output 2: Max is from California.
personFromCalifornia('Ben'); // Output 3: Ben is from California.

We made a function getPerson() that is trying to access this. There are two outputs:

1. We use call() and pass { state : 'California' }(first argument) to be our this. The second argument will be person.
2. We try to get the same output as 1 using bind(). Using bind() we can bind a this value to some function and get another function in return. In our case, we bind it with { state : 'California' } and store the returned function in personFromCalifornia. Now, when we call personFromCalifornia, we just need to pass person argument. It will already have a this value.
3. Just calling the same function again with a different person.

So, what are the differences b/w call() and bind()?

1. call() gets invoked immediately whereas bind() returns a function that we can invoke later.
2. call() takes additional arguments but bind() does not.
3. call() doesn't make a copy of the function unlike bind().

Phewww! We're almost done. 😪

apply()

According to MDN:

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object).

It's exactly the same as call(), just with a subtle difference.

function sum(num1, num2) {
  console.log(this + num1 + num2);
}

sum.call(2, 3, 4); // Output: 9
sum.apply(2, [3, 4]); // Output: 9

call() takes argument individually but apply() takes them as an array. 😆 That's it.

THE END. 🙌

Connect with me on LinkedIn, GitHub or Twitter.

Thank You. 👋 I hope you learned something, today. 🙏

Comments

[Aditya Santra]

👍 Very helpful information.

[Vishwanath]

Instead of using this.firstName, why don't we use person1.firstName in the personIntro function?

function personIntro() {
  console.log(`${person1.firstName} ${person1.lastName}`);
};

const person1 = {
  firstName: 'Sanjeev',
  lastName: 'Sharma'
};

[Sanjeev Sharma]

Yes, you can. It will work.

But in my example I was trying to explain this in call function.

[Vishwanath]

Understood. I was thinking from a POV of an interviewer, who'd ask me this same question if I explained call with this particular example. :)

[Siddhant Kumar]

That was a lot of information. Thank for this amazing post. Also, add this in your title as well :)

[Miro von Busing]

🙏 Today, I learned to better understand this.
The last part about apply() was slightly dry: any example about when it makes more sense to use rather than call()?

[Sanjeev Sharma]

That's the only difference: How you pass arguments. Either individually or as an array. I've not used apply() until now so can't give you the right example.

[saikrishnabanda5]

function sum(num1, num2) {
console.log( num1 + num2);
}

sum.apply([4,7],[8,9]);
sum.apply(76,[8.8,8]);
sum.apply([8.8,8],2);

can you just tell me the answer with explanation

[Sanjeev Sharma]

Yeah, so first of all you didn't use this inside your function. So, all the first arguments to apply won't have any effect on the result.

Results:

1. 8 + 9 will return 17
2. 8.8 + 8 will return 16.5
3. will throw an error as the second argument should be an array but you passed a value 2. If it had been an array sum.apply([8.8,8],[2]); then the result would have been NaN because it will evaluate 2 + undefined.

I hope this answers your question.