@manhnguyenv

Welcome to my blog!

ES6 vs ES5

July 12, 2017 17:23

1) Classes

1.1) ES6

class Shape {

    constructor (id, x, y) {

        this.id = id

        this.move(x, y)

    }

    move (x, y) {

        this.x = x

        this.y = y

    }

}

Inheritance

class MetaLanguage extends Language {

  constructor(x, y, z, version) {

    super(x, y, z);

    this.version = version;

  }

}

1.2) ES5

var Shape = function (id, x, y) {

    this.id = id;

    this.move(x, y);

};

Shape.prototype.move = function (x, y) {

    this.x = x;

    this.y = y;

};

Inheritance

Teacher.prototype = Object.create(Person.prototype);

 Teacher.prototype.constructor = Teacher; Teacher.prototype.greeting = function() {  var prefix;   if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {    prefix = 'Mr.';  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {    prefix = 'Mrs.';  } else {    prefix = 'Mx.';  }   alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');}; 

Read more: https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Example

 

2) Modules

2.1) ES6

//  lib/math.js

export function sum (x, y) { return x + y }

export var pi = 3.141593

 

//  someApp.js

import * as math from "lib/math"

console.log("2π = " + math.sum(math.pi, math.pi))

 

//  otherApp.js

import { sum, pi } from "lib/math"

console.log("2π = " + sum(pi, pi))

2.2) ES5

//  lib/math.js

LibMath = {};

LibMath.sum = function (x, y) { return x + y };

LibMath.pi = 3.141593;

 

//  someApp.js

var math = LibMath;

console.log("2π = " + math.sum(math.pi, math.pi));

 

//  otherApp.js

var sum = LibMath.sum, pi = LibMath.pi;

console.log("2π = " + sum(pi, pi));

 

3) Promises

ES6: Promises

function msgAfterTimeout (msg, who, timeout) {

    return new Promise((resolve, reject) => {

        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)

    })

}

msgAfterTimeout("", "Foo", 100).then((msg) =>

    msgAfterTimeout(msg, "Bar", 200)

).then((msg) => {

    console.log(`done after 300ms:${msg}`)

})

ES5: Callback

function msgAfterTimeout (msg, who, timeout, onDone) {

    setTimeout(function () {

        onDone(msg + " Hello " + who + "!");

    }, timeout);

}

msgAfterTimeout("", "Foo", 100, function (msg) {

    msgAfterTimeout(msg, "Bar", 200, function (msg) {

        console.log("done after 300ms:" + msg);

    });

});

 

4) Block Scoping

for (let i = 0; i < a.length; i++) {

    let x = a[i]

    //etc.

}

 

5) TypeScript

5.1) New

class Greeter {

    greeting: string;

    constructor (message: string) {

        this.greeting = message;

    }

    greet() {

        return "Hello, " + this.greeting;

    }

5.2) Old

var Greeter = (function () {

    function Greeter(message) {

        this.greeting = message;

    }

    Greeter.prototype.greet = function () {

        return "Hello, " + this.greeting;

    };

    return Greeter;

})();

5.3) Sample Method

function add(x : number, y : number) : number {

    return x + y;

}

 

add('a', 'b'); // compiler error

 

Categories

Recent posts