JavaScriptのpush()で変数名をリテラルにしない方法！角括弧で値をキーにするテクニック

JavaScriptでオブジェクトを配列にpush()する際、変数の「値」をプロパティ名（キー）として使いたいのに、そのまま書くと変数名が文字列リテラルとして扱われてしまうことがあります。

この問題を回避するには、角括弧（[ ]）を使った算出プロパティ名（Computed Property Names）を利用します。以下に具体的なコード例を示します。

コード例

var name = "David";
var putTheAllData = [];
putTheAllData.push({ name: "The name is name will remain same" });
putTheAllData.push({ [name]: "The name is David will be changed" });
console.log(putTheAllData);

ポイントは2つ目のpush()です。{ name: ... }と書いた場合は「name」という文字列そのものがキーになりますが、{ [name]: ... }のように角括弧で変数を囲むことで、変数nameの中身（この場合は"David"）がキーとして評価されます。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で次のコマンドを使用します。

node fileName.js

実行結果

ここではファイル名をdemo166.jsとして実行します。実行すると以下のような出力が得られます。

PS C:\Users\Amit\javascript-code> node demo166.js
[
  { name: 'The name is name will remain same' },
  { David: 'The name is David will be changed' }
]

解説：なぜ角括弧が必要なのか

出力結果を見ると、1つ目のオブジェクトのキーは「name」という文字列リテラルのままですが、2つ目のオブジェクトのキーは変数nameの値である「David」に置き換わっているのが分かります。

これはES2015（ES6）で導入された算出プロパティ名という機能で、オブジェクトリテラル内で式や変数を評価して、その結果を動的なキーとして設定できます。

ユーザーデータの集約やAPIレスポンスの整形など、キー名を実行時に決めたいケースで非常に便利なテクニックなので、ぜひ覚えておきましょう。