All right, then.
So throughout this course so far, we've looked at quite a lot of S6 and S7 features, and by that I
mean modern features there in the S6 and S7 specification.
So these features are things like let and const promises async and await arrow functions, classes,
destructuring, etcetera.
But there's a few other modern features I still want to tell you about.
It's just that they didn't naturally fit into any of the other sections of the course.
So I'm going to do this chapter to cover the rest of the modern features I'd like to tell you about
in this course.
So the first one of those, or rather the first two of those features that I want to talk about is the
rest parameter and the spread syntax.
So first of all, the rest parameter, what does that do?
Well, this allows us to bundle up arguments inside a function into a single array parameter.
So the best way to understand this is by an example.
So I'll do that.
I'm going to create a function here and I'm going to call it double because what it's going to do is
take in a series of numbers and then it's going to spit out an array with those numbers doubled.
So let's create the function inside the function.
We're going to eventually do something here.
But first of all, we need to take some numbers in.
Now.
We could say something like num one, number two, num, three, etcetera, depending on how many different
parameters we want to take in.
But what if we don't know how many different parameters we want?
What if we want to call the double function and pass either three numbers in sometimes or ten numbers
in sometimes or 20?
Then we don't know how many parameters to specify right here.
So a way around this would be to use the rest parameter.
Now the rest parameter looks like this.
Three little dots.
Then we just call it something.
So nums.
And what that does is take all the arguments that we pass into the function when we call it, and it
bundles them up into a single array parameter.
So let me show you this.
If I now say const results is equal to double, and then we're going to pass some numbers in so I can
say 135792468, whatever.
Then what we can do is take all of those in all of these different arguments as a single parameter,
which is now going to be an array.
So now if I go down here and I say console dot log nums, then what this does is take all of these numbers
that we pass in and it's going to bundle it into an array called Nums.
So now if we save this and see in the browser, we can see that this is now an array of arguments.
So that's really useful when we don't know how many different arguments we're going to pass in and we
want to bundle them up into a single array.
We just place three dots before whatever we call the parameter, and then that parameter is going to
be an array of arguments.
So that's quite useful.
So now what we could do is instead return something down here.
I'm going to return a new array and I'll do nums dot maps.
So we're mapping this to an array.
We're taking one array right here and mapping it to a new one, and the function is going to take each
number inside and return num times two because that is doubling them.
So that's going to create a new array of numbers which are now doubled.
And if we now console dot log result.
Down here, which is the result of this function.
Then we should see that array with numbers doubled inside.
So let me save this and preview.
And we can see now all the numbers have doubled.
Awesome.
So that is the rest parameter for you.
You put three dots in front of whatever you want to call a parameter, which will be an array of arguments
that we pass in.
Okay, so that's the rest parameter.
Now spread syntax is pretty similar, but it kind of works the opposite way.
We still use the three dots right here, but we use the spread syntax to spread out an array into its
individual components.
So for example, let me create now a constant so const people and set this equal to just a simple array
of strings.
So we'll say Sean Ryu And we'll also say Crystal now that if I say now.
Console dot log and then dot, dot, dot people.
What this does is actually spread this array out into its individual components.
So we'll see three individual things now, Sean Ryu and Krystal, So they're no longer inside an array.
We've spread them out and that's kind of what's happening here.
We're taking in an already spread out version of arguments and then right here, because we're saying
that we're taking them in as a spread out version of an array, then what it does when we just say Nums
is it takes the array that's not spread out.
So it essentially does the opposite thing.
It puts them back into an array.
Right here, we're kind of doing the opposite.
We're taking an array and we're putting three dots in front of that array to spread it out.
So a good use case of this would be when we want to take the elements of one array and spread them into
another array.
So for example, I could say const members is equal to an array and say we have a couple of different
people in this array.
Mario and Sean Lee.
ET cetera.
But then also I want to put all of the people in this array into here as well.
Well, I could just say dot, dot, dot people and that will spread this array into this.
So it will just unpack the array and put each element of this array into this array as well.
So now if I say console dot log members and save this, then we can see we get these three additional
people in the array when we use the spread syntax.
Okay.
So that's when we use it with arrays.
Now I also want to show you how we can use the spread syntax with objects is very similar.
So say I have a constant called person and set this equal to an object.
Inside this object I want a name property.
We'll just say Sean, I also want an age property.
We'll just say 30 and we'll say the job is going to be Net ninja.
All right.
So now if I come down here and say, okay, I want a clone of this person, Now remember, if I say
something like this person clone is equal to person, then that's not actually going to create a new
object.
Remember, because objects are a reference type.
And all this does is create a new pointer which is pointing to the same object.
So this doesn't make a clone of the object.
However, what I could do is make a brand new object.
So now I'm not saying just copy this and make a new pointer.
I'm making a brand new object.
Now what I could do is say dot, dot, dot person and that is going to take whatever is in this object
and spread those properties out into this new object.
So now I am actually making a full copy of the object, not just a copy of the pointer.
So if I was to now come down here and say console, dot log person clone, then we'll see this object.
We can see it's identical right here.
So now I could also, if I wanted to add other properties onto this, I could say location and put that
to Manchester and save it and that's absolutely fine as well.
So this is a good way of creating a brand new copy of another object.
And there we go, my friends.
That is how to use the rest parameter to bundle different arguments into an array and also how to use
the spread syntax to do the opposite.
Take an array or an object and unpack that into its individual components.
