JavaScriptで変数の値を使ってオブジェクトのプロパティを作成する方法

JavaScriptには、オブジェクトのプロパティを作成・アクセスするための記法が2種類あります。ひとつはドット記法、もうひとつはブラケット記法（角括弧記法）です。

変数に格納された値をプロパティ名として使いたい場合は、ドット記法では対応できないため、ブラケット記法を使用します。

基本的な方法：ブラケット記法を使う例

以下のように、変数名をそのまま角括弧の中に入れることで、変数の値をプロパティ名として設定できます。

const obj = { a: 'foo' };
const prop = 'bar';

// 変数propの値「bar」をプロパティ名として設定
obj[prop] = 'baz';
console.log(obj);

出力結果

上記のコードを実行すると、次のような出力が得られます。

{
    a: 'foo',
    bar: 'baz'
}

ES6の算出プロパティ名（Computed Property Names）を使う方法

ES6（ECMAScript 2015）以降では、算出プロパティ名という機能が導入されました。これにより、オブジェクトリテラルを定義する時点で、直接変数の値をキーとして指定できるようになりました。

使用例

const prop = 'bar';

const obj = {
    // 通常のキー指定
    a: 'foo',
    // 変数propの値をキーとして使用
    [prop]: 'baz'
};
console.log(obj);

出力結果

こちらも同じ結果になります。

{
    a: 'foo',
    bar: 'baz'
}

このように、既存のオブジェクトに後から動的にプロパティを追加したい場合はブラケット記法を、オブジェクト作成時にまとめて定義したい場合はES6の算出プロパティ名を使うと、コードがより簡潔で読みやすくなります。