🦔
JavaScriptでObjectのKeyに変数展開する
こんにちは，@ry_kmです。
似たような内容の記事はいくつかあったので，忘れないように自分用のメモとして書きます。タイトルの通り，JavaScriptでObjectのKeyに変数展開する方法についてです。
JavaScriptのObjectについておさらい
JavaScriptのObjectはJSONと似ていますが，Keyにクオーテーションマークを使わなくてよかったり，Valueに関数を入れられたりなど汎用性が高くなっています。
const person = {
name: ['Bob', 'Smith'],
age: 32,
gender: 'male',
interests: ['music', 'skiing'],
bio: function() {
console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old. He likes ${this.interests[0]} and ${this.interests[1]}.`);
},
greeting: function() {
console.log(`Hi! I\'m ${this.name[0]}.`);
}
};
person.greeting() // Hi! I'm Bob.
(出典：MDN Web Docs - JavaScriptオブジェクトの基本 一部筆者にて加筆修正)
ちなみに，上記コードでfunction() {}をアロー関数式() => {}に変えるとうまくいかないです[1]。アロー関数にしてしまうと，レキシカルスコープのthis（この場合はグローバルオブジェクト）になってしまってpersonを参照してくれません。
Keyに変数展開する
上記例を見ていただければ分かる通り，Valueに変数を展開することは当然可能です。しかし，Key側に変数展開しようとすると，展開せずに変数名がそのまま表示されてしまいます。
const newKey = 'hoge'
const obj = {
newKey: 'test'
};
console.log(obj) // { newKey: 'test' }
Keyに'hoge'のように変数展開したいときは，[newKey]のように[]で変数名を囲います。
const newKey = 'hoge'
const obj = {
[newKey]: 'test'
};
console.log(obj) // { hoge: 'test' }
ちなみに，この書き方はES2015以降で使える方法です。
この書き方どこかで見たことあるような...
そう！TypeScriptで型指定するときですね！
const someObject: {[id: string]: value} = {};
[id: string]のように，[]で囲っていることでidが変数であることを明示しているんですね。これを知るまでは，ObjectにはKey-Valueがいくつも入るから配列にしているのかな，とか思っていました[2]。
ちょっとしたことですが，新しいことを知ると嬉しいスッキリしますね。
以上になります。お読みいただきありがとうございました！
Discussion