When to Use JavaScript’s “this,” “call,” “apply,” and “bind”

Each and every one of us who writes code in JavaScript goes through the same bewildering mental process. Can you explain the difference between call , apply , and bind ? And why is the this keyword used differently in JavaScript than other object-oriented languages? Help!

I hoped this will clear up any misunderstandings about the background of this keyword in JavaScript objects and functions. In this article, I’ll help you understand when to use this to access and modify object properties as well to use customise its context in a smart and performant way.

Features, Attributes, and Techniques

JavaScript, in contrast to languages such as Ruby, allows objects to have functions as attributes. These functions are commonly referred to as ‘methods’. Methods can take many forms, from creating custom functions, to defining objects and their properties. As a result, JavaScript provides developers with a versatile and powerful language for creating interactive web applications.

Please refer to the following example:

needsRefill is a property of the coffeeMaker object. And since it’s a function, it has to be invoked to determine whether the coffeeMaker needs a refill or not.

Comparison of call, apply, and bind

Both call and apply invoke a function. Their only difference is that call accepts arguments in a comma-separated fashion while apply requires arguments to be passed as an array or an array-like object.

Bind returns a function. Examples coming up.

Can you tell me when and why I should utilise them?

1. “borrow” means “to use the properties or
2. Making a unique version of this value

1. Using the functions of another object

a) Call

How to Do It call is defined in the MDN docs:

The call() allows for a function/method belonging to one object to be assigned and called for a different object.

That is to say, it is feasible to use one object’s method on another.

This may be seen in the getYearOfRelease method belongs to the theFirm object. However, we were able to call it on the theDaVinciCode object! How magical is that?

A further instance of this is the common use of hasOwnProperty to check if an object possesses a particular property. It’s recommended to (play it safe) use Object.hasOwnProperty.call(yourObj, yourProp) instead of calling hasOwnProperty directly on the object (which overlooks the fact that the obj might not be a true instance of the Object . For instance, if the obj was created by calling Object.create(null) , then calling obj.hasOwnProperty(prop) will fail since the obj does not have reference to the Object.prototype . By using call , we are able to ‘borrow’ the hasOwnProperty method from the Object.

Apply (b)

Here, we’ll simplify matters by referring back to the aforementioned (call) instances but apply :

Once again, the only difference between call and apply is that with apply you have to pass arguments as an array. Not doing so will fail with a TypeError .

c) Bind

bind returns a function. For example:

boundFunction refers to getYearOfRelease and will be called on the theDaVinciCode object. You can call bind passing the arguments directly or pass the arguments in the bound function itself.

Two, make your own “this” value

Invoking a method on one object from inside another is feasible, as seen above. First, let’s back up a little.

A method belonging to an object may access and modify the variables associated with that object. This is an area in which JavaScript excels. Consequently, objects can leverage their own characteristics and even modify them as needed.

Which term best describes this situation?

The this keyword is the ultimate cause of confusion for programmers because it’s used differently in object-oriented coding languages. Here’s my attempt at officially clearing things up:

Because of the, an object may examine and change its own characteristics. this keyword. In the theFirm object, the getYearOfRelease method is able to access its parent’s yearOfRelease property.

Many people overestimate the importance of this in an object or in a function. Keep this in memory: the value of this is assigned when a method or function is invoked. And NOT where it is defined!

When theFirm.getYearOfRelease is being invoked, the value of this is assigned to the theFirm . However, calling getYearOfRelease without the dot will assign the value of this to the global / window object. See the example below:

Calling myFunc returns undefined since this is pointing to the window object which at that point doesn’t contain the yearOfRelease property. So again, to reiterate, the value of this is only assigned where a method or function is invoked but not where it is defined.

Calling sayHello returns ‘Hello, undefined’. How can the undefined be resolved? Thanks to call , apply or bind (that we discussed above), we can assign the value of this to whatever we want!

There goes that bothersome problem! In other words, we tallied the worth of this to the user object which in turn gives us access to the user's name property.

Related Article: Books Every Software Developer Should Read in 2023 to Master JavaScript