https://2ality.com/2022/05/rest-vs-spread.html

Black lives matter
2ality - JavaScript and more
About | Donate | Subscribe | Search | Archive | Books
Portrait Dr. Axel Rauschmayer
Dr. Axel Rauschmayer
Homepage | Twitter
Cover of book "JavaScript for impatient programmers"
Book, exercises, quizzes
(free to read online)
Cover of book "Deep JavaScript"
Book (50% free online)
Cover of book "Tackling TypeScript"
Book (first part free online)
Logo of newsletter "ES.next news"
Newsletter (free)

The triple dot syntax (...) in JavaScript: rest vs. spread

[2022-05-04] dev, javascript
(Ad, please don't block)

In JavaScript, the same syntax - triple dots (...) - is used for two
different mechanisms:

  * Rest syntax is for receiving data.
  * Spreading is for sending data.

This blog post examines how these mechanisms work and why they are
not operators.

---------------------------------------------------------------------

Table of contents:

  * Receiving data: rest syntax  
  * Sending data: spreading  
  * Rest and spread are not operators  
  * Further reading (use cases etc.)  

---------------------------------------------------------------------

Receiving data: rest syntax  #

A rest parameter is a special kind of parameter that receives all
remaining arguments of a function call via an Array:

> function myFunc(first, ...remaining) { return {first,remaining} }
> myFunc('a', 'b', 'c')
{ first: 'a', remaining: [ 'b', 'c' ] }

We can also use rest syntax in Array-destructuring:

> const [head, ...tail] = ['a', 'b', 'c'];
> head
'a'
> tail
[ 'b', 'c' ]

And we can use it in object-destructuring:

> const {first: f, ...remaining} = {first: 'Jane', last: 'Doe', age: 43};
> f
'Jane'
> remaining
{ last: 'Doe', age: 43 }

Sending data: spreading  #

Spreading into a function call turns Array elements into function
call arguments.

> function returnArgArray(...args) { return args }
> returnArgArray(...['x', 'y', 'z'])
[ 'x', 'y', 'z' ]

We can also spread Arrays into Array literals:

> [...['a', 'b'], 'c']
[ 'a', 'b', 'c' ]

And we can spread objects into object literals:

> {...{a:1, b:2}, c:3}
{ a: 1, b: 2, c: 3 }

Rest and spread are not operators  #

Operators such as + or await are used to write independent
expressions that evaluate to values. Those expressions can be used in
many contexts.

In contrast, rest and spread are part of their surroundings. That's
why they shouldn't be called operators:

  * Rest syntax: rest parameters (function definitions), rest
    elements (Array-destructuring), rest properties
    (object-destructuring)
  * With spreading, I usually say: "spreading into ..." (function
    calls, Array literals, object literals).

Further reading (use cases etc.)  #

Rest syntax:

  * Rest parameters
  * Destructuring via rest elements
  * Destructuring via rest properties

Spreading:

  * Spreading into function calls
  * Spreading into Array literals
  * Spreading into object literals

---------------------------------------------------------------------
Please enable JavaScript to view the comments powered by Disqus.