A nova versão do JavaScript esta por vir, esta é visão das novidades e como podemos utilizar hoje. Das novas declarações de variáveis as declarações de função, das novas estruturas de dados as novas APIs disponíveis para nos desenvolvedores.

1. ECMASCRIPT 6
O futuro do Javascript hoje

2. HENRIQUE LIMAS
google.com/+HenriqueRamosLimas
github/HenriqueLimas
henrique.ramos.limas@gmail.com

3. DECLARAÇÕES DEVARIÁVEIS

4. let jedi = {
firstName: 'Luke',
lastName: 'Skywalker'
};
!
if (jedi) {
let darkSide = false;
}
!
console.log(darkSide);
!
Erro na execução
Variaveis podem ser
acessada somente no
escopo
let

5. const JEDI_MASTER = {
name: 'Yoda'
};
!
JEDI_MASTER = jedi;
!
conts DARTH;
!
!
const
Variáveis devem ser
inicializaras
Erro de “read-only”

6. let [force, darkSide] = ['Yoda', ‘Darth Sidious'];
!
let {force, darkSide} = {force: 'Yoda', darkSide: 'Darth Sidious'};
!
!
!
!
Destructuring

7. CHAVES DE OBJETOS

8. let jedi = {
['full' + 'Name']: 'Luke Skywalker'
};
!
console.log(jedi.fullName);
!
!
!
!
Keys computadas

9. function novoJedi(firstName, lastName) {
return {
firstName,
lastName
};
}
!
!
!
firstName: firstName
Keys abreviadas

10. PARÂMETROS E ARGUMENTOS

11. function novoJedi( {firstName, lastName} ) {
console.log(firstName);
console.log(lastName);
}
!
!
novoJedi( {firstName: 'Luke', lastName: ‘Skywalker'} );
!
!
Nomeando parâmetros
Usando “Destructuring”

12. function novoJedi(firstName='Luke', lastName='Skywawlker') {
console.log(firstName);
console.log(lastName);
}
!
!
novoJedi();
!
!
firstName = firstName || ‘Luke’;
Parâmetros default

14. function novoJedi(firstName, lastName, ...forcas) {
return {
firstName,
lastName,
forcas
};
}
!
novoJedi('Luke', 'Skywalker', 'sabre de luz', 'força');
!
Usando os “…”
Parâmetros Rest

15. new Date(...[1977, 5, 25]);
!
let arr = [42, 23, 21];
!
Math.max(…arr);
!
!
!
!
Math.max(42, 23, 21);
new Date(1977, 5, 25)
Spread operator

16. let jedi = {
firstName: 'Luke',
lastName: 'Skywalker'
};
!
let DarthVader = `${jedi.firstName} ${jedi.lastName},
I am your father.`;
!
!
Chamando o objeto “jedi”
Template Strings

17. let jedis = ['Luke Skywalker', 'Obi-wan Kenobi'];
!
jedis.forEach( jedi => {
console.log(jedi);
});
!
!
!
!
Usando a “flecha”
Arrows function

18. let jedis = ['Luke Skywalker', 'Obi-wan Kenobi'];
!
let theForce = {
jedis,
printJedis: function() {
jedis.forEach((jedi, key) => {
console.log(this.jedis[key]);
});
}
}
!
console.log(theForce.printJedis());
Mesma referência do
objeto “theForce”
Arrows function

19. CLASSES E SUBCLASSES

21. class Jedi {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
usarForca() {}
usarSabreDeLuz() {
console.log('Zuuuuumm');
}
}
!
Criação de propriedades
“read-only”
Método executado na
instância
Class

22. let luke = new Jedi('Luke', 'Skywalker');
!
luke.fullName;
luke.usarForca();
luke.usarSabreDeLuz();
!
!
!
!
!
!
Class

23. class Human {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
}
!
!
!
!
Subclasses

24. !
class Jedi extends Human {
constructor(firstName, lastName) {
super(firstName, lastName);
}
usarForca() {}
usarSabreDeLuz() {
console.log('Zuuuuumm');
}
}
!
!
!
!
chamada da classe
“Human”
Extendendo a class
“Human”
Subclasses

25. !
!
let han = new Human(‘Han’, ‘Solo’);
let luke = new Jedi('Luke', 'Skywalker');
!
luke.fullName;
luke.usarForca();
luke.usarSabreDeLuz();
!
han.fullName;
!
!
!
!
!
Subclasses

26. MODULARIZAÇÃO

27. // jedi.js
export class Jedi {}
!
// force.js
import {Jedi} from './jedi';
!
export let force = {
jedis: [new Jedi('Luke', 'Skywalker'), new Jedi('Obi-wan', 'Kenobi')]
};
!
// empire.js
import {force} from './force';
!
!
exportando um objeto.
Importando a classe “Jedi”
do modulo “jedi"
Modulos

28. GENERATORS E ITERATORS

29. ITERATORS
Iteração nas estruturas de dados

30. function criarIterator(arr) {
let index = 0;
return {
next() {
if (index < arr.length) {
return {
done: false,
value: arr[index++]
};
} else {
return { done: true};
}
}
};
}
Objeto de retorno
Função que passa para
próxima iteração
Iterator

31. let iterator = criarIterator(['Luke', 'Obi-wan']);
!
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
!
!
// {“done”:false,"value":"Luke"}
// {“done”:false,"value":"Obi-wan"}
// {“done”:true}
!
!
Criando o nosso Iterator
Iterator

32. GENERATORS
Suspender a execução de funções

33. function* generatorFunction() {
yield 'Luke Skywalker';
yield 'Obi-wan Kenobi';
}
!
let generator = generatorFunction();
!
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
!
// {“value”:"Luke Skywalker","done":false}
// {“value”:"Obi-wan Kenobi","done":false}
// {“done”:true}
!
Iterators
Usando o *
Generators

34. LOOP FOR…OF

35. function* generatorFunction() {
yield 'Luke Skywalker';
yield 'Obi-wan Kenobi';
}
!
let generator = generatorFunction();
!
for(let jedi of generator) {
console.log(jedi);
}
!
// Luke Skywalker
// Obi-wan Kenobi
!
Iterando todas as
suspensões da função
For…of

36. SYMBOL, UM NOVOTIPO PRIMITIVO

37. let yoda = Symbol();
!
typeof yoda; // symbol
!
let jedis = {};
!
let LUKE_SKYWALKER = Symbol();
!
jedis[LUKE_SKYWALKER] = new Jedi('Luke', 'Skywalker');
!
!
!
!
!
!
Utilizando Symbol como
chaves
retorna um novo Symbol
unico para o a variável
Symbols

38. const HUMANS = Symbol();
const HUTTS = Symbol();
const JAWAS = Symbol();
const TUSKEN_RAIDERS = Symbol();
!
function getTatooineHabitant(habitant) {
switch(habitant) {
case HUMANS:
...
case HUTTS:
...
case JAWAS:
...
case TUSKEN_RAIDERS:
...
}
}
Symbol como enums
Symbols

39. let jedis = {
membros: [new Jedi('Luke', 'Skywalker'), new Jedi('Obi-Wan', 'Kenobi')],
[Symbol.iterator]() {
const self = this;
let index = 0;
return {
next() {
if (index < self.membros.length) {
return { value: self.membros[index++]};
} else {
return { done: true};
}
}
}
}
}
Criação de Iterators
Symbols

40. ESTRUTURAS DE DADOS

41. let empire = new Map();
!
let jedi = {};
!
empire.set(jedi, ‘Luke’);
empire.get(jedi);
!
empire.has(jedi);
empire.delete(jedi);
!
empire.clear();
!
!
!
Utilizando chaves por
referência
Map

42. for(let key of empire.keys()) {
console.log(key); // {}
}
!
for(let values of empire.values()) {
console.log(values); // Luke
}
!
for(let [key, value] of empire) {
console.log(key, value); // {} Luke
}
!
!
!
Iterando as chaves e os
valores
Iterando todas as chaves
Map
Iterando todos valores

43. let empire = new WeakMap();
!
let jedi = {};
!
empire.set(jedi, ‘Luke’);
empire.get(jedi);
!
empire.has(jedi);
empire.delete(jedi);
!
!
!
!
!
Mesmos metodos do Map
Criação de Map sem ser
coletados no garbage
WeakMap

44. let empire = new Set();
!
let jedi = {
name: 'Luke'
};
!
empire.add(jedi);
empire.has(jedi);
!
empire.delete(jedi);
empire.clear();
!
!
!
Limpando a estrutura
Adicionando uma chave
na estrutura
Set

45. for(let value of empire) {
console.log(value); // { name: 'Luke' };
}
!
empire.forEach(value => console.log(value));
!
!
!
!
!
!
!
Passando por todos os
elementos
Iteração dos elementos
Set

46. let empire = new WeakSet();
!
let jedi = {
name: 'Luke'
};
!
empire.add(jedi);
empire.has(jedi);
!
empire.delete(jedi);
!
!
!
!
Mesmos métodos do Set
Criação de Set sem ser
coletados no garbage
WeakSet

47. PROMISE API

48. PROMISES
O que é isto?

49. function getJedis() {
let promise = new Promise(function(resolve) {
setTimeout(function() {
let jedis = ['Luke Skywalker', 'Obi-wan Kenobi'];
resolve(jedis);
}, 1000);
});
return promise;
}
!
getJedis().then(function(jedis) {
console.log(jedis);
});
!
Resolvendo a Promise
Criando uma Promise
Promise
Executanod a Promise

51. PROMISES

52. PROMISES

53. COMO E ONDE
APRENDER MAIS?

59. console.log(‘Obrigado’);
google.com/+HenriqueRamosLimas
github/HenriqueLimas
henrique.ramos.limas@gmail.com