Understanding how new ECMAScript features work by observing Babel's transformation output.md

• Go to https://babeljs.io/repl.
• Remove (delete) everything in the "targets" section.
• Expand the "env preset" section and enable it.
• In the "env preset" section, select (enable) "loose". This way, at the expense of generating code that is not 100% spec-compliant, Babel will generate code that is as clean as possible. This way, it is easier to have an idea how a new ES feature would be implemented in old versions of ES.

For example, for the input:

class Human {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }

  getFullName() {
    return this.firstName + " " + this.lastName
  }
}

The output with the configuration described above is:

"use strict";

var Human = /*#__PURE__*/function () {
  function Human(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  var _proto = Human.prototype;

  _proto.getFullName = function getFullName() {
    return this.firstName + " " + this.lastName;
  };

  return Human;
}();

Which we can manually further simplify as:

"use strict";

var Human = function () {
  function Human(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  Human.prototype.getFullName = function getFullName() {
    return this.firstName + " " + this.lastName;
  };

  return Human;
}();

Whereas the output if we keep all the configuration the same, but only uncheck (disable) the "loose" entry in the "env preset" section:

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Human = /*#__PURE__*/function () {
  function Human(firstName, lastName) {
    _classCallCheck(this, Human);

    this.firstName = firstName;
    this.lastName = lastName;
  }

  _createClass(Human, [{
    key: "getFullName",
    value: function getFullName() {
      return this.firstName + " " + this.lastName;
    }
  }]);

  return Human;
}();

So, as you can observe, if the "loose" mode is not enabled, Babel will generate 100% (almost 100%?) spec-compliant code, and in the pursuit of this, the generated code will be a lot more complicated.