ES6中的解构混乱

Question

In the following JS (es6) code, what is going on with the variables inside of the curly braces with the colon?

const { foo: bar } = ...

Normally when you see this it is doing variable assignment from right to left, as in Objects. In objects it would assign the variable bar to the object key foo , but that doesn't seem to be what is going on here. What is this doing?

Answer 1

It is best to think of destructuring kind of like the opposite of declaring an object, so where

const hidingSpotConnection = ...
const obj = { connectionType: hidingSpotConnection };

would make an object obj with a key connectionType containing the value from the hidingSpotConnection variable,

const { connectionType: hidingSpotConnection } = ...

takes the value from the connectionType key and stores it in a variable called hidingSpotConnection .