Original subtitles

Let's start this section about functions

with one of the easiest parts, which is default parameters.

And a new section means new starter files.

So as always, get yours from the Gitup repository and then

open them up in your VS Code.

So as always, we already start with strict mode here

but now let's talk about default parameters.

So sometimes it's useful to have functions where some

parameters are set by default. This way

we do not have to pass them in manually in case we don't

want to change the default.

Now in this section,

we're gonna to continue with the airline theme that we

started by the end of the last section.

And so let's now create a very basic booking function and

we're gonna to do that,

starting with the knowledge that we already had previously.

So without the default

parameters first,

so just a normal function and into this function,

we need to pass in the flight number,

the number of passengers

and the

price.

And then let's simply use this data to create an object and

push that into some bookings array.

So booking,

and now here we can use the enhanced object literal syntax

that we learned about in the previous section.

So we cannot create an object with a flight num property

without having to do this, remember?

So we simply defined a variable here and that will then

create a property with this name and also the value that's

in the variable.

And then let's just log it to a console.

And then let's just create an array out here which will

contain these bookings.

So we start empty here then we simply push them each

time there is a booking.

So basically for the airline to keep

the bookings in some kind of

system.

And this is all very fictional.

It's just to show you the default parameters in this case.

And speaking of that,

based on what we learned in the last section about

short circuiting, how would we implement default parameters?

Well,

let's start by calling this function without specifying some

parameters and see what we get then.

So create booking.

And now with just the flight number, let's say LH 123,

and now we need a new terminal as always.

So again, I hit tap here

to auto complete the operation.

And indeed here is our browser with our page already

running.

Now here's some kind of problem.

Oh, and that's because we called this booking here,

the same as the array.

And so here it is then trying to push this object into

itself basically.

So we need to create bookings here, giving it a new name.

And so indeed now we get here the result of this object,

and now it works.

And here we see the result of this booking object.

And so what we wanted to see here was that the numPassengers

and the price are set to undefined because we didn't specify

them.

And so now we can use short circuiting to our advantage

because we know that these are falsy values.

Okay.

And what I'm doing here is basically the old way of setting

default parameters,

just to remember how it would work before ES6.

So let's say I wanted to set the number of passengers to one

by default.

So basically we would reassign this parameter like this.

So numPassengers is numPassengers or one,

which is the default value.

And this works because of the reasons that we learned in the

last section, which is that whenever this is a falsy value,

which undefined is,

then the result of the

OR operator here will be this second operant.

So this value here in this case one,

and now we can do the same thing with the prize.

Let's say 199 is the default price.

And so if we reload this now,

then indeed we get our default values here.

Okay. So coming from this part of the code, however,

this is a lot of ugly boilerplate coat. And again,

this is the ES5 way of doing it.

So I will take this out.

Let me actually, write

ES5 here because now in ES6 there is a better way.

So all we have to do is to write this equals one.

And so now this here will be the default value

and the same for the price.

Let's say to 199.

And now if we reload, then we get the same result here.

And this here of course, looks a lot nicer and is

a lot more intuitive to read.

Now, of course we can override these defaults.

Otherwise this wouldn't make much sense.

So let's try

H 123, and now for

two passengers, and let's say 800.

And now of course these values are the ones that we

specified here instead of the default values.

Now,

one thing that's really cool about the default values is

that they can contain any expression.

For example, we could do *1.2, for example,

then we would get this here.

Okay.

But what's even more useful is that we can actually use the

values of the other parameters that were set before it.

So here we can now say that the price should be calculated

based on the number of passengers.

All right.

So if we now do this, create booking again,

just some random flat number here,

let's say again, two

but then with five, we will get another value.

So indeed you see 398.

So the number continues down here and then 995

And so the price is now dynamically calculated by default,

based on this value we specified and to the number of

passengers. And again,

this only works for parameters that are defined in the list

before this one.

So this would not work because JavaScript basically

specifies these parameters in orders and as it reaches.

So right now, as it reaches the price,

it doesn't know about the number of passengers yet.

And so that wouldn't work.

Now, another thing that's important to note here is that we

cannot skip arguments here when we called a function.

So for example,

let's say we wanted to leave the number of passengers as the

default value, but then specify the price.

So we cannot do this.

So skipping the number of passengers now,

and then only specifying a new price.

So if we do this,

then of course the number of passengers becomes a 1000

because the second argument here will always be mapped to

the second parameter.

So if we wanted to leave this one year at a default,

there is a nice trick.

So the number of passengers we can simply set to undefined,

alright,

and this works again because setting the parameter to

undefined,

it's the same thing as not even setting it, remember?

So when we don't set a parameter

so when we don't pass an argument into that parameter,

then it will take the value of undefined.

And so specifying undefined here is exactly the same.

And so this is how we basically skip a default parameter

that we want to leave at its default.

And so now, as I reload it here,

you see that number of passenger is still one.

And indeed the price is now, 1000.

Okay. So yet another very nice addition

to the language in ES6 here

and pretty straightforward to understand too.

So see you in the next video.