Babel not transpiling ES6 computed property names

Question

Babel is not transpiling ES6 computed property names. It compiles everything else though. Not sure what's going on. Using the latest version of cli.

var name = "John"; 
var age = 12; 
var count = 5; 
var postfix = 'age';

var person = {
    name, 
    age, 
    count,
    postfix,
    printName(){
        console.log(this.name); 
        this.count--; 
        while(this.count){
            this.printName(); 
        }
    },

    ['print' + this.postfix]: function(){
        console.log(this.age);
    }
};

person.printName(); 
person.printAge();

Babel output

var name = "John";
var age = 12;
var count = 5;
var postfix = 'age';

var person = _defineProperty({
    name: name,
    age: age,
    count: count,
    postfix: postfix,
    printName: function printName() {
        console.log(this.name);
        this.count--;
        while (this.count) {
            this.printName();
        }
    }
}, 'print' + postfix, function () { // Look here
    console.log(this.age);
});

Looks like it gets correctly transpiled, resulting function name would be `printage()`, but you are trying to access it using `printAge()`, maybe that is the problem. — Stubb0rn, Sep 01 '16 at 17:48
You code samples also don't match up. The first uses `this.postfix` and the second uses `postfix` as the property name. I'll second @Stubb0rn though, you'd need `person.printage();` — loganfsmyth, Sep 01 '16 at 17:54
Seems like it was my error + some confusion. I thought it would be converted to the computed value instead of 'print' + postfix. — Yasin Yaqoobi, Sep 01 '16 at 18:09
It **was** converted to the computed value which **was** `'print' + postfix`. — , Sep 01 '16 at 18:10
yes (hence the confusion part of my comment). I actually thought it would be computed to printAge. — Yasin Yaqoobi, Sep 01 '16 at 18:12

score 3 · Answer 1 · answered Sep 01 '16 at 17:43

In what sense is it not transpiling computed property names? That looks exactly correct to me.

Are you referring to the fact that it dropped the this before postfix? That's because they're the same - this in a computed property name in ES6 does not refer to the object, and instead is whatever it would be outside the object. Here that's the global object, and your earlier var postfix defines a property on the global object. So this.postfix and postfix are synonymous in that context.

Babel not transpiling ES6 computed property names

1 Answers1