Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ES6 won't destructure an object into pre-declared variables? [duplicate]

Using node 8.4.0:

$ node
> {x, y} = {x: 1, y: 2}
{ x: 1, y: 2 }
>

However, the following errors also non interactive: (the only diff is the semicolon)

$ node
> {x, y} = {x: 1, y: 2};
...

Also in Chrome console:

> {x,y} = {x:1, y:2}
< {x: 1, y: 2}
> {x,y} = {x:1, y:2};
x VM253:1 Uncaught SyntaxError: Unexpected token =

Can anyone explain this?

Clarification

This is not about let, var or cosnt destructuring which works as intended. This is about previously defined variables, (or non strict mode): from chrome console:

> let a, b;
< undefined
> [a, b] = [1, 2];
< >(2) [1, 2]
> a
< 1
> b
< 2
> {a, b} = {a:3, b:4}
< >{a: 3, b: 4}
> a
< 3
> b
< 4
> {a, b} = {a:3, b:4};
x VM1297:1 Uncaught SyntaxError: Unexpected token =
like image 345
niry Avatar asked Nov 18 '22 23:11

niry


2 Answers

The proper syntax to destructure an object to existing variables is

({x, y} = {x: 1, y: 2});

This allows {x, y} = {x: 1, y: 2} to be an expression. Otherwise {x, y} is interpreted as a block with comma operator, this results in Unexpected token = error.

It works without parentheses and a semicolon in console because it is treated as an expression there. This is efficiently same thing as

console.log({x, y} = {x: 1, y: 2});
like image 161
Estus Flask Avatar answered Dec 17 '22 19:12

Estus Flask


It is not a bug but by design. See "Assignment without declaration":

A variable can be assigned its value with destructuring separate from its declaration.

var a, b;
({a, b} = {a: 1, b: 2});

The ( .. ) around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.

{a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.

However, ({a, b} = {a: 1, b: 2}) is valid, as is var {a, b} = {a: 1, b: 2}

like image 22
str Avatar answered Dec 17 '22 19:12

str