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.