study_ES2015-ES6-to-ES5.js

// ES6 Arrows
var compute = (x, y) => {
  x = isNaN(x - 0)? 0: x;
  y = isNaN(y - 0)? 0: y;
  
  return x*y;
};

console.log(compute(2, 3));

// to ES5

"use strict";

var compute = function compute(x, y) {
  x = isNaN(x - 0) ? 0 : x;
  y = isNaN(y - 0) ? 0 : y;

  return x * y;
};

console.log(compute(2, 3));

//
// Arrows -Lexical this-
//

// ES6
var nobitan = {
  favorite: "hirune",
  say(){
    [1, 2, 3].forEach(
      (x)=>console.log(
        "No.", 
        x, 
        this.favorite)
      )
  }
};

nobitan.say();
// toES5
"use strict";

var nobitan = {
  favorite: "hirune",
  say: function say() {
    var _this = this;

    [1, 2, 3].forEach(function (x) {
      return console.log("No.", x, _this.favorite);
    });
  }
};

nobitan.say();

// ES6 Classes
class Hero {
    constructor(name){
        this.name = name;
    }

    say (){
        console.log(this.name + "参上");
    }
}

var hero = new Hero("さうざー");
hero.say();

// to ES5
"use strict";

var _createClass = (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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

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

var Hero = (function () {
    function Hero(name) {
        _classCallCheck(this, Hero);

        this.name = name;
    }

    _createClass(Hero, [{
        key: "say",
        value: function say() {
            console.log(this.name + "参上");
        }
    }]);

    return Hero;
})();

var hero = new Hero("さうざー");
hero.say();


// Classes - extends -
class Hero {
    constructor(name){
        this.name = name;
    }

    say (){
        console.log(this.name + "参上");
    }
}

class HokuKen extends Hero {
    constructor(){
        super("けんしろ");
    }
    say (){
        console.log("お前はもう○○だ");
        super.say();
    }
}

var hokuken = new HokuKen();
hokuken.say();

// to ES5 
"use strict";

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

var _createClass = (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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }

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

var Hero = (function () {
    function Hero(name) {
        _classCallCheck(this, Hero);

        this.name = name;
    }

    _createClass(Hero, [{
        key: "say",
        value: function say() {
            console.log(this.name + "参上");
        }
    }]);

    return Hero;
})();

var HokuKen = (function (_Hero) {
    function HokuKen() {
        _classCallCheck(this, HokuKen);

        _get(Object.getPrototypeOf(HokuKen.prototype), "constructor", this).call(this, "けんしろ");
    }

    _inherits(HokuKen, _Hero);

    _createClass(HokuKen, [{
        key: "say",
        value: function say() {
            console.log("お前はもう○○だ");
            _get(Object.getPrototypeOf(HokuKen.prototype), "say", this).call(this);
        }
    }]);

    return HokuKen;
})(Hero);

var hokuken = new HokuKen();
hokuken.say();

// Enhanced Object Literals
// Shorthand
var favorite = "hirune";

var nobitan = {
    favorite,
    say(){
        [1, 2, 3].forEach(
            (x)=>console.log(
                "No.",
                x,
                this.favorite)
        )
    }
};

nobitan.say();

// toES5
"use strict";

var favorite = "hirune";

var nobitan = {
    favorite: favorite,
    say: function say() {
        var _this = this;

        [1, 2, 3].forEach(function (x) {
            return console.log("No.", x, _this.favorite);
        });
    }
};

nobitan.say();

// Enhanced Object Literals
// Computed (dynamic) property names
var favorite = "hirune";

var nobitan = {
    favorite,
    say(){
        [1, 2, 3].map(
            (i) => {
                return {["fav-"+i]: this.favorite};
            }
        ).forEach(
            (x)=>console.log(x)
        );
    }
};

nobitan.say();
//to ES5
// Enhanced Object Literals
// Computed (dynamic) property names
"use strict";

function _defineProperty(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); }

var favorite = "hirune";

var nobitan = {
    favorite: favorite,
    say: function say() {
        var _this = this;

        [1, 2, 3].map(function (i) {
            return _defineProperty({}, "fav-" + i, _this.favorite);
        }).forEach(function (x) {
            return console.log(x);
        });
    }
};

nobitan.say();

