Strange behavior of ES6 destructuring in Chrome console

Question

Environment

Google Chrome: 61.0.3163.79 beta （64 bit） (cohort: Beta)

JavaScript Engine: V8 6.1.534.32

Code

In Chrome, open a new tab, type following code one-by-one in the console:

let [a = b, b = 1] = [];

typeof a;

let a = 'other value';

a = 'other value';

The output is:

Question

Can someone explain why the 1st statement let [a = b, b = 1] = [] make variable a to be 'a is not defined' and 'Identifier 'a' has already been declared' at the same time?

What is the magic in the 1st statement execution?

Is it related to the ES6 “Temporal Dead Zone” (TDZ)?

Update

The sample code is invalid, I just want to know the reason about the outputs. :)

Answer 1

Yes, this is related to the temporal dead zone - twice actually.

Issue one

You are trying to use b as a default value for a before it has been initialised. The evaluation goes from left to right, and while both a and b are already declared they do get initialised in order. Using let [a = 1, b = a] = [] would work.

Issue two

An error was thrown in the global scope between the declaration of the variable and its initialisation. You can reduce the test case to

let a = (_ => { throw; })();

This does declare the variable a, but never initialises it because an exception happens before. Usually - in local scopes - that's not a problem, because the scope in which a was declared here is left with the exception. It's different in the global scope - the variable stays forever declared but uninitialised. It's dead in eternity (the temporal zone is "forever"). See here for more details.

Answer 2

You are trying to assign b to a, before you've even declared b.

Use

let [b =1, a = b] = [];

The reason it says a has already been declared is because it's declaring a first, and then it tries to assign b to it (which has not been declared yet) and then the code errors, but a has already been declared