Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Apresentando o EcmaScript 6

1,943 views

Published on

Published in: Technology

Apresentando o EcmaScript 6

  1. 1. Globalcode – Open4education EcmaScript 6 Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante victor@cavalcante.net @vcavalcante
  2. 2. 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
  3. 3. Porque?
  4. 4. Globalcode – Open4education Novidades
  5. 5. 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; }
  6. 6. Globalcode – Open4education let // ES 6 function doSomething() { let N = 5; if (someCondition) { let N = 10; doSomethingElse(N); } console.log(N); // 5 }
  7. 7. Globalcode – Open4education const const limit = 100; limit = 200; // SyntaxError
  8. 8. Globalcode – Open4education Declaração concisa de função var Person = { name: 'Joe', hello() { console.log('Ola ', this.name); } };
  9. 9. 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!
  10. 10. Globalcode – Open4education Operador “spread” // ES 5 var max = Math.max.apply(null, [14, 3]); // ES 6 var max = Math.max(...[14, 3]);
  11. 11. Globalcode – Open4education Operador “spread” function guarde(name, ...itens) { itens.forEach(function (item) { cofre[name].push(item) }); } guarde('João', 'cartas', 'dinheiro');
  12. 12. 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];
  13. 13. 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];
  14. 14. Globalcode – Open4education Array comprehension (aninhado) let posicoesXadrez = [for (x of 'abcdefgh'.split('')) for (y of '12345678'.split('')) (x+y)];
  15. 15. Globalcode – Open4education Classes o/ class Vehicle { constructor(color) { this.color = color; this.speed = 0; } drive() { this.speed = 40; } }
  16. 16. Globalcode – Open4education Classes (herança) class Car extends Vehicle { constructor(brand, color) { super(color); this.brand = brand; this.wheels = 4; } }
  17. 17. 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));
  18. 18. 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
  19. 19. 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}) {}
  20. 20. 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'
  21. 21. Globalcode – Open4education Generators (além) body = yield db.find('something');
  22. 22. Globalcode – Open4education Promises nativas! (Criando) var promise = new Promise((resolve, reject) => { if (/* tudo ok */) { resolve("Funfou!"); } else { reject(new Error("quebrou")); } });
  23. 23. Globalcode – Open4education Promises (consumindo) promise.then(function(result) { console.log(result); //Funfou!" }, function(err) { console.log(err); // Error: "quebrou" });
  24. 24. 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)
  25. 25. Globalcode – Open4education Obrigado! Giovanni Bassi giovanni@lambda3.com.br @giovannibassi Victor Cavalcante victor@cavalcante.net @vcavalcante

×