Object Destructuring With Dynamic Properties

Category: JavaScript

const obj = {
  propOne: 1,
  propTwo: 2,
};

const prop = "propOne";

const { [prop]: property } = obj;

Explanation

Sometimes, you have a property that is more or less dynamic, like when you use JavaScript objects as maps. In this case, if you want to destructure, you can use the bracket notation [] to pass a dynamic name to the destructuring statement. The only thing you need to do in this case is to assign a static name to the property you destructure (: property), so the runtime knows that you have a variable to work with afterward, which has a name that does not change.