WEBVTT

1
00:00:00.490 --> 00:00:03.350
ES2015 introduces rest parameters,

2
00:00:03.350 --> 00:00:06.300
a feature that makes it easier to
pass parameters to a function.

3
00:00:06.300 --> 00:00:10.660
And a spread operator that quickly
builds and manipulates arrays.

4
00:00:10.660 --> 00:00:14.970
Rest parameters and spread operators
look similar because they share the same

5
00:00:14.970 --> 00:00:19.740
three dot syntax, but both are quite
different when closely examined.

6
00:00:19.740 --> 00:00:23.640
A rest parameter collects
the arguments passed to a function,

7
00:00:23.640 --> 00:00:28.150
while a spread operator expands
an array or any type of expression.

8
00:00:28.150 --> 00:00:31.580
So first,
let's look at what a rest parameter is.

9
00:00:31.580 --> 00:00:34.910
You can follow along using the latest
workspace by opening the workspace for

10
00:00:34.910 --> 00:00:35.448
this video.

11
00:00:35.448 --> 00:00:42.592
The file rest-parameters.js has
a simple function named myFunction.

12
00:00:42.592 --> 00:00:47.960
In myFunction there are two parameters,
name and params and

13
00:00:47.960 --> 00:00:53.230
you'll notice that there are three
periods before the params parameter.

14
00:00:53.230 --> 00:00:56.959
This is how you define
a rest parameter in ES2015.

15
00:00:56.959 --> 00:01:01.940
Now params is just the name I used, you
can name the rest parameter anything you

16
00:01:01.940 --> 00:01:06.696
want, as long as it has the three dots
in front of it, and the rest parameter

17
00:01:06.696 --> 00:01:11.379
also needs to be the last parameter
defined in the function signature, so

18
00:01:11.379 --> 00:01:14.720
you can place a rest parameter first.

19
00:01:14.720 --> 00:01:19.515
So right below, will call myFunction, and

20
00:01:19.515 --> 00:01:24.839
pass it the arguments, Andrew, 1, 2 and 3.

21
00:01:27.093 --> 00:01:31.945
I'll save the file,
run it and the console and

22
00:01:31.945 --> 00:01:36.680
I see Andrew, then an array of 1,2 and 3.

23
00:01:36.680 --> 00:01:38.580
So the value for

24
00:01:38.580 --> 00:01:44.105
the name parameter is Andrew and
you'll notice that the value for

25
00:01:44.105 --> 00:01:51.208
params is an array containing the last
three arguments past to the function.

26
00:01:51.208 --> 00:01:58.630
So the params parameter gathered the rest
of the arguments after name into an array.

27
00:01:58.630 --> 00:02:00.950
That's why they are called
rest parameters.

28
00:02:00.950 --> 00:02:06.626
So now, any time we pass a value for
params, so, for example, let's add 4,

29
00:02:06.626 --> 00:02:12.839
and the string Ken,
If I run the file again in the console,

30
00:02:12.839 --> 00:02:17.310
the rest parameter gathers and
adds to the argument into the array.

31
00:02:19.120 --> 00:02:22.770
Now, if the functions only
parameter is a rest parameter.

32
00:02:22.770 --> 00:02:29.110
So for example I'll delete the names
parameter, then console.log params only.

33
00:02:30.310 --> 00:02:35.319
Once I run the file, notice how it creates
a single array out of all the arguments.

34
00:02:36.410 --> 00:02:39.590
Next, let's take a look at
the spread operator and

35
00:02:39.590 --> 00:02:42.770
see why it looks similar
to the rest parameter.

36
00:02:42.770 --> 00:02:45.730
In the file, spread operator one.js.

37
00:02:45.730 --> 00:02:47.990
The original flavors and

38
00:02:47.990 --> 00:02:53.100
new flavors array are getting
combined with the inventory array.

39
00:02:53.100 --> 00:02:55.710
So instead of using
the array.concant method.

40
00:02:55.710 --> 00:02:59.420
To return a new array with
the combined flavors,

41
00:02:59.420 --> 00:03:04.020
I'm using the spread operator,
which also consists of the three dots.

42
00:03:04.020 --> 00:03:09.499
So with the spread operator, I'm passing
all the values of originalFlavors and

43
00:03:09.499 --> 00:03:12.800
newFlavors to the inventory array

44
00:03:12.800 --> 00:03:16.120
by pre pending the three
dots to the variable names.

45
00:03:18.250 --> 00:03:20.450
And when I run the file in the console,

46
00:03:22.170 --> 00:03:25.600
notice how it logs the full
inventory within the same array.

47
00:03:29.590 --> 00:03:34.810
So what this means is that any value
that gets added to originalFlavors and

48
00:03:34.810 --> 00:03:40.296
newFlavors gets place in inventory,
so for example up in originalFlavors.

49
00:03:40.296 --> 00:03:45.606
We'll add the value tomato and
new flavors.

50
00:03:45.606 --> 00:03:50.733
Let's add Superman and
if I run the file again in the console,

51
00:03:50.733 --> 00:03:55.073
the operator takes the new
values from the arrays and

52
00:03:55.073 --> 00:03:58.929
spreads them out into
the inventories array.

53
00:04:05.425 --> 00:04:08.168
Next in the file spread operator two.js,

54
00:04:08.168 --> 00:04:13.042
we'll create an example of how we can
split an array into single arguments,

55
00:04:13.042 --> 00:04:18.970
then pass them to a function as separate
arguments using the spread operator.

56
00:04:18.970 --> 00:04:25.380
So here, myFunction takes two arguments,
name and iceCreamFlavor.

57
00:04:25.380 --> 00:04:27.800
And it logs a message to the console.

58
00:04:27.800 --> 00:04:32.780
So right below if I create an array of
arguments, let's say, let args equals

59
00:04:34.390 --> 00:04:38.520
the array Gabe, and Vanilla.

60
00:04:44.130 --> 00:04:46.910
I can use the spread operator and

61
00:04:46.910 --> 00:04:51.700
the function call to pass in all
arguments from the args array.

62
00:04:51.700 --> 00:04:55.712
Now again, the array is stored
in the variable named args.

63
00:04:55.712 --> 00:04:57.800
So I'll type dot, dot,

64
00:04:57.800 --> 00:05:03.390
dot args, which passes the array
values as separate arguments.

65
00:05:03.390 --> 00:05:06.370
So if I save my file and
run it in the console,

66
00:05:08.210 --> 00:05:12.910
it logs the message Gabe really
likes Vanilla ice cream, cool.

67
00:05:12.910 --> 00:05:15.870
The spread operator can also
be used in the destructuring,

68
00:05:15.870 --> 00:05:18.360
which is what I'll be talking
about in the next video.

69
00:05:18.360 --> 00:05:18.860
See you there.