Understanding ES6 to ES5 code as transpiled by Babel - ecmascript-6

Question

Babel transpiles the following ES6 code
test(){
var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]
}
into this
function test() {
var list = [1, 2, 3];
var _list = list[(b, a)] = [a, b];
var _list2 = _slicedToArray(_list, 3);
var a = _list2[0];
var b = _list2[2];
}
I can't understand what exactly is happening with this line of code
var _list = list[(b, a)] = [a, b];
Specifically, I am clueless with list[(b, a)]. Any help is much appreciated?

Answer 1

The short answer is that
var [ a, , b ] = list
[ b, a ] = [ a, b ]
is the same as
var [ a, , b ] = list[ b, a ] = [ a, b ]
because automatic semicolon insertion does not apply to this situation. The same case applies to this ES5 example:
var list = [1, 2, 3]
var value = list
[1]
console.log(value);
If you run this code, it will log 2, not [1, 2, 3] because the index is applied to the previous line, rather than treated as an array on the following line.
Automatic semicolon insertion generally applies in cases where the parser encounters a syntax error, goes back a step, and tries after inserting a semicolon.
In both of these cases, the content of the following line is perfectly valid as part of the previous line, so it is treated as such with no automatic semicolon.
In your example, list[a, b] is parsed as accessing an index using the result of comma-operator operation, which will essentially evaluate to list[b]. The comma operator processes a list of expressions one at a time, and then finally evaluates to the result of the last expression.