The this keyword, is an extremely important concept to understand in JavaScript. And many beginners, find it especially difficult. But don't worry, It's actually not that much hard if you know exactly how the this Keyword works.
So, the this keyword or this variable is basically a special variable in JavaScript that is created for every execution context and therefore any function. In fact, 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 are learned about next aticles.
Read also: Funciton in Javascript with Examples
This keyword
Now, in general terms, the this keyword, will always take the value of the "owner" of the function (owner of the function means that assigned method and follows) in which, the this keyword is used. We also say, that it points to the owner of that function.
And that sounds very abstract but we will see what that means in a following examples. For now, what's the very important to understand is that the value of the this keyword is not static. So it's not always the same. It depends on how the function is actually called. And its value is only assigned the value when the function is actually called. So it's very different from a normal value, In this regard.
if we set, For example, a = 5 , then a will always just be five.
But the this keyword again, depends on the way in which a function is called. But
what does that actually mean?
Well, let's analyze four different ways in which functions can be called. And the first way to call a function is as a method "this= ".
So as a function attached to an object. So when we call a method, the this keyword inside that method will simply point to the object on which the method is called in the JavaScript, or in other words, it points to the object that is calling the method.
const daily = {
firstname:'daily',
year:2010,
Age:function()
{
const calc = 2022 - this.year;
console.log(calc);
}
};
daily.Age();
And so let's illustrate this with a simple example. So the method here is the Age method. Because it's a function attached to the "daily" object. in the last line here, we then call the method and as you see inside the method, we used the this keyword and call the year in JavaScript.
Now, according to what we just learned,
what should be the value of the this keyword here?
In the above code you will the see the value year , yes, it should be "daily" owner values, because that is the object that is calling the method down there in the last line. And so then, on "daily", we can of course access all the properties that it has. And so, this.year will become '2010', because that's daily.year as well. So in this case, writing 'daily.year' would have the exact same effect as 'this.year'. But doing it this way is a way better solution, for many reasons that we will get into throughout the javascript.
we just call functions is by simply calling them as normal functions.
daily.Age();
"use strict" Mode:
So 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 case of the browser is the "window object".
And 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 keyword variable' in an arrow function, it will simply be the this keyword of the surrounding function. So of the parent function and 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. So never ever forget this very important property of arrow functions. So it's really important not to forget that arrow functions do not get their own 'this keyword'.
Global scope and window object
Let's now see the rules of how the this keywords is defined in action.
And let's start by taking a look at the this keywords outside of any function whatsoever. So just outside here in the global scope. And so we get that the this keyword in the global scope is simply the window object.
console.log(this);
const Ages = function (year) {
console.log(2022 - year);
console.log(this);
}
Ages(2010);
So that's the global object that we just saw before. Remember, and now let's do the same but inside of just a regular function call so we're going to use called Age. So let's look to the console, just the usual result so that we're actually doing something here. But then what we're really interested in is taking a look at this, this keyword. So let's now call this function. And so let's see. And now the result of taking a look so at the logging, the this keyword is "undefined".
And so what that means is that insight is just regular function. The this keyword will be undefined and that's because we are in strict mode. So in this case, the window object but you already know that you always should use strict mode. with a regular function call I simply mean a call of function without the function being attached to any object.
So without having an owner so to say, but now let's see what happens. If this function here was an arrow function. let's call this one with a different value. So what do you think the this keyword will be if this function is an arrow function and actually we still need to do that.
const Age = year =>
{
console.log(2022 - year);
console.log(this);
}
Age(2010);
So year. And so now it is a arrow function. And so once more, what do you think that these keywords will now And then let's check and so it is window.
Why is the this keyword undefined in this function, but window in this function?
Well, it is because the arrow function does not get its own this keyword. So instead the arrow function simply uses the lexical this keyword, which means that it uses the this keyword of its parent function or of its parents scope.
what is the this keywords in the parent's scope of this function?
Well, it is window because window is the this keywords here in the global scope in JavaScript. That's why I started by showing you this one here. So in this case, this, this keyword here will simply point to the this keyword in the global scope. And so therefore it will point to window and like here in this normal function which does actually get it's own this keywords it's simply as undefined here but it is its own this keyword while this one here in the arrow function is actually not the this keywords of this function here. Okay. It is simply the disc keyword of the parent's scope. And that happens to be the window object.
"use strict";
const daily = {
firstname:'daily',
year:2010,
Age:function()
{
const calc = this.firstname + "started on" + (2022 - this.year)+ "year";
console.log(calc);
},
};
daily.Age();
In this above code, again I call Age function and let's try to use the this keyword inside of a method and create a "daily" object here just with the year 2010 and call the Age() function basically the expression now and just write exactly with age and year method minus with some string and calculate the age here based on already in this object
and so that's one of the big use cases this keyword and in JavaScript finally call owner with daily.Age() function value is 12 .so that's pretty stuff and output is "daily started on 12 year".
For example, using call apply and bind methods, but we don't know yet what any of these are. And so I will talk about how the this keyword works with them, when the time comes. Anyway, that's it for this article. So let's now use this in practice to make it crystal clear.