DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

RAJAT MEHRA
RAJAT MEHRA

Posted on • Updated on

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

Alt Text

While coding in JavaScript, I'm always perplexed on how JavaScript works. It's just as Kyle Simpson says -

"I don’t think anyone ever really knows JS, not completely anyway."

Any programmer who is learning JavaScript might have come across with this keyword for sure. So let's start with this. In the process, we will see how bind(), call() and apply() are used with this. I hope your doubts resolve after reading this post. Let's begin.

What is this ?

'this' in JavaScript is set to the current environment in which the function is being executed.

Often good programmers find it astounding and confusing and have a vague citation to this keyword.
Hence, to clearly define the object to which this keyword belongs, we need to use methods like bind(), call() and apply().

1. bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

Here is an example-πŸ‘

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo() {
  console.log("Hello " + this.getName());
}
var getInfo = displayInfo.bind(user);
getInfo();
// Hello Ryan
Enter fullscreen mode Exit fullscreen mode

When we use bind(), a new displayInfo instance is created and binds user object to its this keyword. Note: It copies the displayInfo function whenever a new instance is created using bind(). So when we call this.getName() inside the displayInfo, we get the name 'Ryan'. Besides we have the access to all the properties of user object.
Also, .bind allows you to set this value now while allowing you to execute the function in the future, because it returns a new function object.

2. call()

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

What does this mean? πŸ‘€
This means that we can call any function and explicitly specify what this should reference within the calling function.

Here is an example-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you');
//Hello! How are you Ryan?
Enter fullscreen mode Exit fullscreen mode

call() method accepts the first argument as this reference and after that we can pass additional arguments to the fucntion. Here, we call displayInfo() with its this set to user object and an addition argument greet with value 'Hello'
Note: .call() method doesn't make a copy of function like bind() does. 🀞

3. apply()

apply() method is similar to call() method. Both serve the exact same purpose.

Note: The only difference between call() and apply() is that call() expects all parameters to be passed in individually, whereas apply() expects a single array of all arguments to be passed in.

Here is an example-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you'); 
//Hello! How are you Ryan?

displayInfo.apply(user, ['Hello!' , 'How are you']); 
//Hello! How are you Ryan?
Enter fullscreen mode Exit fullscreen mode

Where to use?

  1. Use .bind() when you want that function to later be called with a certain context useful in events.
  2. Use .call() or .apply() when you want to invoke the function immediately, and modify the context.

You can refer to mdn docs to read more about it and see the real implementation.

Such built-in methods in JavaScript can be useful to any programmer or coder. πŸ‘ΎβœŒ

I hope you find this post useful and informative. Share your feedback on comments section. If you have queries, reach out to me on linkedin , instagram, github, twitter. πŸ˜€

Top comments (13)

Collapse
 
fonta22 profile image
Fonta22

Really nice post. I finally understood the .bind method!

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA • Edited on

Thank you ❀ I'm glad it was useful to you :)

Collapse
 
dcsan profile image
dc

nice! these are always a bit confusing. It would be nice to explain by example when you might use these. For example I've used call for a string templating when I don't want to pass a bunch of parameters. It feels a bit code-smelly tho definitely "side effects" reaching into the caller object for state.

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA

I suggest you go through this link - medium.com/javascript-scene/master...

Collapse
 
ridhikgovind profile image
Ridhik Govind

Really good explanation Rajat ! :)

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA

Thank you bro :)

Collapse
 
bgrand_ch profile image
Benjamin Grand

Thanks a lot!

Collapse
 
mikcompany profile image
Mikko

Thanks for the explanation! Nice and compact info about nuances of .call() and .apply() πŸ‘

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA

I'm glad you liked the explanation. Thank you😊

Collapse
 
chetanchandel31 profile image
chetanchandel31 • Edited on

Definitely filled some gaps in my knowledge of fundamentalsπŸ”₯.

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA

Haha My pleasure, buddy!

Collapse
 
thekooldev1232 profile image
thedev1232

nice ansd simple

Collapse
 
rajatmehra05 profile image
RAJAT MEHRA

Thank you!

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.