JavaScriptでオブジェクトのプロパティ名に変数を使用する方法

JavascriptのES2015からComputed property names(計算されたプロパティ名)という記法が正式にサポートされており、プロパティ名として変数を用いる事ができるようになっている。

動的にプロパティを追加したい場合

const property = 'title';

const article = {
   date: '2021-01-17',
   [property]: 'what is computed property names'
};

console.log(article.title) // what is computed property names

動的に生成されたプロパティ名の値を取得したい場合

const article = {
   date: '2021-01-17',
   title: 'what is computed property names'
};
const propertyName = 'date';
const { 
  [propertyName]: propertyValue
} = article;
console.log(propertyValue) // 2021-01-17

代入の応用例として、プロパティ値が他のプロパティのKeyとなっている場合に簡単に値を取り出す事が可能

const obj = {
  currentUser: 'user2',
  user1: 'tanjiro',
  user2: 'nezuko',
  user3: 'zenitsu'
};
const {
  currentUser,
  [currentUser]: userName,
} = obj;
console.log(userName); // nezuko

因みにcomputed propety namesを使わないで書くと下記のような多少頭を使った記述となる。

const obj = {
  currentUser: 'user2',
  user1: 'tanjiro',
  user2: 'nezuko',
  user3: 'zenitsu'
};
const userName = obj[obj.currentUser]; // user2;
console.log(userName); // nezuko

どちらでも良いが、代入している感はcomputed property namesを使った方があり、直感的ではないかと思う。
実際現在仕事で行っているプロジェクトでもcomputed property namesの方を使っている。