Jonas: In this lecture, and the next one,
we're gonna talk about function parameters.
So let's start with rest parameters
right in this lecture.
So, rest parameters allow us to pass
an arbitrary number of arguments into a function,
and to use these arguments in that function.
So in the last lecture, we've been looking
at the spread operator, right?
Now rest parameters look exactly the same,
but they are very different.
So they use the same notation with the three dots,
but actually rest parameters are the exact opposite
of the spread operator.
And that's because the spread operator
takes an array, and basically,
transforms it into single values,
while the rest parameters receive
a couple of single values
and transforms them into an array
when we call a function with multiple parameters.
Okay, but enough talking, let's now see
a practical example of this.
So suppose we want to create a function
that receives an arbitrary number of years,
and then prints to the console
whether each person corresponding to these years
is of full age or not.
And once more, I'm gonna start by doing it the ES5 way,
and then show you how the rest parameters work in ES6
making a life a bit easier.
So, in ES5 let's create a function called isFullAge5
okay, and in ES5, if we want to receive an undefined
number of arguments, then we simply don't define
any parameters for our function,
and then just use the arguments keyword
And remember the arguments keyword, or variable,
is very similar to the this variable
and it's a variable that each execution context
gets access to.
So let's first of all lock this argument's variable
to the console to see what it looks like.
And arguments.
Okay, so again, just like this, this is a special variable
that we have access to in all functions.
So let's say we want to call this function
with three years.
1990, 1999, and 1965.
So let's see what happens now in the console.
And now we have a small error here,
but that's simply because I forgot the five here, okay?
So again, and so this is the argument's variable.
And we see that it actually looks a bit similar
to an array, but in fact it is not an array.
So it simply says object here, and not array, right?
So all of the arrays have the array function constructure
as they're prototype.
Which is not the case here,
and so arguments is not an array.
We say that it's an array-like structure,
but it's not really an array.
So, if you wanna use it as an array,
for example, to loop through it,
then we need to first transform it to an array.
And we already know how to do that
with our little hack, right?
And so we say var argsArr
should be Array.prototype.slice
and then call it with the arguments.
Right, so that's what we did a couple lectures earlier.
So now we're ready to loop through this array.
And remember what we want to do here
is to calculate if each person is of full age.
So it's very simple.
We of course need to create a callback function here,
and we use current, and we wanna lock to the console.
So 2016, or the current year,
minus the current value
is greater or equal than 18.
And that's it.
So remember, the current is of course
the current element of the array.
And the array comes from the arguments,
so all of these numbers that we pass into the function,
which are, in this case, our years.
So with this, it's actually gonna work already.
So let's check, and yeah, so it does work.
So we have true, false, true.
So the first person is of full age,
this one born in 1999 is not,
and this one is of full age too.
So let's try it with a different number of arguments.
So I'm gonna add two more years here,
let's say 2016 and 1987,
and let's check it again.
And so, these are the first three coming from
this function call.
And these five here come of course from these.
So we have true, false, true again,
and then false, true.
So this person, of course, is not of full age,
and this one is.
And if you wanted to add 100 arguments here,
then it would work with 100 arguments of course.
So this is how we do it in ES5,
but let's now take a look at rest parameters in ES6.
So, ES6.
And we wanna write a similar function
but make use of rest parameters.
So isfullAge6
and now, instead of not having any arguments
we use the rest parameter operator.
And as I mentioned before,
it's the exact same as the spread operator.
So again we have the three dots.
And then we say the name of the variable.
And so, what this is gonna do
is as soon as we call the function,
it will transform the arguments,
for example, these three arguments or these five.
It will transform them into an array
and then pass it into this function.
And we can then access that years array
automatically in a function
and use it as we did before.
So let's do that now.
So let me first do exactly the same that we did before.
So I'm going to call the function.
And I'll show you what the years looks like.
Let's just deactivate this function call here
and take a look at this.
Alright, so, this is years,
and now we see that this actually an array.
So that is very handy, because now
we don't have to do all of this,
so we don't have to transform anything into an array
because we already have the array.
So now all we have to do
is to do that console log that we did before.
So we can say years.forEach
and here again we're going to use the arrow function
and say that we want 2016 minus the current year
and check if it's greater or equal to 18.
And here we go.
So this is the same function as before
but making use of rest parameters,
which makes our code shorter and easier to read.
And just to make sure that it works,
okay, nothing happened.
And that's of course because I forgot
to write the console log here.
So console.log of course,
and now it's gonna work.
So close it here, and alright.
So true, false, true.
And if we now add these numbers,
these years that we had before,
say 2016, 1987,
then of course it works the exact same way.
So the big difference between the spread operator
and the rest parameters
is actually the place in which we use each of them.
So the spread operator is used in the function call.
While the rest operator is used in the function declaration
to exact an arbitrary number of parameters.
So I hope that the difference between a spread operator
and rest parameters is now crystal clear to you.
So if it is, then let's take this one step further
and make the rest parameters even more useful, okay?
So, what I'm going to do now
is to comment out this code and copy it.
'Cause we're gonna do some changes here.
So let me just copy this
and put it back here.
Because now what we want to change
is to accept another parameter which will act
as the age limit.
So instead of having the 18 here,
we will pass a parameter which is going to tell us
at which age a person becomes full of age.
So imagine it would be 21 in some countries
then we would need the 21 here.
So we simply add a limit,
and now we need to add a parameter in here
because it's only one parameter
and it's one that we really know we need.
So we need one and only one limit here.
Now the problem is that this limit here
will also be part of the arguments, right?
So imagine that we now call this function
with, let's say 21 here as the limit.
Then this will obviously also be part
of the arguments keyword
which is not what we want, of course.
Because here, in this argument and in this array,
we actually only want years.
And how would we do that here in ES5,
it's actually pretty simple
because this slice method here can help us with that.
Because remember what the slice method here does,
is to allow us to cut a piece of an array.
So if we now simply add the number one
what this means, is that it's going to start cutting
at position number one.
Or basically, it will start to copy part of the array.
Or in other words, at position one it will start
to, let's say, to copy our array.
And so like this we can exclude the first argument.
So to make this more clear,
let's again take a look at the arguments.
And then let's console log
also the arguments array.
Okay, so we have 21, 1990, 1999, 1965,
which are all of the arguments that we pass.
And then our arguments array
is the same thing but without the 21.
And that's because we only started copying
at position number one.
So, in here, so, one, two and three.
So that's what the slice function does.
And so we can handle, let's say,
a usual parameter plus a number of arbitrary parameters
which are in case these three.
Then all we have to do, is to here
change it to limit.
And we're good to go.
So now we don't need this console.log anymore.
And so here we have true, false, true.
Such as we had before.
But now suppose that the age limit would be 16
then all of them would be of full age
so we had three times true.
So you see, adding an argument here to our ES5 function
makes it even more complicated.
But in ES6, it's nothing like that.
All we have to do is to add the limit,
and then here we have our rest parameters.
So this makes it very clear and very easy to use.
Because there's nothing we have to change.
So all we have to do, of course,
is to change this to a limit.
And now we're good to go.
And we could add as many parameters here as we wanted.
And then say with this part here
that here we have an undetermined number of arguments.
So if you now add 16 here
and get rid of this,
then we have true, true, true, true, false, true.
So it's different than before.
And of course it works.
So as you see by now many of the features of ES6
are simply allow us to do things
that we can already in ES5,
but in a much better, quicker, and easier way.
And this is, of course, one of these new features
that doesn't allow us to do anything really new,
but simply allows us to do something in a better way.
Alright, so let's now quickly move on
to the second lecture about parameters,
which is default parameters.