Apresentando o EcmaScript 6

Globalcode – Open4education

EcmaScript 6

Giovanni Bassi

giovanni@lambda3.com.br

@giovannibassi

Victor Cavalcante

victor@cavalcante.net

@vcavalcante

Globalcode – Open4education

Agenda

Por que?

Novidades

Valores padrão para parâmetros

let e const

Declaração concisa de função

Funções “flecha”

Operador “spread”

Array comprehension

Quando?

Classes! \o/

Módulos

Destructuring

Generators

Promises

Porque?

Globalcode – Open4education

Novidades

Globalcode – Open4education

Valores padrão para parâmetros

// ES 5

function inc(x, y) {

y = y || 1;

return x + y;

}

// ES 6

function inc(x, y = 1) {

return x += y;

}

Globalcode – Open4education

let

// ES 6function doSomething() {let N = 5;if (someCondition) {

let N = 10;doSomethingElse(N);

}console.log(N); // 5

}

Globalcode – Open4education

const

const limit = 100;limit = 200; // SyntaxError

Globalcode – Open4education

Declaração concisa de função

var Person = {name: 'Joe',hello() {console.log('Ola ', this.name);

}};

Globalcode – Open4education

Funções “flecha” =>

// ES 5[1,2,3].map(function (x) {return x * x;

});

// ES 6[1,2,3].map(x => x * x);

let indefinido = () => {};

let um = () => 1;

Cuidado

com o

this!

Globalcode – Open4education

Operador “spread”

// ES 5var max = Math.max.apply(null, [14, 3]);

// ES 6var max = Math.max(...[14, 3]);

Globalcode – Open4education

Operador “spread”

function guarde(name, ...itens) {itens.forEach(function (item) {cofre[name].push(item)

});}

guarde('João', 'cartas', 'dinheiro');

Globalcode – Open4education

Array comprehension

// ES 5let quadrados = [1, 2].map(function (i) { return i * I

});

// ES 6quadrados = [for (i of [1, 2]) i * i];

Globalcode – Open4education

Array comprehension (com filtro)

// ES 5let arrayComUm =[1,5].filter(function(i){ return i < 3;

});

// ES 6arrayComUm = [for (i of [1,5]) if (i < 3) i];

Globalcode – Open4education

Array comprehension (aninhado)

let posicoesXadrez =[for (x of 'abcdefgh'.split(''))for (y of '12345678'.split('')) (x+y)];

Globalcode – Open4education

Classes \o/

class Vehicle {constructor(color) {this.color = color;this.speed = 0;

}drive() {this.speed = 40;

}}

Globalcode – Open4education

Classes (herança)

class Car extends Vehicle {constructor(brand, color) {super(color);this.brand = brand;this.wheels = 4;

}}

Globalcode – Open4education

Módulos

//mathlib.jsconst HALF = 0.5;export function sqrt(x) {return Math.exp(HALF * Math.log(x));

}

//outroArquivo.jsimport { sqrt } from 'mathlib';console.log(sqrt(16));

Globalcode – Open4education

Destructuring (arrays)

var [a,b,c] = [1,2,3];console.log(a, b, c); // 1 2 3

let nums = () => [1,2,3];let [,,tres] = nums()console.log(tres); // 3

function foo([um, dois], tres) {console.log(um, dois, tres);

}foo([1, 2], 3); // 1 2 3

Globalcode – Open4education

Destructuring (objetos)

var { foo, bar } = { foo: "lorem", bar: "ipsum" };// foo: "lorem", bar: "ipsum"

var { foo:f, bar:b } = { foo: "lorem", bar: "ipsum" };// f: "lorem", b: "ipsum"

try {} catch ({type, message, filename, lineNumber}) {}

Globalcode – Open4education

Generators

function* foo() {yield 'foo';yield 'bar';yield 'baz';

}

var x = foo();console.log(x.next().value); // 'foo'console.log(x.next().value); // 'bar'console.log(x.next().value); // 'baz'

Globalcode – Open4education

Generators (além)

body = yield db.find('something');

Globalcode – Open4education

Promises nativas! (Criando)

var promise = new Promise((resolve, reject) => {if (/* tudo ok */) {resolve("Funfou!");

}else {reject(new Error("quebrou"));

}});

Globalcode – Open4education

Promises (consumindo)

promise.then(function(result) {console.log(result); //Funfou!"

}, function(err) {console.log(err); // Error: "quebrou"

});

Globalcode – Open4education

Quando?

Hoje (incompleto):

Node 0.11

Chrome Canary

Firefox Nightly

Transpilers diversos

Versão final

Era esperado no fim desse ano, mas...

... tudo indica que fica pronto no primeiro semestre do

ano que vem

... só então devemos ver suporte no Node (uso

imediato), e nos navegadores (mais lento – depende de

adoção)

Globalcode – Open4education

Obrigado!Giovanni Bassi

giovanni@lambda3.com.br

@giovannibassi

Victor Cavalcante

victor@cavalcante.net

@vcavalcante