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:
- We didn't use the
call()
method, sothis
by default will refer towindow
object.window
object doesn't have any properties likefirstName
orlastName
. Hence, we getundefined undefined
. - This time we use
call()
and pass an object that has the required properties.this
will now beperson
. Hence, we get a favorable outputSanjeev Sharma
. - 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:
- We use
call()
and pass{ state : 'California' }
(first argument) to be ourthis
. The second argument will beperson
. - We try to get the same output as 1 using
bind()
. Usingbind()
we can bind athis
value to some function and get another function in return. In our case, we bind it with{ state : 'California' }
and store the returned function inpersonFromCalifornia
. Now, when we callpersonFromCalifornia
, we just need to passperson
argument. It will already have athis
value. - Just calling the same function again with a different
person
.
So, what are the differences b/w call()
and bind()
?
-
call()
gets invoked immediately whereasbind()
returns a function that we can invoke later. -
call()
takes additional arguments butbind()
does not. -
call()
doesn't make a copy of the function unlikebind()
.
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. 🙏
Top comments (9)
👍 Very helpful information.
Instead of using
this.firstName
, why don't we useperson1.firstName
in thepersonIntro
function?Yes, you can. It will work.
But in my example I was trying to explain
this
incall
function.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. :)That was a lot of information. Thank for this amazing post. Also, add
this
in your title as well :)🙏 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 thancall()
?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.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
Yeah, so first of all you didn't use
this
inside your function. So, all the first arguments toapply
won't have any effect on the result.Results:
8 + 9
will return17
8.8 + 8
will return16.5
2
. If it had been an arraysum.apply([8.8,8],[2]);
then the result would have beenNaN
because it will evaluate2 + undefined
.I hope this answers your question.