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

ecmascript 6

By Quy Tran