ES Harmony

The Road so Far

Netscape 10 days

Brendan Eich

Microsoft

Arrow Functions

Shorter syntax compared to function expressions and lexically binds the this value.

ES5

ES6

Block Scope

Function Scope (var)

Block Scope (let)

Template Strings

Multi-line String

Expression interpolation

Destructuring Assignments

• Object and array destructuring
• Multiple-value returns
• Destruct objects passed as function parameter

ES6

Parameters

Default Parameters

ES5

ES6

Rest Parameters

Spread Operator: Inverse of a Rest Parameter (Replaces Function.prototype.apply)

Classes

ES6 - Product Class

ES6 - Inheritance

Generators

A function becomes a generator if it contains one or more yield expressions.

Generate Infinite Integers

Iterator

Iterating over generated values

Modules

• CommonJS (Node.js)
• AMD (RequireJS)

CommonJS implementation

main.js

import.js

Exporting Class "Book"

product.js

import.js

Proxy

The npm module harmony-proxy was used on the examples

var Proxy = require('harmony-proxy');

[pt-BR Article] ECMAScript 6 Proxy by @caio_gondim

Using Proxy to validate the passed value

Promises

Deferred and asynchronous computations

Callback

Callback Chain

ES6 Promises

jQuery's Deferred to Promise

							var promise = Promise.resolve($.ajax('/get.json'));
						

Using Promises Today

Standard Library

Maps

Sets

Additions

• Object.assign
• Array.from
• Array.of
• Array.prototype.find
• String.prototype.startsWith, String.prototype.endsWith
• String.prototype.contains
• String.prototype.normalize

ES7 Hype

Async Functions

async function loadProducts() {
    let books = await getJSON('books.json');
    let computers = await getJSON('computers.json');

    let products = [...books, ...computers];
    Product.addToStore(products);
}						
						

ES7 Hype

Array/Generator Comprehensions

[for (x of a) for (y of b) if (x > y) [x,y]]

let numbers = [1,2,3];
let squares = [for (x of numbers) x*x];


(for (x of a) for (y of b) if (x > y) [x,y])