javascript - ¿Por qué Babel introduce una variable no utilizada al desestructurar una propiedad de un objeto?

Acabo de mirar el script compilado de mi código fuente y creo que noté algo raro.

Este código ES6:

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;

Se compila a esto:

"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;

Tengo curiosidad por qué Babel introduce una nueva variable _data$test. ¿No podría ser algo así?

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

Todavía funciona.

Observa que la introducción de una nueva variable ocurre únicamente cuando intento asignar un valor predeterminado si la clave no está presente en la variable data o es undefined.

¿Afecta esto al rendimiento de la aplicación si data.test es lo suficientemente grande? Y me pregunto si el recolector de basura se encarga de ello (variable _data$test).

Respuesta #1

¿No puede ser algo así?

No, pero es ligeramente sutil por qué no: Si test es una propiedad accessor, acceder a ella es una llamada a función. El código de desestructuración, y la traducción de Babel del mismo, solo llamará al accesor una vez. Tu cambio lo llamaría dos veces. Aquí hay un ejemplo:

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;
}

Aunque podemos ver observando el código que test no es una propiedad de acceso en ese ejemplo específico, las transformaciones de código generalmente no funcionan con tanto contexto, por lo que esta es la manera más segura y general de traducir ese código.