Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Ecma 1
  • Overview
  • Transcript

2.2 The Spread Operator and Function Parameters

Another newcomer to the JavaScript spec in ES6 is the spread operator. Let's see how this new operator is used. We'll also take a look at rest parameters, which use the spread operator, and default parameters.

2.2 The Spread Operator and Function Parameters

Hi folks. In this lesson we can learn about a couple of new features with regard to function parameters, default parameters and rest parameters, as well as take a look at the new spread operator. Let's make a start with default parameters Default parameters are a way to specify a value for a parameter when that parameter isn't passed to the function during invocation. We specify the default value in the parameter list when defining a function. We use assignment within the functions parameter list to specify the default value for a parameter. When we invoke the function, if we don't pass a value or if we pass undefined, the default value will be used. If we do supply a value as the parameter, it will override the default. We need to compile this code using Babel. And we do that from the commandline. So let's just take a quick look at what comes out in the es5.js file. We can see that the es5 equivalent is a simple solution. You've probably used code like this yourself, right? Anyway, when we run the code we should see the logs that we expected to see but first of all we'll just need to switch back to using the AS5.js script file in the index.html page We can use default parameters within function expressions, as well as function declarations, and we can specify multiple default parameters, we can even use the default parameter of one parameter, as part of an expression for another default parameter. So let's change our example code, and add a second default parameter that makes use of the first one. We can update our log statements to make use of the new, something else parameter, and let's just make a change to the second invocation of our logSomething function. And let's just compile that down. And let's take a look in the browser. So we probably wouldn't need to do this in real code, but you can see the default parameters are visible to later parameters in the same parameter list. Now let's move on to look at the spread operator the spread operator can be used to expand an alterable object when multiple items are expected. The syntax is three consecutive dots, an ellipsis basically. We can use it within function calls, parameter lists, array literals and destructuring which will look at towards the end of the course If we want to pass an array to a function, but have each item in the array assigned to an individual argument, we can do that with the spread operator. So first of all, let's define a function that takes multiple arguments. And we'll just return the sum of the arguments. So now let's define an array. So to parse the items in the array to the sum function as individual items, we just need to parse the array in with the spread operator. So let's transpile this down. And let's get back to the browser now. And we see the answer six, which is what we expect. Good. So just to clarify then, if we pass in a ray without using the spread operator, something different will happen. In this case the first argument alone is the array, and the second and third arguments are both undefined. So we get a weird kind of string that is the concatenated version of all of these values. We can use these spread operator and array literals as well. And these will be expanded into individual items. So let's just log our array and see what comes out. So in the console we can see that we end up with a single dimensional array with six items in it instead of an array inside an array like we would without the spread operator. Let's just compare what would happen without the spread operator. In this case we see an array inside the array followed by the rest of the numerical items. We can also use the spread operator in a functions parameter list. And when we do this the arguments are received as a proper array rather than an array-like object like the arguments object. When we use the spread operator with a parameter, we create what's known as a rest parameter. Which represents an array containing an arbitrary number of items. We can now invoke this function with any number of string arguments and the function will join all of them together. In ES 5, we would have had to convert the argument subject into an array. Before being able the join method on it. But the spread itself inside the function as a true array. So we don't need to worry about converting arguments into an array. We can use a mixture of regular and rest parameters as well together if we wish. So in this lesson, we learned about some new ways of using function parameters in EF6. Default parameters and rest parameters. And we also learn about a new operator, the spread operator. And solve that to use rest parameters we actually need to use the spread operator. Default parameters are simply a way to specify a default value for a parameter In the parameter list of a function, when the function is invoked, if the parameter isn't passed, the default value will be passed instead. We saw that rest parameters are a way to use an arbitrary number of arguments passed to a function as a true array, rather than an array like object. Thanks for watching.

Back to the top