O documento apresenta as principais novidades da especificação EcmaScript 6 (ES6). Em 3 frases: Apresenta novos recursos como valores padrão para parâmetros, blocos let e const, funções arrow, operador spread, compreensão de arrays, classes, módulos, destructuring e promises. Explica que grande parte dos recursos já está disponível em versões preliminares de navegadores e Node.js, mas a versão final é esperada para o primeiro semestre de 2016.

1. Globalcode – Open4education
EcmaScript 6
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
victor@cavalcante.net
@vcavalcante

3. 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

4. Porque?

5. Globalcode – Open4education
Novidades

6. 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;
}

7. Globalcode – Open4education
let
// ES 6
function doSomething() {
let N = 5;
if (someCondition) {
let N = 10;
doSomethingElse(N);
}
console.log(N); // 5
}

8. Globalcode – Open4education
const
const limit = 100;
limit = 200; // SyntaxError

9. Globalcode – Open4education
Declaração concisa de função
var Person = {
name: 'Joe',
hello() {
console.log('Ola ', this.name);
}
};

10. 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!

11. Globalcode – Open4education
Operador “spread”
// ES 5
var max = Math.max.apply(null, [14, 3]);
// ES 6
var max = Math.max(...[14, 3]);

12. Globalcode – Open4education
Operador “spread”
function guarde(name, ...itens) {
itens.forEach(function (item) {
cofre[name].push(item)
});
}
guarde('João', 'cartas', 'dinheiro');

13. Globalcode – Open4education
Array comprehension
// ES 5
let quadrados = [1, 2].map(function (i) {
return i * I
});
// ES 6
quadrados = [for (i of [1, 2]) i * i];

14. Globalcode – Open4education
Array comprehension (com filtro)
// ES 5
let arrayComUm =[1,5].filter(function(i){
return i < 3;
});
// ES 6
arrayComUm = [for (i of [1,5]) if (i < 3) i];

15. Globalcode – Open4education
Array comprehension (aninhado)
let posicoesXadrez =
[for (x of 'abcdefgh'.split(''))
for (y of '12345678'.split('')) (x+y)];

16. Globalcode – Open4education
Classes o/
class Vehicle {
constructor(color) {
this.color = color;
this.speed = 0;
}
drive() {
this.speed = 40;
}
}

17. Globalcode – Open4education
Classes (herança)
class Car extends Vehicle {
constructor(brand, color) {
super(color);
this.brand = brand;
this.wheels = 4;
}
}

18. Globalcode – Open4education
Módulos
//mathlib.js
const HALF = 0.5;
export function sqrt(x) {
return Math.exp(HALF * Math.log(x));
}
//outroArquivo.js
import { sqrt } from 'mathlib';
console.log(sqrt(16));

19. 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

20. 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}) {}

21. 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'

22. Globalcode – Open4education
Generators (além)
body = yield db.find('something');

23. Globalcode – Open4education
Promises nativas! (Criando)
var promise = new Promise((resolve,
reject) => {
if (/* tudo ok */) {
resolve("Funfou!");
}
else {
reject(new Error("quebrou"));
}
});

24. Globalcode – Open4education
Promises (consumindo)
promise.then(function(result) {
console.log(result); //Funfou!"
}, function(err) {
console.log(err); // Error: "quebrou"
});

25. 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)

26. Globalcode – Open4education
Obrigado!
Giovanni Bassi
giovanni@lambda3.com.br
@giovannibassi
Victor Cavalcante
victor@cavalcante.net
@vcavalcante