Original subtitles

In this lecture,

we're gonna go back to the this keyword

and learn how we can set the this keyword manually

and also why we would want to do that.

So let's say we are an airline again

and in this case, Lufthansa,

which is the biggest European airline group, by the way.

And so let's create a very simple object

for this airline with a very simple booking method as well.

So we have the airline name.

We have the code basically.

We also want to keep an array of bookings.

So also inside of the object,

and then the book method.

And remember from the previous section,

I will now start using the way of writing methods,

using the enhanced object literal syntax.

And so that's simply by defining the method like this

without having to write a function.

So remember, before this,

we used to do this, right?

And if you still prefer this syntax,

you can still do this one.

But I do actually prefer the new syntax.

And so I'll just start using this one now.

So the flight number

and also the passenger name here.

So then let's log something to the console.

And again, this could have been boilerplate code here

but it's also good to practice writing this.

So this should be a template string booked a seat on,

so basically, we want to print like Jonas booked a seat

on Lufthansa flight

and then the flight number.

And so here we are now going to get the airline name

from the object.

And so we already learned

that for that, we use the this keyword, right?

And then flight this.iataCode.

So that's gonna be the LH

and then the flight number itself

that we pass into the function.

So the flightNumber.

So for now, this is just a nice review

of how the this keyword works, right?

And of course, I will now assume that you know

how all of this works

because otherwise, I will have to explain the same things

over and over again.

And so as I mentioned before,

you should only progress once you really understand

a certain topic.

Anyway, let's now use the book function here.

And I'll use the flight number 239

and then with my own name.

And let's right away book another Lufthansa flight

for let's say Mike Smith on flight number 635.

John Smith.

And now, if we take a look at the results,

then indeed, everything works just as expected, right?

And so it's important to understand

that the this keyword here points

to the lufthansa object itself

because that's the object

on which the book method here was called.

So again, that's just what I explained before, right?

But now let's say that after some years,

the Lufthansa Group created a new airline.

So let's create eurowings here.

And then a very similar object.

So with the airline, the code.

And also an empty bookings array.

Okay?

Oh, and by the way,

we actually also want our book method here

to add a new object to our bookings here.

So that's super important as well.

So I forget that.

So let's go back here.

So we will say again this

and then the bookings array

and then let's put a new object in there

with the flight

and so that's essentially gonna be this one.

So the code plus the flight number.

And then also the passenger name.

And then let's quickly log that to the console here.

So this.bookings is not a function

and of course, it's not.

We need the push method indeed.

And so now you see that we have an array

of our two bookings here.

So that works perfectly.

But now anyway, going back here to Eurowings,

of course, we also want to be able

to take bookings for a Eurowings flight,

so as being this airline, right?

Now, taking this exact same method here

and simply copying it and pasting it here

is a bad practice, right?

So of course, we are not gonna do that.

So instead, we will just take the method

and store it in an external function.

And then we can reuse that function

for all of the different airlines.

So what I mean is to create a new function called book

and we will simply set it to lufthansa.book, all right?

So again, this is possible

because JavaScript has first class functions.

And so we can simply take this function value here.

So that's this function

and then store it into a new variable,

which is then gonna be also the book function, okay?

Now, we could have written the function here also literally

but that's just not necessary.

We have it right here

and so let's just leave it there

and assign it to book right here.

Okay, so let's try to use this book function

to do a new booking now.

But what do you think is gonna happen?

So 23, and then let's say Sarah Williams

and let's give it a save

and now we get cannot read property airline of undefined.

So do you know why this happened?

Well, it's because this function here,

the book function is now just a regular function call

and so as we learned in one of the previous sections,

in a regular function call,

the this keyword points to undefined,

at least in strict mode.

All right?

So once more, this book function is no longer this method.

Okay?

It's just not.

It is now this separate function here.

It's a copy of this one

but it's not a method anymore,

it's now a function.

And so here it's a regular function call.

And so therefore, the this keyword inside of it

will now point to undefined.

And that's why I kept telling you earlier

that the this keyword depends on how the function

is actually called.

Okay, so make sure to understand these dynamics here.

But now how do we actually fix this problem?

So in other words, how do we tell JavaScript

that we want to create a booking

on the new Eurowings airline?

Or even how do we tell it that we want

to book on Lufthansa here?

Well, basically, we need to tell JavaScript explicitly

what the this keyword here should be like.

So if we want to book a Lufthansa flight,

the this keyword should point to Lufthansa

but if we want to book a Eurowings flight,

then the this keyword should point to Eurowings.

So how do we do that?

How do we tell JavaScript explicitly

