ES6+beginner
Spread and Rest Operators
The three-dot syntax that expands an iterable into individual elements (spread) or collects multiple elements into a single array (rest), depending on context.
The ... syntax does one of two opposite things depending on where it's used — spreading an iterable into individual elements, or resting (collecting) multiple elements into a single array — and telling the two apart from context is a common source of confusion.
Spread is like pouring an entire box's contents into a bigger box you're filling. Rest is the reverse: sweeping up whatever's left after everyone's grabbed their labeled item into one catch-all box.
Key Concepts
1
As a spread operator, ... expands an iterable into individual elements wherever multiple elements or arguments are expected: inside an array literal, inside a function call, or inside an object literal (spreading an object's own enumerable properties, with later spreads overwriting earlier ones on key collision).
2
As a rest operator, ... appears in a destructuring pattern or function parameter list, collecting remaining elements not matched by earlier patterns into a single new array. In array destructuring, rest collects everything after named elements; in a function's parameter list, it collects every argument beyond the named ones.
3
Both must be recognized by syntactic position — spread is used where a value is expected, rest is always the last element in its pattern or parameter list.