LaurieWelcome to Rest parameter syntax. It's like the spread operator!
...except not.
I want to say upfront that I'm not justifying the repeated use of the ... symbol in the JavaScript language. But hopefully, this post will help you understand how spread and rest are different yet similar.
The use case for rest
Let's say that you want to pass in an unknown number of arguments to a function. That's when you want to use the rest parameter!
function testRest(arg1, arg2, ...otherArgs) {
console.log(arg1) // 1
console.log(arg2) // 2
console.log(otherArgs) // [3, 4, 5]
}
testRest(1, 2, 3, 4, 5)
In this example arg1 and arg2 are passed through as expected, then all of the additional arguments are added to the otherArgs array.
One of the benefits is that otherArgs is truly an array. That means all of your array functions are available.
You can look at the number of arguments inside of it.
function testRest(arg1, arg2, ...otherArgs) {
const numOfArgs = otherArgs.length() // 3
}
testRest(1, 2, 3, 4, 5)
You can also manipulate it using array prototype functions. map, filter, reduce, flat, etc.
Single Extra Argument
One thing to keep in mind is that otherArgs will always create an array. That means that a single argument will be wrapped in an array.
function testRest(arg1, arg2, ...otherArgs) {
console.log(arg1) // 1
console.log(arg2) // 2
console.log(otherArgs) // [3]
}
testRest(1, 2, 3)
Additionally, not including any additional arguments will result in an empty array.
function testRest(arg1, arg2, ...otherArgs) {
console.log(arg1) // 1
console.log(arg2) // 2
console.log(otherArgs) // []
}
testRest(1, 2)
Remember destructuring?
If you need a quick refresh on destructuring assignment check out this post.
As it turns out, you can use destructuring and the rest parameter together.
function testRest(...[first, second, third]) {
console.log(first) // 1
console.log(second) // 2
console.log(third) // 3
}
testRest(1, 2, 3)
Keep in mind that destructuring expects the arguments to be there. If you break that contract, you should know what to expect.
If you don't include a destructured expected argument, it will result in an undefined reference.
function testRest(...[first, second, third]) {
console.log(first) // 1
console.log(second) // 2
console.log(third) // undefined
}
testRest(1, 2)
If you include an argument beyond what you've destructured, that argument will be dropped.
function testRest(...[first, second, third]) {
console.log(first) // 1
console.log(second) // 2
console.log(third) // 3
// 4 is not destructured
}
testRest(1, 2, 3, 4)
Conclusion
And there you have it! As you can see in the examples above the main difference between rest and spread is location.
Spread syntax can appear inside a function or when calling the function. Rest parameter syntax is limited to the function signature itself. Keep that in mind if you're trying to determine which is being used.
Hope this helped you understand the concepts better.
As always, if you're interested in concepts like this one, check out some of these posts:
