Introduction to ES6 with Tommy Cresine

Introduction to ES6Introduction to ES6Tommy Cresine

What is ECMAScript?What is ECMAScript?

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

Current Compatibility Current Compatibility BrowsersBrowsersFF 36 - 65%

Chrome 41 - 45%IE 11 - 15%

RuntimesRuntimesio.js - 43%

Node - 25%PJS - 5%

Compilers & PolyfillsCompilers & PolyfillsBabel + core-js - 76%

Traceur - 64%Closure - 33%

es6-shim - 21%JSX- 16%

TypeScript- 9%

Object Literal ChangesObject Literal Changes

let first = 'John';let last = 'Doe';

let obj = { first, last };

// equivalent tolet obj = { first: first, last: last };

Property Value Shorthands

Method Definitionslet obj = { myMethod() { return 'foo'; }};

//equivvar obj = { myMethod: function() { return 'foo'; }};

let propKey = 'foo'; let obj = { [propKey]: true, ['b'+'ar']: 123};

Computed Property Keys

let obj = { ['f'+'oo']() { return 'bar'; }};

console.log(obj.foo()); // bar

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

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

//Subclass built-in classesclass AppError extends Error { ...}

Arrow FunctionsArrow Functions// More compact syntaxlet 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` });}

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

Variables, Assigning & ParamsVariables, Assigning & Params// block-scoped let (write) const (read)function order(x, y) { if (x > y) { let tmp = x; x = y; y = tmp; } // ReferenceError: tmp is not defined console.log(tmp===x); return [x, y];}

//spread operatorlet arr = [-1, 7, 2];// 7let highest = Math.max(...arr);

// 2011, December 24, 00:00new Date(...[2011, 11, 24]) // Non-destructively concatenate elements// [-1, 7, 2, 9, -6]let arr2 = [...arr, 9, -6];

//default param valuesfunction initGrid(x=0, y=0) { // ...}

//destructuringlet obj = { first: 'Jane', last: 'Doe' };// f = 'Jane', l = 'Doelet { first: f, last: l } = obj;

//named params/optionsclass Person { ... displayName({ first: this.fname, last: this.lname } = {}) { ... }

}

let person = new Person();person.displayName({ first: 'Joe', last: 'Dirt' });person.displayName({ last: 'Smith' });

//rest paramsfunction foo(pattern, ...params) { return params;}// [1, 2]console.log(foo('bar', 1, 2));

Iterators, Loops & GeneratorsIterators, Loops & Generators//for-of looplet arr = ['foo', 'bar', 'baz'];

for (let element of arr) { console.log(element);}/* Output: foo bar baz*/ for (let [index,element] of arr.entries()) { console.log(`${index}. ${element}`);}/* Output: 0. foo 1. bar 2. baz*/

// Generator function, iterating over objfunction* objectEntries(obj) { for (let key of Reflect.ownKeys(obj)) { // pause and return a value yield [key, obj[key]]; }}

let obj = { first: 'Jane', last: 'Doe' };

for (let [key,value] of objectEntries(obj)) { console.log(`${key}. ${value}`);}

/* Output: first. Jane last. Doe*/

Template StringsTemplate Strings

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

let text = `This is a textthat spansmultiple lines.`;

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

SymbolsSymbolslet 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

ProxiesProxieslet 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 MethodsUtility Methods//Object.assignclass 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) '*****'

CollectionsCollections/** 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 ]

PromisesPromisesfunction 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(); });}//implementationhttpGet('http://site.com/route').then( response => { console.log('Contents: ' + response); }, error => { console.error('Something went wrong', error); });

Using ES6 NowUsing ES6 NowNode v0.12.x using --harmony flagio.js v1.x ships with stable ES6 featuresAngularJS 2.0Aurelia FrameworkBabel ES6 to ES5 transpiler

Aurelia FrameworkAurelia Framework

Next generation JS client-side frameworkfeaturing Web Components, ES6 andmore.

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

Thank YouThank You