THIS Keyword in JavaScript

The "this" keyword in JavaScript refers to the current object or context in which the code is being executed

Meher Howji avatar image
··· Likes

In this tutorial, we will look at this keyword and break it down into five parts so that each part is bite-sized and easy to comprehend. By the end of this series, you will have a super solid intuitive mental model that will stay with you for the longest time.


The language Scheme quite inspires the JavaScript language. The Scheme is the language that has inspired functional programming languages like Haskell and Closure.

But in later stages, the makers of JavaScript noticed a rise in the popularity of Java and decided to make JavaScript look like Java for easier adoption. And that choice brought many features from the object-oriented world into JS. And we know that a functional programming language doesn't have this keyword, but object-oriented programming does.

Even though JS decided to mimic the look and feel of Java, from within, JS is very much like Scheme. It does not implement a true class-oriented system, but JS achieves inheritance by leveraging the prototype model. Although you might say that ES6 has classes, it is nothing but a syntactic sugar over the prototype system.

ES6 classes are just syntactic sugar over the Prototype Model.

With all that being said, this keyword is a straightforward concept to understand, and let me show you how.

Why Do We Need THIS

One way you can see this keyword is as a way to do a 2-dimensional look up in the scope. When you define a variable, the lookup in your scope chain happens from inner to outer functions until you reach the global scope. Now, what if you want one of your variables to look up for data/or-its-value in other parts of your scope? this keyword gives us a way to solve it. And there is much more to this which we will see in the next part of the series.

Now, you could say that I could write a function and receive an argument as my data. And you wouldn't be wrong, but that's just another way to solve it.

Call Site

Call site refers to the location of the function invocation, and it is an important step in determining what the value of this keyword is going to be. In some cases, the call site can get hidden away by libraries and native APIs, e.g., setTimeout, but those cases are limited and predictable.

An informal rule says that is on the left is what this keyword points to. It's a good conclusion to some extent, but how we reach that conclusion is important too.

'this' is a run-time binding and not an author-time binding.

Rules for Call Site

The value of this keyword depends on how the function is invoked. We should now ask ourselves, how many ways can a function be invoked in JavaScript? The answer to that question is, there are five ways to invoke a function:

In the next part, we will see how Default Binding works. By the way, I have covered these posts on my YouTube channel as well.