3.2Objects / Computed Properties

動的なプロパティ名

動的なプロパティ名でオブジェクトを作成する際は、計算済みプロパティ名を使用します。これにより、オブジェクトのプロパティを1か所で定義できます。

この構文が登場する前は、オブジェクトを一度定義した後に、ブラケット記法を使って動的なプロパティを追加する必要がありました。計算済みプロパティ名を使うと、オブジェクトリテラルの中でプロパティ名を動的に決定できるため、オブジェクトの初期化処理が1つの式にまとまり、コードがより宣言的で読みやすくなります。

❌ Bad

function getKey(k) {
  return `a key named ${k}`;
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

✅ Good

function getKey(k) {
  return `a key named ${k}`;
}

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};