ECMASCRIPT 6+

Author: Tran Tuan Quy

Date: Dec 2, 2014

Updated: Nov 25th, 2015

content

New Key Features

Browser Support

Run EC6 on older Browser

Reference Documents

new key features

• Block Scope
  
• Destructuring
• Collections
• Iterator
• Generator
• Function
• Class
• Rest parameter
  

Block Scope

Example:

function f() {
    {
        let x; {
            // okay, block scoped name
            const x = "sneaky";
            // error, const
            x = "foo";
        }
        // error, already declared in block
        let x = "inner";
    }
}

Destructuring

Example: 

var options = {
        repeat: true,
        save: false
    };
// later
var { repeat: localRepeat, save: localSave } = options;

// list matching
var [a, , b] = [1,2,3];

function setCookie(name, value, { secure, path, domain, expires }) {
    // ...
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
});

Iterator

Example:

function createIterator(items) {
    let i = 0;
    return {
        next: function() {
            let done = (i >= items.length);
            let value = !done ? items[i++] : undefined;
            return {
                done: done,
                value: value
            };
        }
    };
}
let iterator = createIterator([1, 2, 3]);

for-of

Example:

let iterator = createIterator([1, 2, 3]);
for (let i of iterator) {
    console.log(i);
}

generator

Example:

// generator
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

// generators are called like regular functions but return an iterator
let iterator = createIterator();

for (let i of iterator) {
    console.log(i);
}

another generator

Example:

let createIterator = function *(items) {
    for (let i=0; i < items.length; i++) {
        yield items[i];
    }
};

let iterator = createIterator([1, 2, 3]);

define function with arrow

Example: 

var reflect = value => value;
// effectively equivalent to:
var reflect = function(value) {
    return value;
};

var sum = (num1, num2) => num1 + num2;
// effectively equivalent to:
var sum = function(num1, num2) {
    return num1 + num2;
};

Who can explain?

Example: 

let person = ((name) => {
    return {
        getName() {
            return name;
        }
    };
})("Nicholas");

default + rest + spread

Example: 

function f(x, y=12) {
  return x + y;
}
//f(3) ==> 15

function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
//f(3, "hello", true) ==> 6

function f(x, y, z) {
  return x + y + z;
}
//f(...[1,2,3]) ==> 6

Map + Set

Example: 

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

Class

Example: 

class Employee extends Person {
  constructor(firstName, lastName) {
	super(firstName, lastName);

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

  setPosition(position) {
	this.position = position;
  }

  getFullName() {
	return this.firstName + ' ' + this.lastName;
  }
}

Browser support

http://kangax.github.io/compat-table/es6/

Run EC6 on older Browser

use ES6-compiler

https://github.com/google/traceur-compiler
http://babeljs.io/

Demo

https://google.github.io/traceur-compiler/demo/repl.html#

Reference document

1. https://leanpub.com/understandinges6/read
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
   
3. https://github.com/lukehoban/es6features
4. My practices: http://codepen.io/collection/AcmEK/
   

Q&A

THanks