Introduction to ES6

Tommy Cresine

• ECMAScript is the underlying core language of JS.
   
• The features for ES are defined in a standard known as ECMA-262.
   
• Supersets of ES including Node.js, io.js, and client-side JS add capabilities on top of the core capabilities.
   
• ES6 also known as ECMA Script Harmony is the latest version and reached completion in 2014. 

Object Literal Changes

Classes

// Superclass
class Person {
    constructor(name) {
        this.name = name;
    }
    describe() {
        return 'Person called ' + this.name;
    }
}

// Subclass
class Employee extends Person {
    constructor(name, title) {
        super(name); 
        this.title = title;
    }
    describe() {
        return super.describe() + ' (' + this.title + ')';
    }
}

//Subclass built-in classes
class AppError extends Error {
    ...
}

Arrow Functions

// More compact syntax
let arr = [1, 2, 3];
let squares = arr.map(x => x * x);

// `this` is picked up from surroundings (lexical)
// Therefore: no more `that = this` or bind()
function UiComponent {

    let button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
        console.log('CLICK');
        this.handleClick(); // lexical `this`
    });
}

Modules

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
    
// main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Template Strings

let name = 'Jane';
let str = `Hi ${name}! 3 plus 4 is ${3+4}`;

let text = `This is a text
that spans
multiple lines.`;

//use tags and tag handlers
safehtml`<a href="${url}">${text}</a>`

Symbols

let obj = {
    data: [ 'hello', 'world' ],
    [Symbol.iterator]() {
        const self = this;
        let index = 0;
        return {
            next() {
                if (index < self.data.length) {
                    return {
                        value: self.data[index++]
                    };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (let x of obj) {
    console.log(x);
}
// Output:
// hello
// world

Proxies

let target = {};
let handler = {
    get(target, propKey, receiver) {
        console.log('get ' + propKey);
        return 123;
    }
};
let proxy = new Proxy(target, handler);


/** In console **/
> proxy.foo
    get foo
    123

Utility Methods

//Object.assign
class Point {
    constructor(x, y) {
        Object.assign(this, { x, y });
        // ES6: { x, y } is abbrev. for { x: x, y: y }
    }
}

//Array.prototype.findIndex
> [6, 8, -5].findIndex(x => x < 0)
    2
> [6, 8, 5].findIndex(x => x < 0)
    -1

//Array.prototype.fill
> ['a', 'b', 'c'].fill(7)
    [ 7, 7, 7 ]
> new Array(3).fill(7)
    [ 7, 7, 7 ]

//new String methods
> 'hello world'.startsWith('hello')
    true
> '*'.repeat(5)
    '*****'

Collections

/** Arbitrary values Map keys **/ 
> let obj = {};
> let map = new Map();
    
> map.set(obj, 123);
> map.get(obj)
    123
> map.has(obj)
    true
> map.delete(obj);
    true
> map.has(obj)
    false

/** Sets are unique collections **/
let arr = [5, 1, 5, 7, 7, 5];
let unique = [...new Set(arr)]; // [ 5, 1, 7 ]

Promises

function httpGet(url) {
    return new Promise(
        function (resolve, reject) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (this.status === 200) {
                    // Success
                    resolve(this.response);
                } else {
                    // Something went wrong (404 etc.)
                    reject(new Error(this.statusText));
                }
            }
            request.onerror = function () {
                reject(new Error(
                    'XMLHttpRequest Error: '+this.statusText));
            };
            request.open('GET', url);
            request.send();    
        });
}
//implementation
httpGet('http://site.com/route').then(
    response => {
        console.log('Contents: ' + response);
    },
    error => {
        console.error('Something went wrong', error);
    });

• Node v0.12.x using --harmony flag
• io.js v1.x ships with stable ES6 features
• AngularJS 2.0
• Aurelia Framework
• Babel ES6 to ES5 transpiler

• Written with ES6 & ES7, no dependencies except polyfills.
• Modular architecture: use-at-will or as full-featured.
• MV* with conventions over configuration.
• Dependency Injection Container
• Advanced Routing / Child Routing
• Gulp Dev Pipeline & JSPM client-side packages

Thank You