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.