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 hard if you know exactly
how the this Keyword works.
So, the this keyword or this variable
is basically a special variable 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 already learned
about before.
Now, 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.
And 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.
So 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.
So it's very different
from a normal value,
In this regard.
if we set, for example,
X to five,
then X 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.
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,
or in other words,
it points to the object that
is calling the method.
Okay?
And so let's illustrate this
with a simple example.
So the method here
is the calcAge method, again,
because it's a function attached to the Jonas object.
in the last line here,
we then call the method
and as you see
inside the method,
we used the this keyword.
Now, according to what we just learned,
what should be the value
of the this keyword here?
And that's right,
it should be Jonas, because that is the object that
is calling the method down there
in the last line.
Isn't it?
And so then, on Jonas, we can of course access
all the properties that it has.
And so, this.year will become 1989,
because that's Jonas.year as well.
So in this case,
writing 'Jonas.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 course.
And we will play around
with this example a bit more
in the next video.
But anyway, another way we call functions
is by simply calling them
as normal functions.
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 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.
Believe me that actually I run into
one or two bugs
because of this behavior.
Okay?
So it's really important not to forget
that arrow functions do not get their own
'this keyword.'
Okay.
And 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.
Very straightforward right?
Now, 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
and to make it even simpler.
It's also important to know
what the, this keyword is not.
So this will never point to the function
in which we are using it.
Also, the this keyword will never point
to the variable environment
of the function.
And these are two pretty common misconceptions
and so that's why I'm addressing them here.
Okay?
So again, the rules that I showed you here
is all that you need to know.
All right.
And now just for the sake of completion,
there are actually other ways
in which we can 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.
And so I will talk about how the this keyword
works with them,
when the time comes.
Anyway, that's it for this lecture.
So let's now use this in practice
to make it crystal clear.