Why can\'t spread operator be used multiple times?
let arr = [[[1, 2, 3]]];
console.log(arr); // Array [ Array[1] ]
console.log(...arr); // Array [ Array[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));
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
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))