Every Javascript programmer goes through the same confusing thought process. What is the difference between
call
,
apply
, and
bind
? And why is the
this
keyword used differently in JavaScript than other object-oriented languages? Help!
I wanted to put an end to all the confusion caused by the context 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 customize its context in a smart and performant way.
Functions, Properties, and Methods
JavaScript, unlike other languages (such as Ruby, for instance) allows for an object to contain functions as properties. These properties are commonly known as methods.
See example below:
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.
The differences between 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.
When and why should I use them?
- To borrow another object’s methods or
- To create a custom value of this
1. Borrowing another object’s methods
a) Call
Here’s how
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.
Meaning, it’s possible to invoke an object’s method on a totally different object.
From the above examples, 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 would be a typical 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.
b) Apply
To make it easy, let’s use the (call) examples above, but instead use
apply
:
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.
2. Creating a custom value of ‘this’
As seen in the above examples, it is possible to invoke an object’s method(s) on another. Let’s take a step back.
A method can access and modify the properties of its parent object. This is where JavaScript wins big time! But how can an object reference its own properties and even modify those properties itself?
What is the ‘this’ keyword?

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:
An object is able to access and manipulate its own properties all thanks to the
this
keyword. In the
theFirm
object, the
getYearOfRelease
method is able to access its parent’s
yearOfRelease
property.
There are many misconceptions around the value 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 called. 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!
Problem solved! We assigned the value of
this
to the
user
object which in turn gives us access to the
user's
name
property.