Why Babel introduces unused variable when destructuring property from object?

user_9507402 0
Viewed 66

I just looked at compiled script of my source code and I think I noticed something weird.

This ES6 code:

const data = {someProperty:1, someNamedPropery: 1, test:1};
const { 
  someProperty, // Just gets with 'someProperty' peoperty
  someNamedPropery: changedName, // Works same way, but gets with 'changedName' property
  test: changedNameWithDefault = 1, // This one, introduces new variable and then uses it to compare that to void 0
} = data;

Compiles to this:

"use strict";

const data = {someProperty:1, someNamedPropery: 1, test:1};
var someProperty = data.someProperty,
    changedName = data.someNamedPropery,
    _data$test = data.test,
    changedNameWithDefault = _data$test === void 0 ? 1 : _data$test;

I am curious why Babel introduces new variable _data$test. Can't it just be something like this?

...
changedNameWithDefault = data.test === void 0 ? 1 : data.test;

It still works.

Notice, that new variable introduction happens only when I'm trying to assign default value if key isn't present in data variable or is undefined.

Does this affect application performance if data.test is big enough? And I wonder if Garbage Collector takes care of it (_data$test variable).

commonjs babeljs typescript ecmascript-6 javascript
1 Answers

Can't it just be something like this?

No, but it's slightly subtle why not: If test is an accessor property, accessing it is a function call. The destructuring code, and Babel's translation of it, will only call the accessor once. Your change would call it twice. Here's an example:

const data = {
    someProperty:1,
    someNamedPropery: 1,
    get test() {
        console.log("  test called");
        return 1;
    },
};

function es2015OriginalCode() {
    const { 
        someProperty,
        someNamedPropery: changedName,
        test: changedNameWithDefault = 1,
    } = data;
    console.log(`  changedNameWithDefault = ${changedNameWithDefault}`);
}

function babelCode() {
    "use strict";

    var someProperty = data.someProperty,
        changedName = data.someNamedPropery,
        _data$test = data.test,
        changedNameWithDefault = _data$test === void 0 ? 1 : _data$test;
    console.log(`  changedNameWithDefault = ${changedNameWithDefault}`);
}

function yourCode() {
    "use strict";

    var someProperty = data.someProperty,
        changedName = data.someNamedPropery,
        changedNameWithDefault = data.test === void 0 ? 1 : data.test;
    console.log(`  changedNameWithDefault = ${changedNameWithDefault}`);
}

console.log("ES2015 original code:");
es2015OriginalCode();
console.log("Babel's code:");
babelCode();
console.log("Your code:");
yourCode();
.as-console-wrapper {
    max-height: 100% !important;
}

While we can tell looking at the code that test isn't an accessor property in that specific example, the code transformations don't usually work with that much context, so this is the safer general case way to translate that code.

user_1572470
Related