Destructuring assignment cause error: "unexpected token ="

Question

let's say I call use this syntax in es6:

let a, b;

{a, b} = { a: 100, b: 300 };

the code will run without error;

but let's rewrite is like this:

function fn() {
    return { a: 100, b: 200 }
}

let a, b;

{ a, b } = fn();

when I run the code above, it says unexpected token "="; I am a little confused, what is the difference?

Answer 1

Add round braces: ({ a, b } = fn());

From Mozilla documentation:

The round braces ( ... ) 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}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment