GUIDE

The road ahead will be long and our climb will be steep

ES6 Introduction

| Comments

What is ES6?

It’s ECMAScript 6, the standard of the next generation of javascript. Now ECMAScript 6 is renamed to ECMAScript 2015, that mean it was released in 2015.

ECMAScript is a specification, Javascript is an implementation.

ECMA is an international, they standardize the scripting language.

There are released versions of ECMAScript.

Other little languages compile into javascript, such as CoffeeScript, TypeScript. ## New features

  • Constants
ECMAScript 6 
1const PI = 3.14
2PI > 3.0
ECMAScript 5 
1
2
3
4
5
6
7
8
9

//  only in ES5 through the help of object properties
//  and only in global context and not in a block scope
Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})
PI > 3.0;
  • Arrow Functions
ECMAScript 6 
1odds  = evens.map(v => v + 1)
2pairs = evens.map(v => ({ even: v, odd: v + 1 }))
3nums  = evens.map((v, i) => v + i)
ECMAScript 5 
1
2
3

odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });
  • Default Parameter Values
ECMAScript 6 
1function f (x, y = 7, z = 42) {
2    return x + y + z
3}
4f(1) === 50
ECMAScript 5 
1
2
3
4
5
6
7
8

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1) === 50;
  • Enhanced Object Properties
ECMAScript 6 
 1// Property Shorthand
 2obj = { x, y }
 3
 4// Computed Property Names
 5obj = {
 6    foo: "bar",
 7    [ "prop_" + foo() ]: 42
 8}
 9
10// Method Properties
11obj = {
12    foo (a, b) {
13        …
14    },
15    bar (x, y) {
16        …
17    },
18    *quux (x, y) {
19        …
20    }
21}
ECMAScript 5 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// Property Shorthand
obj = { x: x, y: y };

// Computed Property Names
obj = {
    foo: "bar"
};
obj[ "prop_" + foo() ] = 42;

// Method Properties
obj = {
    foo: function (a, b) {
        …
    },
    bar: function (x, y) {
        …
    },
    //  quux: no equivalent in ES5
};
  • Modules
ECMAScript 6 
 1//  lib/math.js
 2export function sum (x, y) { return x + y }
 3export var pi = 3.141593
 4
 5//  someApp.js
 6import * as math from "lib/math"
 7console.log("2π = " + math.sum(math.pi, math.pi))
 8
 9//  otherApp.js
10import { sum, pi } from "lib/math"
11console.log("2π = " + sum(pi, pi))
ECMAScript 5 
1
2
3
4
5
6
7
8
9
10
11
12

//  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));
  • Classes
ECMAScript 6 
 1class Shape {
 2    constructor (id, x, y) {
 3        this.id = id
 4        this.move(x, y)
 5    }
 6    move (x, y) {
 7        this.x = x
 8        this.y = y
 9    }
10}
ECMAScript 5 
1
2
3
4
5
6
7
8

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;
};
  • Generator Functions
ECMAScript 6 
 1function* idMaker(){
 2  var index = 0;
 3  while(index < 3)
 4    yield index++;
 5}
 6
 7var gen = idMaker();
 8
 9console.log(gen.next().value); // 0
10console.log(gen.next().value); // 1
11console.log(gen.next().value); // 2
12console.log(gen.next().value); // undefined
  • Spread operator
ECMAScript 6 
 1function add(a, b) {
 2  return a + b;
 3}
 4
 5let nums = [5, 4];
 6
 7console.log(add(...nums));
 8
 9let foo = "foo"
10let chars = [ ...str ] // [ "f", "o", "o" ]
  • Proxying
ECMAScript 6 
 1let target = {
 2    foo: "Welcome, foo"
 3}
 4let proxy = new Proxy(target, {
 5    get (receiver, name) {
 6        return name in receiver ? receiver[name] : `Hello, ${name}`
 7    }
 8})
 9proxy.foo   === "Welcome, foo"
10proxy.world === "Hello, world"
  • Map and Set Data-Structure

To see more, we could visit, ECMAScript 6 — New Features: Overview & Comparison

Compile

Compile ES6 to ES5.

Why need compile? because the browser support of ES6 isn’t enough.

Babel is a new name of ES6to5. It can integrate with many js / node frameworks.

Conclusion

OK, let’s start ES6 now!!!

Comments