Create account

DEV Community

Understanding Rest Parameter Syntax

Laurie on August 20, 2019

Welcome to Rest parameter syntax. It's like the spread operator! 5 Uses for the Spread Operator Laur...

Read full post

Ken Bellows • Aug 20 '19 • Edited

Personally I like the dual use of the ... for rest and spread. They're sort of symmetric operations, and it strikes me as rather intuitive and elegant to use the same symbol, and one you understand the contexts in which they're used (which I think you've explained very well), it feels natural. But that's just me, I'd be interested to hear a counter perspective!

Laurie • Aug 20 '19

I think once you know them that's absolutely true. But I wouldn't call it intuitive just based on readability. I'm also of the camp that ... was a poor choice. I can make sense of it, but it doesn't invoke much. Perhaps a keyword may have been better.

George • Aug 20 '19 • Edited

Out of curiosity, why are you choosing to use

function(...[arg1, arg2, arg3]) { //... }

over

function({ arg1, arg2, arg3 }) { //... }

Is there any technical differences or is this just syntactical preference?

Laurie • Aug 20 '19

The first example is using the rest parameter, which is what the article is meant to explain.

The second example would not apply for the example above since it's only passing integers. It would work if the example looked like this though.

function testRest({ first }) {
  console.log(first);
}
testRest({ first: 1 });

However, the "infinite" number of arguments use case is not handled unless the arguments in question are already in an object and their key names are known. It's a very different piece of syntax.

Uli Troyo • Aug 20 '19

Good piece, thanks! I've known about the spread operator for a little while, but it hasn't yet made its way into my reach-for arsenal. I don't seem to remember to use it at the opportune times. Do you find there's a particular use case where it clicked for you?

Laurie • Aug 20 '19

Probably my most common use case is merging an array or object into something I'm defining. Like so:

const arr = [1,2,3,4]

const numbers = [...arr, 6,7,10]

Uli Troyo • Aug 20 '19

You said that it always creates an array, right? Would the result be [[1,2,3,4], 6,7,10]?

...Oh, nevermind, just tried it in the console! It flattens it; that makes a lot of sense!

Laurie • Aug 20 '19

Yup! Check out this post if you want that example specifically. It's essentially grabbing each element in the array and dropping it into a new array structure.

5 Uses for the Spread Operator

Laurie ・ Jul 10 ・ 3 min read

#javascript #webdev #productivity #learning

Jacob Evans • Aug 21 '19

Interesting! I have some ideas about use cases now. Definitely cleared up a couple of things.

Laurie • Aug 21 '19

Glad to hear it!

Laurie • Jun 18 '20

Yup, certainly good examples. I opted for function signature since that’s a pretty common use case. But “the rest of” is a great way to think about it.