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.
Rest Parameter Documentation
Spread Operator Documentation
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 up