Original subtitles

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.