Can anyone explain, why the following happens with ES6 array destructuring?
let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)Expected: a=A b=BB c=C
Actual: a=BB b=C c=undefined
4 Answers
As others have said, you're missing semicolons. But…
Can anyone explain?
There are no semicolons automatically inserted between your lines to separate the "two" statements, because it is valid as a single statement. It is parsed (and evaluated) as
let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);
wherein
[a, b] = …;is a destructuring assignment as expected(… = ['BB', 'C'])is an assignment expression assigning the array to the left hand side, and evaluating to the array['A', 'B'][…]is a property reference on an array literal(b, c)is using the comma operator, evaluating toc(which isundefined)
If you want to omit semicolons and let them be automatically inserted where ever possible needed, you will need to put one at the start of every line that begins with (, [, /, +, - or `.
8 Comments
zerkms
Why did it turn
[b, c] to a [(b, c)] actually?
Pranav C Balan
Wow, this is the real answer for the question.... I were thinking what happening there... Now it's clear....
Bergi
@zerkms: Because I like introducing grouping operators… in this case to emphasise that it is not an array literal with two elements
Pranav C Balan
is
['A', 'B'][b, c] will get property b and c of array elements ?Pranav C Balan
After testing with several cases, Ithink
['A', 'B'][b, c] ==> ['A', 'B'][c] |
You've fallen into a trap of line wrapping and automatic semicolon insertion rules in JavaScript.
Take this example:
let x = [1, 2]
[2, 1]
It's the interpreted as:
let x = [1, 2][2, 1] // === [1, 2][(2, 1)] === [1, 2][1] === 2
That weird [(2, 1)] thing above is related to how Comma Operator works.
Thus, your example:
let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)
Is interpreted as:
let a, b, c
[a, b] = ['A', 'B'][b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)
Now, if you insert a semicolon, it will work as you intended:
let a, b, c
[a, b] = ['A', 'B']; // note a semicolon here
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)
Also, it's a good idea to check your code by pasting it into Babel repl to see the generated output:
'use strict';
var a = void 0,
b = void 0,
c = void 0;
var _ref = ['A', 'B'][(b, c)] = ['BB', 'C'];
a = _ref[0];
b = _ref[1];
console.log('a=' + a + ' b=' + b + ' c=' + c);
Comments
I believe you have forgotten the line breaks ';'. Below is the corrected code. Please try:
let a,b,c
[a, b] = ['A', 'B'];
[b, c] = ['BB', 'C'];
console.log(`a=${a} b=${b} c=${c}`)
3 Comments
zerkms
It would be helpful if you explained why
; is necessary there.
zubair1024
I believe the following expression will shed more light:
let [a, b] = ['A', 'B'],[b, c] = ['BB', 'C'];zerkms
It would, if you additionally explain why it is syntactically correct and its semantics.
let a, b, c
[a, b] = ['A', 'B']***;***
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)
console: a=A b=BB c=C
;after each line;to fix ASI related issues.