Original subtitles

So let's know, learn about the bind method.

And just like the call method,

bind also allows us to manually set this keywords

for any function call.

Now, the difference is that bind

does not immediately call the function.

Instead it returns a new function

where this keyword is bound.

So it's set to whatever value we pass into bind.

So let's continue with our airline example

from the previous lecture here.

And now let's say that we need to use the book function

for Eurowings all the time.

So, remember we have this Eurowings object

and then we used a book.call,

to use the book function

with Eurowings set to this keyword.

So that's what we did in the last lecture.

So let me just copy this code here.

But now, as I said,

we can use the bind method to create a new function

with the this keyword also set to Eurowings, all right?

So again, this will not call the book function.

Instead it will return a new function

where this keyword will always be set to Eurowings.

And so let's create a new function here called bookEW,

where its just a code of Eurowings.

All right?

And so now let's use this function.

So bookEW, Steven Williams

and we're missing the flight number here.

So 23.

And so as you see, this now looks

like the normal book function call again.

And that's because this function here

already has the this keyword set in stone basically.

And so here, of course, we no longer need to specify

to these keywords again.

So the signature here, so the name of the parameters

is back to being simply the flight number

and the passenger name, okay?

And so now again, we see that Steven booked a seat

on Eurowings flight EW23.

And so that worked perfectly.

Let's also of course, see at the object again.

So with all the bookings and indeed here is Steven Williams

in the flight that we just booked.

Great, so this is really, really useful.

And we could now of course go ahead and do the same

for all the airlines.

So creating one booking function for each of the airlines.

And this then makes it a little bit easier

to book a flight for each of the airlines,

if we have to do it multiple times.

So instead of having to use a call all the time,

we can just do bind once.

So defining the disk keyword once like this

and from there on, we can always use these functions.

.bind and this one, Swiss, all right?

Now, I'm not gonna use them all here now

because we already know how that works,

all right?

So this is great,

but we can actually take this even further.

So in the call method, we can pass multiple arguments here

besides this keywords, right?

And so in the bind method, we can actually do the same.

And then all of these arguments

will also be basically set in stone.

So they will be defined

and the function will then always be called

with these same arguments.

For example, we could use bind to create a function

for one specific airline and a specific flight number.

So let's say, bookEW, just like we had here,

but then really specific, only for flight 23.

So that would be book.bind

and then of course we have to again, define Eurowings,

but then we can start to finding the list of arguments

or the list of parameters

and setting the first one to 23, okay?

And so if we look at our bind function now,

remember that it needs the flight number and the name.

But now in our bookEW23 function,

it is as if this first argument was already set.

And so all remaining function now only need the name.

So this function,

this one now only needs the name,

because the number was already preset here

in the bind method.

So, let's see.

So, our newly created function bookEW23,

and let's now book a flight for myself.

And let's book a flight for Martha,

let's say, Cooper.

And, yeah, let's check out our output here.

And so these are the two.

And indeed both of them are for Eurowings flight EW23,

all right?

And so that's exactly what we were expecting.

Again, because we preset that 23 right here.

If we preset this here

to one, two, three, four, five,

then of course, both of these new flights here

would be booked onto that flight number, okay?

So this allows us to set in stone, certain arguments.

And so this function, the resulting function,

then becomes even simpler.

So right now all we need to pass in

is the passenger name, right?

And then everything else basically happens automatically.

And taking this even further,

we could even define, have the passenger name here

for example, like this.

And then this function would always book a flight for Jonas

on flight 23.

But that would probably take it a little bit too far now.

And I deleted the 23 here,

of course, I didn't want that.

So this is correct.

And by the way, what we did here,

so, basically specifying parts of the argument beforehand,

is actually a common pattern called partial application.

So essentially, partial application

means that a part of the arguments

of the original function are already applied,

so which means, already set.

And so that's exactly what the bookEW23 function is, right?

It's essentially the book function

but with 23 already predefined.

Great.

So, hopefully this was a nice example for you to understand

the call apply and bind methods,

but there are also other situations

in which we can use the bind method

and where it is very useful.

And one example of that is when we use objects together

with event listeners.

So let's write that here actually,

with event listeners.

And so now this button here

will finally come into play.

And maybe you've been wondering about that.

But let's start by adding a new property

only to the Lufthansa object

and let's set it to 300.

So meaning that this company has 300 planes.

And then we also add a new method

only to the Lufthansa object,

which is to buy a new plane.

So function,

and now what we want to do is, this.planes++.

So essentially we want to add a new plane,

whenever we click on this button.

So eventually that's what we will want to do.

And then let's also log this.planes to the console.

And probably we should also log this keywords

to the console as well.

And now let's actually attach our event handler

to this element,

let's inspect it here, okay?

It should need to go to elements.

So, this is the button here

and it has the class, buy.

So document.queryselector.buy,

addEventListener for click.

And then the second argument,

as you already know, is the handler function.

So addEventListener here is the higher order function

which receives a callback function.

And so that should be lufthansa.buyPlane, all right?

So essentially, this function here

is what we want to happen,

which again takes the current number of planes

and increases it by one.

So let's do that.

And now as I click on this button, let's see what happens.

And we get not a number here.

So this .Planes is now not a number.

And the reason for that is that this keyword

is this button element, okay?

And do you know why that is?

Well, in one of the theory lectures,

we learned that in an event handler function,

that this keyword always points to the element

on which that handler is attached to.

So, this is the handler function, right?

And so it is attached to this element,

so to this button.

And therefore, inside of the handler function

or the event listener, it doesn't really matter.

But inside of this function,

this keyword will point to the button element.

And so that's why this keyword here

returns this button, okay?

So here you have yet another proof

that this keyword really is set dynamically.

