ES6のComputedPropertyNameとトランスパイラ

ES6のComputed Property Nameは非常に便利だが、トランスパイラを併用すると問題が起きがちである。
それを確認していく。

Base

const SYMBOL = Symbol('foo-bar-baz');

const obj = {
    [SYMBOL]: 1,
    name: 'brn',
    job: 'engineer'
}

typescript

var SYMBOL = Symbol('foo-bar-baz');
var obj = (_a = {},
    _a[SYMBOL] = 1,
    _a.name = 'brn',
    _a.job = 'engineer',
    _a);
var _a;

babel

'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 SYMBOL = Symbol('foo-bar-baz');

var obj = (_obj = {}, _defineProperty(_obj, SYMBOL, 1), _defineProperty(_obj, 'name', 'brn'), _defineProperty(_obj, 'job', 'engineer'), _obj);

これを見るとすぐわかるが、トランスパイルされたjs内では、
オブジェクトを一度構築してからプロパティを追加している。
SYMBOLプロパティは仕方ないが、他のプロパティも別途追加になっているため、(Babelはもっとひどくて、definePropertyになっている…)
例えば、v8ではDictionaryモードになってしまう。つまりパフォーマンスに重大な問題を引き起こす。
そのため、パフォーマンスクリティカルな場合はComputedPropertyの利用は避けよう。