apresentando o ecmascript 6
TRANSCRIPT
Globalcode – Open4education
EcmaScript 6
Giovanni Bassi
@giovannibassi
Victor Cavalcante
@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
@giovannibassi
Victor Cavalcante
@vcavalcante