Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Rest parameters let you specify an unknown number of parameters. The spread operator lets you specify an unknown number of array properties. In this video we’ll demonstrate how this is helpful.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
ES2015 introduces rest parameters,
0:00
a feature that makes it easier to
pass parameters to a function.
0:03
And a spread operator that quickly
builds and manipulates arrays.
0:06
Rest parameters and spread operators
look similar because they share the same
0:10
three dot syntax, but both are quite
different when closely examined.
0:14
A rest parameter collects
the arguments passed to a function,
0:19
while a spread operator expands
an array or any type of expression.
0:23
So first,
let's look at what a rest parameter is.
0:28
You can follow along using the latest
workspace by opening the workspace for
0:31
this video.
0:34
The file rest-parameters.js has
a simple function named myFunction.
0:35
In myFunction there are two parameters,
name and params and
0:42
you'll notice that there are three
periods before the params parameter.
0:47
This is how you define
a rest parameter in ES2015.
0:53
Now params is just the name I used, you
can name the rest parameter anything you
0:56
want, as long as it has the three dots
in front of it, and the rest parameter
1:01
also needs to be the last parameter
defined in the function signature, so
1:06
you can place a rest parameter first.
1:11
So right below, will call myFunction, and
1:14
pass it the arguments, Andrew, 1, 2 and 3.
1:19
I'll save the file,
run it and the console and
1:27
I see Andrew, then an array of 1,2 and 3.
1:31
So the value for
1:36
the name parameter is Andrew and
you'll notice that the value for
1:38
params is an array containing the last
three arguments past to the function.
1:44
So the params parameter gathered the rest
of the arguments after name into an array.
1:51
That's why they are called
rest parameters.
1:58
So now, any time we pass a value for
params, so, for example, let's add 4,
2:00
and the string Ken,
If I run the file again in the console,
2:06
the rest parameter gathers and
adds to the argument into the array.
2:12
Now, if the functions only
parameter is a rest parameter.
2:19
So for example I'll delete the names
parameter, then console.log params only.
2:22
Once I run the file, notice how it creates
a single array out of all the arguments.
2:30
Next, let's take a look at
the spread operator and
2:36
see why it looks similar
to the rest parameter.
2:39
In the file, spread operator one.js.
2:42
The original flavors and
2:45
new flavors array are getting
combined with the inventory array.
2:47
So instead of using
the array.concant method.
2:53
To return a new array with
the combined flavors,
2:55
I'm using the spread operator,
which also consists of the three dots.
2:59
So with the spread operator, I'm passing
all the values of originalFlavors and
3:04
newFlavors to the inventory array
3:09
by pre pending the three
dots to the variable names.
3:12
And when I run the file in the console,
3:18
notice how it logs the full
inventory within the same array.
3:22
So what this means is that any value
that gets added to originalFlavors and
3:29
newFlavors gets place in inventory,
so for example up in originalFlavors.
3:34
We'll add the value tomato and
new flavors.
3:40
Let's add Superman and
if I run the file again in the console,
3:45
the operator takes the new
values from the arrays and
3:50
spreads them out into
the inventories array.
3:55
Next in the file spread operator two.js,
4:05
we'll create an example of how we can
split an array into single arguments,
4:08
then pass them to a function as separate
arguments using the spread operator.
4:13
So here, myFunction takes two arguments,
name and iceCreamFlavor.
4:18
And it logs a message to the console.
4:25
So right below if I create an array of
arguments, let's say, let args equals
4:27
the array Gabe, and Vanilla.
4:34
I can use the spread operator and
4:44
the function call to pass in all
arguments from the args array.
4:46
Now again, the array is stored
in the variable named args.
4:51
So I'll type dot, dot,
4:55
dot args, which passes the array
values as separate arguments.
4:57
So if I save my file and
run it in the console,
5:03
it logs the message Gabe really
likes Vanilla ice cream, cool.
5:08
The spread operator can also
be used in the destructuring,
5:12
which is what I'll be talking
about in the next video.
5:15
See you there.
5:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up