Developers who use JavaScript all undergo a perplexing mental process. One common challenge is distinguishing between the distinct:
call
,
apply
, and
bind
? And why is the
this
keyword used differently in JavaScript than other object-oriented languages? Help!
My aim is to eliminate any confusion about the origin 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.
Functionalities, Properties, and Methods
Compared to Ruby and other languages, JavaScript allows the use of functions as properties of objects. These functions are commonly called ‘methods’ which are used in defining custom functions, creating objects, and specifying attributes. With these features, JavaScript has become a flexible and robust programming language that allows developers to create engaging and interactive web applications.
Kindly check 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.
Differentiating call, apply, and bind methods
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 enlighten me on their significance and appropriate usage?
- The term “borrow” refers to the act of using the attributes or
- Creating a distinct rendition of the this keyword
1. Implementation of functions from another object
a) Call Method
Steps to Follow:
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.
In other words, it’s possible to employ a method of one object into another.
This can be observed in the
getYearOfRelease
method belongs to the
theFirm
object. However, we were able to call it on the
theDaVinciCode
object! How magical is that?
Another example of this is the frequent utilization 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 Method (b)
To make things simpler, let’s revisit the (call) examples mentioned earlier, but
apply
:
Once again, the sole distinction between
call
and
apply
is that with
apply
you have to pass arguments as an array. Not doing so will fail with a
TypeError
.
Bind Method
In
bind
returns a function. For example:
In this
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.
Creating Your Own “this” Value
As demonstrated previously, it’s possible to call a method on one object from within another. However, let’s take a step back.
An object’s method can access and manipulate the variables linked to that object, one of the strengths of JavaScript. As a result, objects can use and modify their own properties as needed.
Which Term Best Describes This Scenario?
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 this, an object can inspect and modify its own properties.
this
keyword. In the
theFirm
object, the
getYearOfRelease
method is able to access its parent’s
yearOfRelease
property.
Numerous individuals overvalue the significance 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 pesky issue! In simple terms, we computed the value of
this
to the
user
object which in turn gives us access to the
user's
name
property.
Related Article: Essential Books for Software Developers to Master JavaScript in 2023