Don’t be scared of the ‘this’ keyword
If “this” scares you, do not worry! We will learn how to determine the value of the “this” keyword using five simple rules.
Those five simple rules are as follows:
Don’t worry about these scary names. Computer Science people have a fancy for naming terms so that they sound extra-terrestrial. Under the hood, they are just common concepts that any willing human can understand.
The “this” variable corresponds to how you invoke a function. These rules help us to determine the value of this in various scenarios.
Once you understand these rules, then you would not fear them anymore.
Before we begin, please go through this article to understand how this works.
When calling a function in a standard way shown above, “this” will actually refer to the global object!
In the browser, the global object means the Window object.
One exception to remember — that is when strict mode is enabled. By writing “use-strict” you can prevent anything from being declared on the global object.
If the function is contained within an object, then that object will be referenced by “this”.
For the above, the
this keyword will point to the
We saw how
this points to the global object and in another case, it points to the object which contains it. Wouldn’t it be nice to able to control what this variable ends up being when the function is called?
Words like call, apply, and bind usually causes terror in new developers. In reality, they are all functions that can be used to explicitly set the value of “this”.
Suppose we have two objects, let us say
Both the object has a name property. The
personObj has a function that can print the value inside the
name but, the
readerObj does not have any such feature!
Here we can make use of one of the three methods —
This process is called function borrowing.
We borrowed the
sayName method for the
Now we can print the name property that is in
We are calling the
sayName method from
sayName method should point to
sayName function does not point to the
personObj but it points to the
Does that make sense?
Not just that — we can also pass some arguments when we use the
We passed Namaste as an argument
We can make use of the argument in the
When we execute the code, we will get the output along with the passed argument.
The apply method works the same way, but instead of regular arguments, it takes an array as an argument.
The bind method also works the same way — it can accept a regular argument.
But unlike call and apply — bind returns a function — that function can be stored in a variable and can be executed in the future.
One can see the use of bind in function currying — a topic that we will cover in the future.
We use the new keyword to create an instance or copy of an object. What the new keyword does is:
return thisstatement to the end of that function.
Remember, when an instance of an object gets created using the new keyword, “this” always points to that newly created instance.
When we run this code, what are we supposed to get?
As we said — an empty object!
What is happening under the hood is
What? Are we invoking the function?
See, I told you it is getting invoked.
Let us look at the whole thing.
If we put some value in the function, it will put that in the newly created object and then return it!
Let us finish this concept with an animation.
In the above example, we are using a function to create an object.
This type of function is known as a function constructor.
Remember, in the
newPersonObj, which stores the copy of
personObj— the “this" variable points to empty
Does it make sense now?
Good! Let us now understand the last rule.
With the advent of ES6 — we got arrow functions. Arrow functions with their ultra-lean syntax are a natural replacement for their traditional anonymous counterparts.
To explicitly invoke an arrow function, as with a regular anonymous function, you would assign it to a variable first:
Arrow functions are just like regular anonymous functions, with one major exception- the behavior of this object inside the function.
In a regular function, the value of "
this" is context-based- call the function inside a link, and "
this" points to the link's object; call it inside one more function like
setInterval(), then "
this" points to the global window object.
For example, the following example attempts to call the
start() method of a custom object to increment its counter property by 1 every second, though it fails due to an incorrect assumption of the "
this" object reference counter.
In the above,
this.counter fails to properly reference the counter property of the
countup object, though the error may not be so obvious to spot. One can either mistakenly or carelessly assume that "
this" points to the
countup object, when in fact it points to the global
window object due to the context "
this" is being called- inside the global window method
The result is a reference to a non-existent
window.counter property that will repeatedly return
NaN when we try to increment it. To properly reference the
countup object then inside the anonymous function, we should cache a reference to the correct "
this" object before the context changes to a different one:
this" object inside an arrow function is lexically bound, which is just a fancy way of saying its value is static and determined by the place where the “
this" keyword is defined.
Contrast that with regular functions, where "
this" is dynamic and based on the context it's called regardless of the scope at the time "
this" was defined.
Let’s take the previous example that gave us trouble initially, and see how changing over to using an arrow function intuitively addresses the problem:
We solved the problem by just using an arrow function.
In this article we learned:
this" keyword is defined.
I wanted to take this last opportunity to say thank you.
Thank you for being here! I would not be able to do what I do without people like you who follow along and take that leap of faith to read my post.
I hope you’ll join me in my future blog post and stick around because I think we have something great here. And I hope that I will be able to help you along in your career for many more years to come!
See you next time. Bye!
Looking to hire Node js developers? One of the top Node js development companies in India & USA offers cost-effective Node js web development services.
Hire dedicated Node JS developers & programmers in India for custom full-stack NodeJS web development projects on hourly/full-time basis. Strict NDA, 16+ years exp & 2500+ clients|450+ Experts
SISGAIN is the top rated node js development company providing professional services on node js web and mobile development.