How to interpret the [which]: part for the JavaScript expression ( { [which]: o[which] } = bar() );

Question

I have encountered the following code online:

function bar() {
    return {
        x: 4,
        y: 5,
        z: 6
    };
}

var which = "x",
    o = {};

( { [which]: o[which] } = bar() );

console.log( o.x );

I understand that this code is an example of the "destructuring syntax" that was introduced in ES6.

I also understand that o[which] is searching for a key named which in object o and if found, return the value for the which key.

But I'm not really sure how the [which]: part of the expression works.

Answer 1

In destructuring syntax, when you see from : to, it means that the value of the property identified by from is taken from the thing being destructured and assigned to the variable or property identified by to. So looking at that line:

( { [which]: o[which] } = bar() );

...we see that the value of the property identified by [which] is retrieved from the object returned by bar and assigned to the property identified by o[which]. Since [which] is used rather than which, it's the value of the which variable that determines the name of the property taken from bar's returned object, just like when you use brackets syntax when retrieving or setting the value of a property on an object.

The non-destructuring version would look like this:

const tmp = bar();
o[which] = tmp[which];

Answer 2

The [which]: construct is part of computed properties syntax (ES2015+).