ES2015以降のJavaScriptでObjectのkeyに変数を使う

概要

javascriptのObjectのキーについて。
ES2015(ES6)からkeyでの変数展開が扱いやすくなっていたので紹介する。

ES5まで

ES5までは他の軽量言語みたいにキーの変数名を入れると展開された変数ではなく、変数名がそのまま入る仕様だった。
だから以下のようにすると多くの場合期待通りでないObjectが返る。

var myValue = "this_is_value";
var myKey = "this_is_key";
var obj = {myKey: myValue}; // => {myKey: "this_is_value"}

ワークアラウンドとしては一度objectを定義してから、obj[key] = valとして代入する方法があった。

var myKey = "this_is_key"
var obj = {};
obj[myKey] = myValue; // => {"this_is_key": "this_is_value"}

これはあまり柔軟じゃない書き方で微妙という感じだった。

ES2015(ES6)以降

さてES2015(ES6)ではどうなのという話だが、定義時に[]でkeyになる変数を指定すればちゃんと展開される。

var myValue = "this_is_value";
var myKey = "this_is_key";
var obj = {[myKey]: myValue}; // => {"this_is_key": "this_is_value"}

便利だ。