Because if we simply called a Lufthansa.buyPlane out here,

then of course, this keyword would be Lufthansa,

so this object, right?

Because that's the object calling the function.

But in this case it is of course,

this event listener function calling this function.

And so therefore, the button itself

will then become this keyword, okay?

Here we now see the results

of calling this function out here.

And so now we started with 300

and it was increased just as we wanted it to be.

So let's take this out here

and let's go back to clicking here

to see the result we had before.

So that's this button.

Now, of course, in this handler function here,

we still need this keyword to point

to the Lufthansa object itself, right?

Otherwise this logic here will not work.

So what this means is that we need to manually define

to this keyword right here.

So right here.

Now, how should we do that?

Should we use the call method or the bind method?

Well, we need to pass in a function here

and not to call it.

And so we already know that the call method

calls the function.

And so that's not what we need.

And so therefore, we use bind.

Because we already know that bind

is gonna return a new function.

And so this keyword should be Lufthansa,

and so that's exactly what we define, okay?

And now as we click here we should see the Lufthansa object

being this keywords.

Indeed, and that's now exactly what we got here.

So that's the result of this line of code.

And so again, this now points to Lufthansa,

because that's what we told JavaScript to do right here.

And so indeed now the number of planes

is increasing each time that we click on this button.

Great, so we have our problem solved.

And in fact, we will do this a couple more times

throughout the course.

So this one is an important one.

And in general, the bind method

is something you really need to understand, all right?

Now, just one final example here,

which is again, gonna be about partial application,

because this is another big use case for the bind method.

And in this case of partial application,

many times we are not even interested in this keywords,

but we still use bind for this, all right?

Now, remember that partial application

means that we can preset parameters, all right?

So let's start by creating a general function

which adds a tax to some value.

So let's start with the tax rate and then the value itself.

And let's write an arrow function here.

And so this works by doing

value + value * the tax rate, right?

So imagine that the tax rate would be 10%

and the value 100.

And so adding the tax to 100 would be 110.

Well, let's actually do 200 to make it a bit more clear.

And of course we need to call the function here itself,

okay?

So now 10% of 200 is 20,

and so the results should be 220 and that didn't work.

And yeah, that's because we need to define this here

as a decimal number here of course.

So only then this rate here can make sense, okay?

So 220 now.

So this here is the general function for adding tax.

But now let's say that there is one tax

that we use all the time.

And so let's create a function for that.

So for example, here in Portugal,

the VAT, which is value added tax, is 23%.

And so we can now use the bind function

on this function and preset the rate always,

so that it always will be this 23%.

And then we have a function

which only calculates the VAT

for whatever value we pass into it.

So, addTax.bind

and then the first argument of bind

is this keywords, remember?

But in this case, we don't care

about the this keyword at all.

It's not even here in the function.

And so, we just say, null.

It could be any other value

because nothing will happen with it,

but it's kind of a standard to just use null.

And now we can set the rate here.

So let's preset it to 23%,

so 0.23, all right?

And so this sets the rate value here in stone.

So essentially, this would be the same

as writing...

Let's paste it here.

So this must be, addVAT equals,

and the rate is preset to 0.23.

So this is essentially what our addVAT function

now looks like, okay?

So, because we already set 0.23 in stone.

So, now we can start using that.

So this should be 123 and it is.

We can use anything we want now like 23

and so on and so forth.

So I hope this makes sense.

When you want to do this yourself,

just keep in mind that the order of the arguments then

is important.

If you want it to preset the rate,

then it has to be the first argument in this function.

Otherwise, this will not really work here, okay?

Now you could argue that what we just did here

could easily have been done with default parameters.

But this is actually different,

because this here is creating a brand new,

simply, more specific function

based on a more general function,

which is the addTax function.

And of course, the example here

could be a lot more complex too, right?

So this really is different

because using binds,

actually it really gives us a new function.

So, it's as if we returned a new specific function

from the addTax function.

And actually now I have a nice challenge for you

which is to essentially rewrite this whole example here,

but using the technique of one function

returning another function.

So we have one lecture about that

and maybe you can go back and take a look at that.

And then I want you to essentially,

create a function that can return a function

which will do just what this one does.

So that's probably really challenging.

So don't beat yourself up if you cannot do it.

I know it is a challenge,

but you can still try to take a minute or two

and, yeah, really try it.

If you can't do it,

then just watch the solution in a minute, okay?

Just don't use bind of course,

because with that we already have the solution.

So use the technique that I showed you earlier

with the grid function, remember?

And so here you can do something similar.

So, see you in a second with the solution.

Alright.

I hope you tried that out.

And here is how I would have done it.

So, the first function here,

I'm gonna call it addTaxRate.

And I could do this with the arrow functions,

but then that looks really confusing.

So let's just focus on the functionality here.

So this is the first function which only receives the rate.

So similar to what we did here.

And then what it does is to return a new function.

And then this new function

is the one that takes in the value.

And it will then return just as the other function,

value + value * the rate, okay?

And so now based on this one,

we could create addVAT2.

And so that would be, addTaxRate

and then call it with 0.23.

And then let's just do the same

to see if the results are the same.

So, VAT2, and two, give it a try and here you go.

So the results are the same.

And so this addVAT2 is the same function as this one.

So just to recap, we created this function,

which then returns this one.

So the first one is the one that needs the rate,

because the rate is also what we used

to define this addVAT function here, right?

And so the resulting function

is then the one who takes in the value.

And that's why we have value here in the inner function too.

Now this is just another way of doing the same thing

and this is already pretty advanced stuff really.

So, absolutely don't be upset

if you didn't do this by yourself.

But anyway, in the next video

we have coding challenge number one

of this section coming up.

And so I hope to see you there very soon.