This content originally appeared on Go Make Things and was authored by Go Make Things
One of the more confusing aspects of modern JavaScript development is that both rest parameters and the spread operator use three dots as their operator (...).
Today, we’re going to look at what they both do, how they’re different, and how to tell them apart.
Let’s dig in!
The Spread Operator
The spread syntax operator takes an array or object (or other iterable) and expands its items into their own individual values.
let sandwiches = ['tuna', 'turkey', 'pb&j'];
// logs ["tuna", "turkey", "pb&j"]
console.log(sandwiches);
// logs tuna turkey pb&j
console.log(...sandwiches);
The spread operator can only be used inside of functions, arrays and objects. You cannot use it on its own.
This, for example, would throw an error.
// Uncaught SyntaxError: Unexpected token '...'
...sandwiches;
Here’s a demo of the spread operator.
Rest Parameters
A rest parameter is a function parameter that gets assigned an array with any arguments that are passed in at or after it when a function is called. You define a rest parameter by prefixing it with three dots (...).
In the example below, ...moreArgs is a rest parameter.
function logStuff (arg1, arg2, ...moreArgs) {
// Logs arg1
console.log(arg1);
// Logs arg2
console.log(arg2);
// Logs an array of any other arguments you pass in after arg2
console.log(moreArgs);
}
If you passed in more than two arguments, everything from the third argument and beyond is assigned to moreArgs as an array.
// In this example...
// arg1 = 'chicken'
// arg2 = 'tuna'
// moreArgs = ['chips', 'cookie', 'soda', 'delicious']
logStuff('chicken', 'tuna', 'chips', 'cookie', 'soda', 'delicious');
Here’s a demo of rest parameters.
You can use them together
Where things get really confusing is that you can use rest parameters and the spread operator together.
In the castSpells() function, we’ve declared a rest parameter, moreSpells.
function castSpells (mainSpell, ...moreSpells) {
console.log(mainSpell);
console.log(moreSpells);
}
Let’s imagine that you have an array of spells, like this.
let spells = ['Dancing teacups', 'You shall not pass', 'Talk to animals', 'Disappear', 'Fly'];
You could manually pass all of those spells into the castSpells() function, like this…
castSpells(spells[0], spells[1], spell[2], spell[3], spell[4]);
Or, you could use the spread operator to pass them all in as a comma-separated list.
castSpells(...spells);
Here’s a demo of spread and rest parameters together.
This can be a bit confusing, because you have a function and a parameter prefixed with three dots. Then, you’re calling the function with an argument prefixed with three dots.
How do you tell them apart?
There’s a simple trick for telling rest parameters and the spread operator apart.
If you’re declaring a function (either using a traditional function keyword or an arrow function), it’s a rest parameter.
// This is a rest parameter, because you're declaring a function
function castSpells (mainSpell, ...moreSpells) {
// ...
}
In any other context, it’s a spread operator.
// This is a spread operator, because we're running a function that's already declared
castSpells(...spells);
Get unlimited access to a JavaScript expert. If you're working on a critical project, I can help you reduce your risk and avoid costly delays caused by common mistakes. Learn more about consulting with me.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-10-17T14:30:00+00:00) Rest parameters vs. the spread operator in vanilla JavaScript. Retrieved from https://www.scien.cx/2022/10/17/rest-parameters-vs-the-spread-operator-in-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.