Using spread operator multiple times in javascript?

Solution 1:

Why can't spread operator be used multiple times?

... is not an operator. (...arr) is not valid JavaScript. ... is only allowed inside array literals and in arguments lists, but those are special forms of the syntax (notice the ... in the production rules below).

ArrayLiteral

ArrayLiteral :
  [ Elision_opt ]
  [ ElementList ]
  [ ElementList , Elision_opt ]

ElementList :
  Elision_opt SpreadElement
  ElementList , Elision_opt SpreadElement

SpreadElement:
  ... AssignmentExpression

Arguments

Arguments :
  ( )
  ( ArgumentList )

ArgumentList :
  AssignmentExpression
  ... AssignmentExpression
  ArgumentList , AssignmentExpression
  ArgumentList , ... AssignmentExpression

Solution 2:

Because ...arr isn't like a function that returns a value in normal scenarios (you can test this by just typing ...[[1,2,3]] in console, if ... operated like a normal function we would expect a return of [1 2 3]. For that reason you can't chain spreads. From MDN:

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

Ergo, spreads need to happen within array literals, object literals (if using obj spread, which is ES7) or within function calls So you could do console.log(...[].concat(...arr))

Solution 3:

According to this, spread syntax input is an iterable (e.g. array), but its produce output which is non-iterable (e.g. non-array). So the problem is that in outer spread syntax ... as input you put non-iterable thing (...arr) which cause SyntaxError. To flat you array you can use flat (if you put Infinity instead 2, then you will flat any nested array)

arr.flat(2)

let arr = [[[1, 2, 3]]];
console.log(arr.flat(2));

let arr2 = [[1,2,[3,4,[5,[6]]]], [[7,[8]],9]];;
console.log(arr2.flat(Infinity));