Original subtitles

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.