🐥
ObjectのKeyに変数を使う（ブラケット表記法[]）
ObjectのKeyに変数を使う方法
ObjectのKeyに変数を使いたい場合、以下のようにブラケット表記法を使用します。
ケース1
const variableKey = "age";
const obj = {
[variableKey]: 20,
};
console.log(obj[variableKey]); // 20
console.log(obj); // { age: 20 }
ObjectのKeyにテンプレートリテラルを使いたい場合
ObjectのKeyにテンプレートリテラルを使いたい場合も同様に、以下のようにブラケット表記法を使用します。
ケース2
const variableKey = "age";
const obj = {
[`#${variableKey}`]: variableKey,
};
console.log(obj[`#${variableKey}`]); // age
console.log(obj); // { '#age': 'age' }
まとめ
最初は[]が不要ではないかと思いましたが、テンプレートリテラルは文字列ではなく式として評価されるためブラケット表記法を使用する必要があるようです。（詳しいことが分かれば追記しようと思います）
参考記事
- テンプレートリテラル (テンプレート文字列)（MDN）
- プロパティアクセサー（MDN） ※ブラケット表記法について
- オブジェクトでの作業 ※オブジェクトのプロパティ名 (キー) に使えるものについて
Discussion