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?
- “borrow” means “to use the properties or
- 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