JavaScriptで文字列をオブジェクトのキーとして設定する方法

JavaScriptで文字列をオブジェクトのキーとして設定する方法

JavaScriptでは、文字列の値を持つ変数を、そのままオブジェクトのプロパティ名（キー）として利用できます。これを実現するのが「算出プロパティ名（Computed Property Names）」と呼ばれる構文で、ブラケット [] の中に変数を指定するだけでOKです。

例えば、次のような文字列があるとします。

const keyName = 'username';

この文字列をオブジェクトのキーとして設定するには、[] を使って文字列が格納された変数名を渡します。

const stringToObject = {
  [keyName]: 'David Miller'
};

ポイント：ES6の算出プロパティ名

この書き方はES6（ECMAScript 2015）で導入されました。それ以前は、まず空のオブジェクトを作成し、後から obj[keyName] = value の形式で代入する必要がありました。現在では、オブジェクトリテラルの中で直接 [] を記述できるため、宣言と同時に動的なキーを設定でき、コードがより簡潔になります。なお、文字列以外の値をキーにした場合は、自動的に文字列へ変換される点にも注意してください（Symbolは例外です）。

サンプルコード

以下が完全なコードです。

const keyName = 'username';
const stringToObject = {
   [keyName]: 'David Miller'
};
console.log("Your String Value="+keyName);
console.log("Your Object Value=")
console.log(stringToObject);

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

node fileName.js

ここでは、ファイル名を demo238.js として保存しています。

実行結果

出力は以下のようになります。

PS C:\Users\Amit\javascript-code> node demo238.js
Your String Value=username
Your Object Value=
{ username: 'David Miller' }

このように、[keyName] を指定することで、変数に入っていた文字列「username」がそのままオブジェクトのキーとして設定されていることが確認できます。APIレスポンスの整形や、動的にプロパティ名が決まるデータ構造を扱う際に非常に便利なテクニックなので、ぜひ覚えておきましょう。