or manually what this this keyword should look like?

Well, there are three function methods to do that

and they are call, apply and bind.

So when we first talked about the this keyword,

I think I mentioned these methods back then

and so now we're gonna use them,

at least the call and apply methods.

Okay, so let me show you how.

So instead of just doing this,

which doesn't work,

let's actually comment that out.

Does NOT work.

So instead, we use book.call, all right?

And remember that a function is really just an object

and objects have methods

and therefore, functions can have methods too

and the call method is one of them.

And in the call method,

the first argument is exactly

what we want the this keyword to point to.

So let's say we want a Eurowings flight

and then as usual,

the rest of the arguments.

So 23 and Sarah Williams.

All right?

And then let's log to the console also the eurowings object.

Let's run this and then I'll explain a bit better

what just happened.

But indeed, we now have the bookings array

and in there, we have the object

with the EW23 and so EW comes from here.

So exactly from the eurowings object

and then also, of course, the name.

And again, it is inside the bookings array

of the Eurowings object.

So let's recap what happened here.

So this time, we did actually

not call the book function ourselves.

Instead, we called the call method

and it's then this call method,

which will call the book function

with the this keyword set to eurowings.

So whatever we pass has the first argument

of the call method.

And so this allows us to manually

and explicitly set the this keyword

of any function that we want to call.

Then all the arguments after the first one

are simply the arguments of the original function.

And so in the case of the book function,

of course, that's the flight number

and the passenger name.

And of course, now we can do the same also for Lufthansa.

So book.call, this time with lufthansa

and let's book someone else on flight 239.

Let's say Mary Cooper

and let's log again the lufthansa object

but let's do it now here.

And indeed, the string that we get here

is completely correct

and in here, so in the Lufthansa bookings array,

we now have, of course, three bookings.

Okay?

And so that, of course, happened because this time,

we set the this keyword inside

of the function call to lufthansa.

And so now this here is again back to pointing to Lufthansa,

while before, right here,

it was being pointed to Eurowings, all right?

So even though the code of this function

is inside of the lufthansa object,

we made it so that the this keyword in here

pointed to eurowings.

So to this object, this new one right here, okay?

So we have a way now

of manually manipulating the this keyword

using the call method.

And of course, we could now keep going

and create more airlines into the Lufthansa Group,

like the Swiss Air Lines.

Air Lines.

Now, of course, these property names,

they all need to have the exact same format

as this original object here

because this method is trying to read just these properties.

So it's always iataCode

and bookings, as you see here, and airline.

And so of course,

we need to use exactly these property names here as well

but just like this,

we can now go ahead

and use our book function on the Swiss Air Line.

And so this time, we will set the this keyword

in the book.call to the swiss object.

583 and let's book another flight for Mary Cooper here.

And indeed, it worked again.

So here is the booking again.

Okay?

There's just some weird thing here

and so oh, actually here,

it needs to be airline as well.

So I was telling you you need to use the same property names

and I wasn't even doing it myself.

So it needs to be airline, just like it is here

and the same here too.

And now the string is, of course, correct here.

Okay.

Let me add a comment here.

Call method because in fact,

there is a similar method to the call method,

which is called the apply method.

And the apply method does basically exactly the same thing.

The only difference is that apply

does not receive a list of arguments

after the this keyword,

so it doesn't receive this list here

but instead, it's gonna take an array

of the arguments, okay?

And so it will then take the elements

from that array and pass it into the function.

So let's say

flightData,

so I'm just gonna create quickly an array here

with the flight number and the passenger name.

So book on the same flight George Cooper

and now we can use apply on the book function.

So apply.

And then just as here in the call method,

the first argument is the this keyword.

But now the second argument,

it needs to be as I just said an array of data.

So let's pass in the flightData array here.

But then let's just take a look.

I'll just take this one here actually.

And so indeed, here it worked again.

All right?

This apply method is not that used anymore

in modern JavaScript because now,

we actually have a better way of doing the exact same thing.

And do you know what I'm talking about?

So let me show it to you.

Book.call, so instead of using apply,

we can still use call,

again with swiss

and then we can simply use the spread operator

to take the data out of flightData

and basically put them here.

So this here is the same as this one.

And so right now, with modern JavaScript,

I prefer to just always use the call method

and then spread out the arguments from an array like this.

So again, this here is exactly the same as this.

So in summary, we now have yet another tool

in our toolbox here

and this one is one that allows us

to explicitly define the this keyword

in any function that we want.

But there is actually yet another method

which allows us to do the same thing

and that's the bind method.

It's more important actually

than the call and apply methods,

so I'm gonna leave it for the next lecture.