れおの備忘録(´・ω・`)

〜なんでも書いちゃおう〜

Babel: ES6で動的なオブジェクトプロパティをリテラルで定義する方法

ES6では、Enhanced Object Literalsという構文が追加されています。

これまでのJavaScriptではオブジェクトのキーを動的にリテラルでは定義できませんでした。 Enhanced Object Literalsを使うと、 var obj = {["name_" + (1 + 1)]: "value"} このようにオブジェクトのキーを動的に指定することができます。

obj[hoge] というリテラルはこれまでと同様で、この書き方を定義時にもできるようにしたものがこのEnhanced Object Literalsです。

Babelを使った例

const foo = Symbol("foofoo");
const bar = "barbar";

const obj = {
  foo: 1,
  [foo]: 2,
  [bar]: 3
};

console.log(obj[foo]); // Symbol key -> 2
console.log(obj[bar]); // String key -> 3
console.log(obj.barbar); // String key -> 3

このコードは、下記コードにトランスパイルされます。

"use strict";

var _obj;

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var foo = Symbol("foofoo");
var bar = "barbar";

var obj = (_obj = {
  foo: 1
}, _defineProperty(_obj, foo, 2), _defineProperty(_obj, bar, 3), _obj);

console.log(obj[foo]); // Symbol key -> 2
console.log(obj[bar]); // String key -> 3
console.log(obj.barbar); // String key -> 3

Babel: try it out

Referneces

詳しくは、Lukeさんがまとめているes6featuresを参照してください

github.com