const - JS | lectureHow JavaScript Works Behind the Scenes

The this keyword is a fundamental concept to understand in JavaScript, and many beginners, find it especially difficult. But don't worry, it's not that hard if you know precisely how the this keyword works.

The this keyword or this variable is a special variable created for every execution context and, therefore, any function.

We learned before that it's one of the three components of any execution context, along with the variable environment and scope chain that we already learned about before.

In general terms, the this keyword will always take the value of the owner of the function in which the this keyword is used. We also say that it points to the owner of that function.

That sounds very abstract, but we will see what that means in a second. For now, what's very important to understand is that the value of the this keyword is not static. It's not always the same. It depends on how the function is actually called, and its value is only assigned when the function is actually called.

It's very different from a normal value in this regard. For example, if we set x to five, x will always be five. But the this keyword again, depends on how a function is called.

To better understand the concept, let's analyze four different ways in which functions can be called.

The first way to call a function is as a method. That is, as a function attached to an object. When we call a method, the this keyword inside that method will point to the object on which the method is called, or in other words, it points to the object calling the method.

Let's illustrate this with a simple example.

const john = {
  name: 'John',
  year: 1991,
  calcAge: function () {
    return 2025 - this.year;  },
};

john.calcAge(); // Result ==> 34

The method from the above code snippet is the calcAge method because it's a function attached to the john object. On the last highlighted line, we then call the method, and as you can see inside the method, we used the this keyword. According to what we just learned, the value of the this keyword is john, because it is the object calling the method.

Consequently, on john, we can access all its properties. And so, this.year will become 1991, because that's john.year as well. So in this case, writing john.year would have the same effect as this.year. But doing this.year is a way better solution, for many reasons that we will get into throughout the course. We will play around with this example more in the next lecture.

Another way we call functions is by simply calling them as normal functions. That is, not as a method and so not attached to any object. In this case, the this keyword, will simply be undefined. However, that is only valid for strict mode. So if you're not in strict mode, this will actually point to the global object, which in the case of the browser is the window object.

That can be very problematic and so, this is yet another very good reason to always use strict mode.

Next, we have arrow functions, and while arrow functions are not exactly a way of calling functions, it's an important kind of function that we need to consider because, remember, arrow functions do not get their own this keyword.

Instead, if you use the this variable in an arrow function, it will simply be the this keyword of the surrounding function, .i.e., the parent function. In technical terms, this is called the lexical this keyword because it simply gets picked up from the outer lexical scope of the arrow function.

Never forget this very important property of arrow functions.

Finally, if a function is called as an event listener, then the this keyword will always point to the DOM element that the handler function is attached to.

The this keyword is usually a big source of confusion for beginners, but if you know these rules, then it shall become a lot simpler. To make it even simpler, it's also important to know what the this keyword is NOT.

• The this keyword will never point to the function in which we are using it.
• The this keyword will never point to the variable environment of the function.

These are two pretty common misconceptions, and so that's why I'm addressing them here.

For the sake of completion, there are other ways to call a function. For example, using the new keyword or the call, apply and bind methods, but we don't know yet what any of these are, so I will talk about how the this keyword works with them when the time comes.

With all this being said, let's move on to the next lecture and put all we just learned here into practice to make it crystal clear.