Master ‘this’ in JavaScript
Tags: javascript, webdev, node, programming
Published: 2021-05-30 06:21:19

In this article, we cover the all-important yet so confusing topic in JavaScript which is the “***this***” keyword.

## TL;DR

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:

*   *The Regular One —* **Default binding**
*   *Function Inside an Object* — **Implicit binding**
*   *Function Borrowing* — **Explicit binding**
*   *Using Function to Create Objects* — **New binding**
*   *How Arrow Function Differs from the Regular Ones—* **Lexical binding**

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](https://javascript.plainenglish.io/why-do-developers-fear-this-fb7497f95570?sk=7c1a7d83bd97af7ce9a9cd97fc8abda2) to understand how *this* works.

# What is “this” in brief

In JavaScript, whenever a function is called, a new execution context is created by the JavaScript engine. That execution context exists until the function has finished executing. Every execution context contains a variable called ‘this’.


# #Rule 1. Default binding


![](https://miro.medium.com/max/2386/0*xc7asnogg5WscyrC.png)

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.


![](https://miro.medium.com/max/1838/0*BkSOWChHCrsTt2V5.png)

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.

![](https://miro.medium.com/max/2160/0*MDVIyQlMzbnDv4Kf.jpeg)

# #Rule 2. **Implicit binding**

If the function is contained within an object, then that object will be referenced by “this”.


![](https://miro.medium.com/max/3296/1*OKrRTgSIiLQ5dJRIyTk-Qg.png)

For the above, the `this` keyword will point to the `personObj`

# #Rule 3. **Explicit binding**

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”.

## Let us understand it with an example.

Suppose we have two objects, let us say `personObj` and `readerObj`

![](https://miro.medium.com/max/2456/1*t1FOex7gNulGnwVEb6Mf6w.png)

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 — `call`, `apply` or `bind`.

This process is called function borrowing.

![](https://miro.medium.com/max/1966/1*Di_MsxdvDTqd0DkEBr3YfQ.png)

We borrowed the `sayName` method for the `readerObj.`

Now we can print the name property that is in `readerObj`

![](https://miro.medium.com/max/2466/1*kmRaS-zUJgG_QkrCS-FUIQ.png)

We are calling the `sayName` method from `personObj`, but at the same time, we are instructing the JavaScript engine that the ‘this’ variable in the `sayName` method should point to `readerObj`.

So when the JavaScript engine executes the code, the ***this*** variable in the `sayName` function does not point to the `personObj` but it points to the `readerObj`.

Does that make sense?

Not just that — we can also pass some arguments when we use the `call` function.


![](https://miro.medium.com/max/1860/1*pQtSBG6fv5pp_L_lfpNKmg.png)

We passed Namaste as an argument

We can make use of the argument in the `sayName` method.


![](https://miro.medium.com/max/1260/1*URmM8Vf09inNezYtA2TvMA.png)

When we execute the code, we will get the output along with the passed argument.


![](https://miro.medium.com/max/2956/1*RcaHst9aMECBaFntGO_9nA.png)

The apply method works the same way, but instead of regular arguments, it takes an array as an argument.


![](https://miro.medium.com/max/3416/1*olLUIkdy373Jhrw3-i3mwg.png)


![](https://miro.medium.com/max/2628/1*D2IhX_eA_J2F-29dnExflQ.png)

The bind method also works the same way — it can accept a regular argument.


![](https://miro.medium.com/max/2328/1*VvootgY_bLF7xy7k_mKcGg.png)

But unlike *call*  and *apply —* ***bind*** returns a function — that function can be stored in a variable and can be executed in the future.


![](https://miro.medium.com/max/3350/1*B7USlXrakqraX9w7ntLtwA.png)


![](https://miro.medium.com/max/2604/1*5kvl7us01wuPUlEpn-KJ3g.png)

One can see the use of bind in function currying — a topic that we will cover in the future.

# #Rule **4\. New binding**

We use the ***new*** keyword to create an instance or copy of an object. What the **new** keyword does is:

*   It creates an **empty object** and then instructs the keyword **this** to point to that empty object.
*   It then adds a `return this` statement 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.

## Let us understand this with an example.

![](https://miro.medium.com/max/1702/1*rdIo3Y77Y054oibfUKFLXg.png)

When we run this code, what are we supposed to get?


![](https://miro.medium.com/max/1960/1*-0ealF7SmoQwwUbFX3CsGA.png)

As we said — an empty object!

What is happening under the hood is

![](https://miro.medium.com/max/2240/1*MjlTUBtzshIO2lToU4b_zQ.png)

What? Are we invoking the function?

Yes!


![](https://miro.medium.com/max/2556/1*7jkc1tuK7hNbx25EVcxvLQ.gif)

See, I told you it is getting invoked.

Let us look at the whole thing.


![](https://miro.medium.com/max/2240/1*Dw9PlvHl5SXw94wwiFZFTg.png)

If we put some value in the function, it will put that in the newly created object and then return it!


![](https://miro.medium.com/max/1864/1*ByTa5ihFcU6xzningnM3eg.png)

When we `console.log(newPersonObj)`


![](https://miro.medium.com/max/1768/1*YeOXSqQdt8Zi8qJmpbQFRg.png)

Let us finish this concept with an animation.

Since `dev.to` supports animation of 500 frames only, I am attaching  an external link to the animation
[Go here for the animation](https://miro.medium.com/max/1210/1*0wJYjMQ9uwVEYzBj89oL4A.gif)

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 `personObj`

Does it make sense now?

Good! Let us now understand the last rule.

# #Rule **5\. Lexical binding**

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:


![](https://miro.medium.com/max/2598/1*MEaHjDB5yTXm_T6tDO_HwA.png)

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.


![](https://miro.medium.com/max/2976/1*hoYm0GaVU-9eIG431Vs1wg.png)


![](https://miro.medium.com/max/1552/1*JJvXhLyOOGZfSstSj2sS4A.gif)

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 `setInterval()`.

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:


![](https://miro.medium.com/max/2692/1*_ecuxy27FcjFnlfPRKVZLg.png)



![](https://miro.medium.com/max/1516/1*Qd4QDX0XnfXBcnkjdQUVgw.gif)

The "`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:


![](https://miro.medium.com/max/2804/1*Rxgs1sNx3TXP7cvNe-PsoA.png)



![](https://miro.medium.com/max/1516/1*Qd4QDX0XnfXBcnkjdQUVgw.gif)

We solved the problem by just using an arrow function.

# Conclusion

If you understood all the rules, then pat yourself on the back — you deserve it! Now you are no more someone who is afraid of JavaScript’s most confusing concept — the "*this*" keyword.

In this article we learned:

*   When calling a ***function*** in a standard way shown above, “*this*” will actually refer to the global object!
*   If the function is contained within an ***object,*** then “***this***” will point to that object.
*   ***call***, ***apply*** and ***bind*** are functions that are available to us by JavaScript to alter the behaviour of “***this***” in our program.
*   ***new*** keyword or operator when used makes an empty object, then instructs “***this”*** to point to that newly created object
*   Arrow function enables us to lexically bind the “***this***” keyword in the program, what this means is its value is static and determined by the place where the “`this`" keyword is defined.

# Note of Gratitude

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**](https://twitter.com/tweetsbysoma) in [**my future blog post**](https://dev.to/polymathsomnath) 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!