Search code examples
javascriptecmascript-6destructuring

In an object-destructuring declaration, what do the identifiers on the target side refer to?

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?

Solution

  • 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.