【JavaScript】オブジェクトのプロパティを変数にしたいなら[]で囲む

はじめに

Reactの公式チュートリアルの問題を解いていたところ、オブジェクトのプロパティ名が[]で囲まれていました。

初めて見た書き方で何をしているかわからなかったため、調べました。

messages: {
  ...state.messages,
  [state.selectedId]: action.message,
},

Computed Property Names

この[]はEC2015から導入された、オブジェクトのプロパティを動的に生成するための構文です。

Computed Property Names、日本語だと「計算プロパティ名」という構文らしいです。

サンプル

計算プロパティ名を使用することで、プロパティ名に変数を設定できます。

let propertyName = 'UserName';

const profile = {
  age: 21,
  [propertyName]: 'taro',
};

console.log(profile.UserName); // taro

おわりに

"計算プロパティ名"という名称の意味がよくわからずに混乱しましたが、「計算した結果をプロパティに入れたよ」というような意味合いですね。

参考

• 以下の「計算プロパティ名」の部分です。