[ JavaScript ]連想配列のキーに変数を使用する方法

JavaScript の連想配列を使用しているときに、連想配列のキーを可変にしなければならないことがあり、連想配列のキーを変数として設定できないか調べてみました。

JavaScript の連想配列について

通常だと以下のように JavaScript の連想配列を生成すると思います。

const dict = {
    key_1: "value_1",
    key_2: "value_2",
}

この key_1, key_2 の部分を変数にしたい。

JavaScript の連想配列のキーに変数を指定するには、まず、からの連想配列を準備して [] (ブラケット記法)で要素を追加すれば実現できます。

// 空の連想配列を生成
const dict = {}

// 連想配列のキーとなる変数
const k = 'key'
dict[k] = 'value'

console.log(dict)
// { key: "value" }

ただ、この実装方法だと一度からの連想配列を生成してからでないと連想配列のキーに変数を設定できません。できれば連想配列宣言時に初期値としてキーに変数を設定したいです。そうすることで、コードの見通しが良くなるケースもあると思うので。

以下のように実装することで、連想配列の宣言時にキーに変数を設定することができます。

const k = 'key'
const dict = {[k]: 'value'}

console.log(dict)
// { key: "value" }

コード規約などの関係で変数の宣言と初期化などを分離しないといけないこともあるかもしれませんが、もし一緒に書いても問題ないなら、その方がコード量も削減できてコードの見通しも良くなると思います。