Jonas: 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.