Деструкция, дающая синтаксический анализ

Question

Я пытаюсь понять деструктурирование в ES2015 (ECMAScript 6).

Я хочу, чтобы функция работала с некоторыми переменными и переназначала новые переменные.

В приведенном ниже примере я создал функцию инициализации foo и bar и другую функцию для изменения foo и bar.

Я создал три функции, которые используют foo и bar. Два из них работают, а другой нет. Я не могу понять, почему.

Пожалуйста, поделитесь любой информацией, чтобы помочь мне в понимании.

Спасибо!

function initializeFooBar() { 
 
    let foo = 1, 
 
     bar = 2; 
 
    return {foo, bar}; 
 
} 
 
function changeFooBar(f, b) { 
 
    let foo = f*2, 
 
     bar = b*2; 
 
    return {foo, bar}; 
 
} 
 
function fooBarWorks() { 
 
    let {foo, bar} = initializeFooBar(); 
 
    console.log(foo + bar); // 3 
 
} 
 
function fooBarAlsoWorks() { 
 
    let f = 1, 
 
     b = 2, 
 
     {foo, bar} = changeFooBar(f, b); 
 
    console.log(foo + bar); // 6 
 
} 
 
function fooBarDoesntWork() { 
 
    let {foo, bar} = initializeFooBar(); 
 
    {foo, bar} = changeFooBar(foo, bar); // causes parsing error 
 
    console.log(foo + bar); 
 
} 
 
fooBarWorks(); // writes 3 to console 
 
fooBarAlsoWorks(); // writes 6 to console 
 
fooBarDoesntWork(); // doesn't run due to "parsing error unexpected tolken ="

Answer 1

Вам нужно изменить:

{foo, bar} = changeFooBar(foo, bar); 

к:

({foo, bar} = changeFooBar(foo, bar)); 

потому { в этом случае интерпретируется как открытие блока кода.

Окружающая назначение: () Демонтирует значение {.

По MDN documentation:

(..) вокруг оператора присваивания требуется синтаксис при использовании объекта назначения буквальных деструктурирующего без объявления.

{a, b} = {a:1, b:2} не действует автономно синтаксис, так как сторона {a, b} на левая считается блок и не литерал объекта.

Однако ({a, b} = {a:1, b:2}) действует, как var {a, b} = {a:1, b:2}