JavaScriptの算出プロパティ名(Computed Property Names)をはじめて知ったメモ

JavaScriptの算出プロパティ名(Computed Property Names)をはじめて知ったメモ

JavaScriptの算出プロパティ名(Computed Property Names)をはじめて知ったメモです。

ES6(ECMAScript 2015)で導入されていて、オブジェクトリテラルのプロパティ名を動的に設定できるそうです。

const type = "propertyName";
const value = 1;

// オブジェクトを作成してから後でプロパティを追加
const obj = {};
obj[type] = "value";

console.log(obj);  // { propertyName: "value" }

以前はこう書いてました。

算出プロパティではこんな書き方です。

const key = "propertyName";

const obj = {
    [key]: "value"
};

console.log(obj);  // { propertyName: "value" }

こうやって変数の中身がそのままプロパティ名に使えるんですね!便利!

動的なオブジェクト生成をしたいときに使えそうですね。とくに Node-RED などで各 API レスポンスの構築とかデータ変換処理で役立ちそうです!

ちなみに、

オブジェクト初期化子 - JavaScript | MDN

この辺りに言及があります。

Object initializer - JavaScript | MDN

ちなみに、英語版では Computed Property Names という名前でした。こっちのほうが自分的にはしっくりくるかも。