//
// Template Strings 
//

// Basic literal string creation 
console.log(`おれは "\n" じゃいにゃん`);

// Multiline strings
var hello = `こんちは 
 せかい！`;
 
console.log(hello);

// Interpolate variable bindings
var name = "たろう", food = "すし";
console.log(`Hello ${name}, ${food} 食う?`);

// toES5
// Template Strings

// Basic literal string creation
"use strict";

console.log("おれは \"\n\" じゃいにゃん");

// Multiline strings
var hello = "こんちは \n せかい！";

console.log(hello);

// Interpolate variable bindings
var name = "たろう",
    food = "すし";
console.log("Hello " + name + ", " + food + " 食う?");


//
// Destructuring
//

// list matching
var [goku,  ,bejita] = [80,50,70];

// object matching
var {
      name: targetNm,
      option: { op: targetOption }
    } = getTarget();

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {name, option} = getTarget();

// Can be used in parameter position
function eat({food: f, times: t}) {
    console.log(`${f}を${t}回食べたい`);
}
eat({food: "すし", times: 2})

// Fail-soft destructuring
var [hogehoge] = [];
// hogehoge === undefined;

// Fail-soft destructuring with defaults
var [fugafuga = "OK"] = [];
// fugafuka === "OK";

// to ES5

// list matching
"use strict";

var _ref = [80, 50, 70];
var goku = _ref[0];
var bejita = _ref[2];

// object matching

var _getTarget = getTarget();

var targetNm = _getTarget.name;
var targetOption = _getTarget.option.op;

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope

var _getTarget2 = getTarget();

var name = _getTarget2.name;
var option = _getTarget2.option;

// Can be used in parameter position
function eat(_ref2) {
    var f = _ref2.food;
    var t = _ref2.times;

    console.log("" + f + "を" + t + "回食べたい");
}
eat({ food: "すし", times: 2 });

// Fail-soft destructuring
var _ref3 = [];
var hogehoge = _ref3[0];

// hogehoge === undefined;

// Fail-soft destructuring with defaults
var _ref4 = [];

// fugafuka === "OK";
var _ref4$0 = _ref4[0];
var fugafuga = _ref4$0 === undefined ? "OK" : _ref4$0;


/*
 * Default + Rest + Spread
 */ 

// Default Params
function cal(x, y = 2) {
    return x * y;
}
console.log(cal(3)); // 3*2=>6

// Rest Params
function entry(own, ...list) {
    list.forEach(
        (item)=>  console.log(`${own}は ${item} 持ってる`)
    );
}
entry("スネヲ", "くるま", "ひこうき", "ふね");

// Spread Operator
function foge(x, y, z) {
    return x * y * z;
}
console.log(foge(...[2, 3, 4])); // == 24

// toES5
// Default Params
"use strict";

function cal(x) {
    var y = arguments[1] === undefined ? 2 : arguments[1];

    return x * y;
}
console.log(cal(3)); // 3*2=>6

// Rest Params
function entry(own) {
    for (var _len = arguments.length, list = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        list[_key - 1] = arguments[_key];
    }

    list.forEach(function (item) {
        return console.log("" + own + "は " + item + " 持ってる");
    });
}
entry("スネヲ", "くるま", "ひこうき", "ふね");

// Spread Operator
function foge(x, y, z) {
    return x * y * z;
}
console.log(foge.apply(undefined, [2, 3, 4])); // == 24

//
// Let
//
var varX = 10;
let letX = 20;

{
  var varX = 1;
  let letX = 2;
  console.log(varX, letX);
}

console.log(varX, letX);

// toES5
var varX = 10;
var letX = 20;

{
  var varX = 1;
  var _letX = 2;
  console.log(varX, _letX);
}

console.log(varX, letX);


//
// Let
//
var varX = 10;
let letX = 20;

{
  var varX = 1;
  let letX = 2;
  console.log(varX, letX);
}

console.log(varX, letX);

//
// const
// 
const ON = 1;

ON = 0; // => error! 
//=> "ON" is read-only

// toES5
//
// Let
//
"use strict";

var varX = 10;
var letX = 20;

{
  var varX = 1;
  var _letX = 2;
  console.log(varX, _letX);
}

console.log(varX, letX);

//
// const
//
var ON = 1;

ON;