Original subtitles

Let's now see the rules

of how the disc keywords is defined in action.

And let's start by taking a look

at the disc keywords outside of any function whatsoever.

So just outside here in the global scope.

And so we get that the disc keyword

in the global scope is simply the window object.

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 or old friend called H here.

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 disc keyword is undefined.

Okay.

And so what that means is that

insight is just regular function.

Call here.

The disc keyword will be undefined

and that's because we are in strict mode.

Remember

that in sloppy mode, it would be also the global object.

So in this case, the window object

but you already know that you always should use strict mode.

And so then in a regular function call

like this D this keyboard will simply point

to undefined and with a regular function call

I simply mean a call of disfunction

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.

So let's just copy this.

So cog H

both here and here

arrow,

and let's call this one with a different value.

And now think about the rules that we learned

in the last video.

So what do you think the disc keyword will be

if dysfunction is an arrow function

and actually we still need to do that.

So birth year.

And so now it is a legit arrow function.

And so once more, what do you think

that these keywords will now be

think hard about it?

And then let's check

and so

it is window.

So that's a little bit weird maybe

right?

So why is that?

Why is the disk keyword undefined

in this function, but window in this

function? Well, it is because the

arrow function does not get its own disc keyword.

So instead the arrow function simply uses the lexical

this keyword, which means that it uses the disc keyword

of its parent function or of its parents scope.

So to say

and in this case, what is the lexical, this keyword?

So what is the disc keywords in the parent's scope

of this function?

Well, it is window because window is the disc keywords here

in the global scope.

So right here.

Okay. That's why I started by showing you this one here.

So in this case, this, this keyword here will simply point

to the disc 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 disc 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 disc 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.

In this case,

in the next video

we will see some more real world implications of the fact

that the arrow function does not get its own disc keyword.

Now, next up

let's try to use the disc keyword inside of a method.

So let's quickly create a Jonas object here just

with a birth year,

1991,

and then again, or caulk H method.

And so remember

that this is basically now a function expression

that we need to write here.

Now let's lock the disc keyword here

and then

let's call actually the caulk H function

for now, just to see what the, this keyword will look like.

And my hope is

that you can guess already what it should look like.

So let's save it to see the result.

And indeed it is T Jonah's object.

So exactly this object with caulk age and year.

And so it means that's exactly this object.

And that's exactly the rule that I told you

in the previous lecture.

So when we have a method call, the disc keyword insight

of the method will be the object that is calling the method.

And in this case, that's the Jonas object.

So Jonas here is basically the owner of the method.

That's another way

of saying it and therefore, insight of cog H this is Jonas.

And then we can use that

to our advantage, to calculate the age here

based on the data that is already in this object.

And so that's one

of the big use cases for the disc keyword, right?

Because then we don't have to pass in this data here again.

So instead of having to do this again

we can simply use the birth year that is already

in the object itself.

And so we can use the disc award to reference that object.

And so this should now give us, or a usual value here of 46.

Great. So that's pretty important stuff.

And now let's move

on just to one final example here in this lecture.

So I keep saying that the disc keyword will point

to the object that is calling the method, right?

And that means that the disc keyword will not simply point

at the object in which we wrote the method.

So here we wrote the caulk H method inside

of the Jonas object.

And so we might think

that debt is the reason why the disc keyword points

to Jonas, but that is not true.

The reason that the disc keyword will point

to Jonas in this case is

because Jonah's was the object calling debt method

and that's a subtle, but very important difference.

And let me know, show you why that is.

So let's create a new object

which I'm going to call a Matilda

and let's create a first name.

We're actually, we don't need a name.

Let's just say, year

2017.

And that's it.

That's all we need in this object.

Now, remember that a function is just a value

right?

And therefore we can do this.

We can say Matilda thought caulk eight should be equal

to Jonas that caulk H

so basically here

we simply copy the caulk H method from Jonah's to Matilda.

But now when we take a look at Matilda here

then we see that the caulk H function is also in here.

Alright.

And of course it's still also

in Jonah's, but now we copied it from one object

to the other,

and this is called to method borrowing.

So we basically borrowed here the method

from one object to the other.

And so we don't have to write it in a duplicate way.

So now let's say Matilda dot caulk H

and what do you think

the disc keyword will look like now?

And let's get rid of some

of these

before,

so that they don't clutter

or output here.

And you can of course take them back

if you want to see them in your own coat.

But now let me save this

and see what the result of this cog age will be.

So

the age of Matilda gave us the correct result

of 20, which is exactly

37 minus 27.

And so this means that in this method

call here to this keyword does no actually point to Matilda.

And we can also see that here.

So here, as we locked to this keyword

we see that it's actually the Matilda object

because of this birth here.

And so this proves exactly what I

was just telling you before

which is the fact that the disc keyword always points

to the object that is calling the method.

And so here we are calling the method on Matilda

right? And so therefore the disc keyword will point

to Matilda, which was the object, which called the method.

So even though the method is written here inside

of the Jonas object

the disc keyword will still point to Matilda.

If it is Matilda, who calls the method.

Okay. And so that's really important to understand.

And it's the reason why I said

in the last video that the disc keyword is really dynamic.

It's not static

and it depends on how the function is called.

And we can take this even further

by basically completely taking the function

out of the Jonas object.

So let's create just a variable called F for function

and then say, Jonas dot caulk H and not call it, of course.

So we just want to copy now the function

into a new variable.

And so once more debt

as possible, because a function is just a value.

So we take this value here and copy it here.

And of course, without calling it

okay, just like here, where we copied the method

from one place to the other, but we did not call it.

So here we can take a look at F in the console.

And so you will see that it's actually this function

but now what implications is this going to have

for today's keyword?

Well, let's just try to call the F function

which remember is the code of Jonas dot cog H

and so now the disc keyword should be undefined.

And therefore we also get this error

that it cannot read year of undefined.

So that's coming from here because

the disc keyword is now undefined.

And so undefined the year does, of course not exist.

So this happens because this F

function here is now just a regular function call

right? It is not attached to any object.

There is no owner of this F function

anymore here at this point.

And therefore it is just a regular

function call just like here, for example.

And so therefore the disc award is then also undefined

just like again, here in this function

which was also a regular function call

just like our F function is now.

All right.

So again, that's a subtle difference

in our code, but it makes all the difference

in the result that we then get.

And for sure

the disc keyword is a subject that confuses many beginners

in JavaScript, but hopefully this lecture

and the previous one made it a little bit more clear.

Now we didn't talk about the event handler functions here

that I also showed you in the last video.

So on a slide there, but I'm leaving that

for the advanced Dom section where we will come back

to this, but for now in the next video

we need to take an even more closer look

at regular function versus arrow functions.