Spread syntax doesn't work to destructive an array

Question

I am new to Javascript and is confused why the following won't work?

var array = [1, 2, 3, 4]
var spread = ...array;

I was expecting it would become 1, 2, 3, 4. Instead, it gave an error message Unexpected token .... Can anyone explain this to me?

Thank you so much!

score 3 · Accepted Answer · answered Mar 05 '18 at 14:15

3

This is the correct way, however you're not gaining anything doing that.

var array = [1, 2, 3, 4]
var spread = [...array];
console.log(spread);

If you really want to destructure that array, you need destructuring assignment:

var array = [1, 2, 3, 4]
var [one, two, three, four] = array;

console.log(one, two, three, four);

answered Mar 05 '18 at 14:15

Ele

33,468
7
37
75

Thanks Ele, so we can't simply use `...` to spread an array literals? – geekydude703 Mar 05 '18 at 14:29
@geekydude703 no, we can't. We need to wrap our objects with either `[]` for array or `{}` for key-value pairs objects. The only place where it's "not necessary" is for example: `[1, ...array, 3, 4]` looks like you don't need the brackets because the spread syntax is not surrounded by them, however, that array along with the others objects are between `[ ]`. – Ele Mar 05 '18 at 14:37

score 1 · Answer 2 · answered Mar 05 '18 at 14:11

1

The correct way of doing what you want is:

var array = [1, 2, 3, 4]
var spread = [...array];

answered Mar 05 '18 at 14:11

Lucas Lago

146
6

Thanks Lucas. I am a little confused when do we need `[]`..in MDN, they have the following examples where there is no brackets when destructing the array: `var parts = ['shoulders', 'knees'];` `var lyrics = ['head', ...parts, 'and', 'toes'];` // `["head", "shoulders", "knees", "and", "toes"]` – geekydude703 Mar 05 '18 at 14:14
You need [] because you are destructuring an array into a new array. In that example you are creating a `parts` array and then creating another `lyrics` array, that contains `'head'` and another array inside (the `parts` array), but instead of doing `var lyrics = ['head', parts]`, you are using Rest parameters to indicate that you want the parts to be unpacked into distinct variables. `var lyrics = ['head', ...parts, 'and', 'toes']` I hope I helped you and not made it even more confusing. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters – Lucas Lago Mar 05 '18 at 16:35
as far as I know, rest parameters (`...`) would only work as parameters in functions. In all other cases, they should be spread syntax. The example I quoted was from MDN spread syntax documentation. I appreciate your help though – geekydude703 Mar 05 '18 at 16:53
Yeah, in that scenario I believe spread operator is the name I was looking for, thanks for poiting that out. check @Manishz90's answer here: https://stackoverflow.com/questions/33898512/spread-operator-vs-rest-parameter-in-es2015-es6. Helped me understand about different use cases of the three dot syntax. – Lucas Lago Mar 05 '18 at 17:14

score 1 · Answer 3 · answered Mar 05 '18 at 14:16

The syntax for using spread is:

For function calls:

myFunction(...iterableObj);

For array literals or strings:

[...iterableObj, '4', 'five', 6];

For object literals (new in ECMAScript 2018):

let objClone = { ...obj };

So, based on the syntax, for an array by using spread you are missing the square brackets []:

var array = [1, 2, 3, 4]
var spread = [...array];
console.log(spread);

Spread syntax doesn't work to destructive an array

3 Answers3