Narrator: Moving on let's now talk about the rest pattern
and also rest parameters
and the rest pattern looks exactly like the spread operator.
So it has the same syntax with the three dots
but it actually does the opposite of the spread operator.
Now that doesn't seem to make much sense, right?
But let me explain, so remember
that we used the spread operator to build new arrays
or to pass multiple values into a function.
So those are the two use cases of the spread operator
and in both cases, we use the spread operator
to expand an array into individual elements.
Now, the rest pattern uses the exact same syntax
however, to collect multiple elements
and condense them into an array.
so that's really the opposite of spread
The spread operator is to unpack an array
while rest is to pack elements into an array
and since that sounds really confusing
let's write some coat and let's start by exploring
the use case of building a race.
So just to recap in the last lecture
we use to spread array like this.
So we wanted to create a new array
based on an existing, array
and so we used the spread operator to expand that.
So here we are still using the spread syntax
and we know that this is the spread syntax
because we are using it on the right hand side
of the assignment operator, so of the equal sign.
So let me actually write that here,
spread, because on the right side of the assignment operator
however, we can also use it on the left hand side
of the assignment operator together with destructuring.
So now we're mixing kind of everything together here
but bear with me here.
So let's say that we are destructuring this array
so let me first write the array here
two, three, four, and five
and so let's say I want to take the first element
and store it in variable A
the second element to store in variable B
and now I can here use the rest pattern.
So the same syntax and now let's call this others
and so here it is the rest syntax
because it's on the left hand side
of the assignment operator,
first write that and then see result
because on left side of the equal sign
and so now let's log A, B
and the others, whatever that's gonna be
and so one, two and then basically the rest
of the elements that we did not select
into the A and the B variables.
So what is happening here?
Well, just like before
the first and the second elements become this first
and second variables, but then here comes the rest pattern
and so it's called rest because it will take
the rest of the elements.
So the remaining elements of the array
and then put them into a new array
and in this case, we call this array others.
So as I said in the beginning,
the rest pattern basically collects
the elements that are unused
in the destructuring assignment.
So let's see another example here
and this will show you that we can actually use
the three dots on both sides of the assignment operator.
So let's say that we have this array
which will be the entire menu
and so we already know how to build that
using the spread operator.
So we go to restaurant dot main menu
so that's dot
so we take all the elements out of that array
and put it into a new array
and then into this new array
we also put the starter menu, okay?
So this is going to be an array, a big array
with all the entire menu, but now
we can actually also use the rest pattern here
and so again, we do that here on the left hand side
while we are doing destructuring.
So let's take a look here at the main menu
so, let's say that we want to take the pizza
and the risotto, okay?
So that's the first and the third
so let's create a variable called pizza
then we can skip one variable remember,
so leaving a hole there in the destructuring assignment
then let's call one variable risotto
and then simply put all the other food well
into an array called other food
and now let's simply log everything here
to the console,
All right, so we get indeed the string pizza
the string risotto
and then all the rest of the elements
that we didn't select previously into their own variables
and note here that the rest syntax collects
all the array after the last variable.
So in this case here risotto
so it does not include any skipped elements
so it's really just the rest of the elements
and yeah again, as I said,
it does not include any skipped elements
and so for that reason,
the rest pattern always must be the lest
in the destructuring assignment
because otherwise how will JavaScript know
until when it should collect the rest of the array, right?
So for example, we could not do this
so the error message is actually very explicit
so the rest element must be the last element.
All right, and also for the same reason
there can only ever be one rest
in any destructuring assignment, okay
and now let's do the same in objects
because it also works indeed in objects.
So the difference then of course,
is that the remaining elements will be collected
into a new object and not into a new array.
So let's not work here with our opening hours
and let's say that we want to select only Saturday here
and then the rest should go into a new object
which are the weekdays.
So Saturday is weekend
and Friday and Thursday are the weekdays
and so basically we want to create an object
only with these two.
So only for the week days and now that is easy to do
all we need to do is to basically take out a Saturday
into its own variable
and then we simply collect the rest into a new object
and this we can call weekdays, okay?
And then here, of course the object
that we are, destructuring dot opening hours
and now let's take a look at our weekdays here
and indeed it is exactly what we were expecting.
It is an object only containing Friday and Thursday
and again, that's because we already took Saturday
into its own variable before
and so this then collected the rest of the properties
into its own new object.
Great, so now we know how the rest pattern
works to collect elements in a destructuring assignment
and actually let's write that here.
So this whole first part is for destructuring
and then the second part will be about functions basically.
So, remember that also for the spread operator
the second use case was to pass multiple arguments
into a function all at the same time.
So that's exactly what we did here
in our real example, with this ingredients array, right?
So we had an array
and then we expanded all of these elements of the array
to basically pass these elements then
as individual arguments of the function
and so now, as you can guess
the rest operator can basically do the opposite
and so let's now write an example, function for debt.
So I'm gonna call it add
and so in a real adding function
we wanna take an arbitrary amount of arguments
and simply add all of them together, right?
So function and for now, let's just leave it like this
and so let me illustrate
how we want to call this function, actually.
So we want to be able to do for example,
this two and three, it would give us five
but then we also might want to be able to do this
five and three and seven and two, for example.
So again, any arbitrary amount of arguments
should work for this function
so something like this, for example,
but of course we're not gonna specify
like seven arguments here, right?
So how can we do that?
Well, we will use the rest pattern
and in this case, it is actually called rest parameters.
So let's use the rest syntax
and then let's call this argument numbers
and then log this numbers to the console.
So this function is gonna be called three times
and so we are expecting three results here
and what we see here is three race
with all the arguments that we passed into the functions
but they are indeed a race
and so now once again, as I said in the beginning
the rest syntax is taking multiple numbers
or multiple values and then packs them all into one array.
So, once more it is doing the opposite
of the spread operator
so with the spread operator we expand
with the rest syntax we compress
so here it's called rest arguments, okay?
And now we can write some simple logic here
to actually add all the numbers together.
I believe we already did that.
So here is our sum variable that's gonna be accumulating
then let's write a simple for loop
and you could also do this year as a challenge
if you want it
but anyway, I will just do it right away.
So we know that numbers is an array
and so we can take the length of that array
and run this loop
as long as the counter is below the length of the array
and in each iteration we simply add the current number
to the current sum value basically.
So I'm writing this really fast
because we already did this before, all right?
And so this should be nothing new at this point
and now to finish we can log this sum to the console
to get some results
and indeed this year is now five
and so this is at this point a working function
which can accept any number of parameters
and hopefully your not confused yet by this
and now I want to take it even to the next level.
So let's create yet another array let's just call it X
because it's not important
and I will put in numbers 23 and let's say five and seven.
So now if we wanted to take these values here
and call the add function
with these three values, how would we do that?
Well, simply enough
we simply use the spread operator and that's it
and so this is exactly what we learned
in the previous lecture.
So we're taking all the numbers of the array
and spreading them here
and so this would be the same as writing manually
23, five and seven
and so this is a good example of showing you
how spread is the opposite of rest
because after these numbers being spread here
they will then enter this add function here
and then they will immediately be collected
into this numbers array by the rest parameters, okay?
So here we unpacked the values
and here pack them back again into an array
and you could actually be wondering
why we are not simply writing an add function
which takes an array as an argument
and then we don't need all of this.
Well, it's way better to do it like this
because then the function can accept both an array
basically by doing this
and simply all the single values like this
and also it feels a little bit more natural
to simply pass as many arguments as we want to add together
into the function.
So without having to deal with arrays if we don't want to
and so this rest parameters is something
that you will see all the time
in modern JavaScript code basis.
Okay, and now just to finish this
let's actually use rest parameters
in our restaurant example here also to see some edge cases.
So let's add yet another method here
and this time to method is gonna be about ordering pizza.
So order pizza
and now pizzas need to have at least one ingredient
but the other ingredients are optional
and for this rest parameters are perfect.
So let's say main ingredient and then the other ingredients
and then this is gonna work a little bit
like destructuring again where
this here basically we'll collect all of the rest
of the arguments into an array.
So let's see that so main ingredient
and that's logged the other ingredients, okay?
And so now let's order pizza
so restaurants thought order pizza
and now here we specify our ingredients.
So let's say mushrooms, onion, olives and spinach
so a nice vegetarian pizza right here
and so you see we can specify as many arguments
as we want it, let's save this
and do you see down here immediately
that we get mushrooms, which is this first ingredient here
and then we get an array
of all the remaining ingredients that we passed in
and so this of course is the result of the rest arguments.
So, again the first argument was stored
into this main argument here
and then all the remaining arguments that were passed
in were simply stored into this array
by the rest parameter of syntax, okay?
And of course we could also simply define just one.
So let's order now a pizza with only mushrooms
then the remaining arguments here will simply be put
in an empty array because of course there are none
and so there is nothing to collect into the array
but we still get an empty array
that we can work with if we want.
So in that function, we could now create some logic
like to create a string based on all of these ingredients.
But I am not gonna go into that right now
but if you wanna have some fun
then feel of course free to do that by yourself.
Anyway the take away from this example is that
once again the rest parameters serves to collect
all of the remaining basically unused parameters
that were not used in this parameter.
All right, so let's recap
after yet another quiet, long lecture here.
So, the spread and rests syntax
both look exactly the same
but they work in opposite ways
depending on where they are used.
So the spread operator is used
where we would otherwise write values, separated by a comma.
On the other hand the rest pattern is basically used
where we would otherwise write variable names
separated by commas.
So, again the rest pattern can be used
where we would write variable names, separated by commas
and not values separated by commas.
So it's a subtle distinction, but this is how you know
when and where to use spread and rest.