ecmascript 6, o futuro do javascript hoje
TRANSCRIPT
ECMASCRIPT 6O futuro do Javascript hoje
DECLARAÇÕES DE VARIÁVEIS
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
const JEDI_MASTER = { name: 'Yoda' }; !
JEDI_MASTER = jedi; !
conts DARTH; !
!
const
Variáveis devem ser inicializaras
Erro de “read-only”
let [force, darkSide] = ['Yoda', ‘Darth Sidious']; !
let {force, darkSide} = {force: 'Yoda', darkSide: 'Darth Sidious'}; !
!
!
!
Destructuring
CHAVES DE OBJETOS
let jedi = { ['full' + 'Name']: 'Luke Skywalker' }; !
console.log(jedi.fullName); !
!
!
!
Keys computadas
function novoJedi(firstName, lastName) { return { firstName, lastName }; } !
!
!
firstName: firstName
Keys abreviadas
PARÂMETROS E ARGUMENTOS
function novoJedi( {firstName, lastName} ) { console.log(firstName); console.log(lastName); } !
!
novoJedi( {firstName: 'Luke', lastName: ‘Skywalker'} ); !
!
Nomeando parâmetros
Usando “Destructuring”
function novoJedi(firstName='Luke', lastName='Skywawlker') { console.log(firstName); console.log(lastName); } !
!
novoJedi(); !
!
firstName = firstName || ‘Luke’;
Parâmetros default
function novoJedi(firstName, lastName, ...forcas) { return { firstName, lastName, forcas }; } !
novoJedi('Luke', 'Skywalker', 'sabre de luz', 'força'); !
Usando os “…”
Parâmetros Rest
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
let jedi = { firstName: 'Luke', lastName: 'Skywalker' }; !
let DarthVader = `${jedi.firstName} ${jedi.lastName}, I am your father.`; !
!Chamando o objeto “jedi”
Template Strings
let jedis = ['Luke Skywalker', 'Obi-wan Kenobi']; !
jedis.forEach( jedi => { console.log(jedi); }); !
!
!
!
Usando a “flecha”
Arrows function
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
CLASSES E SUBCLASSES
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
let luke = new Jedi('Luke', 'Skywalker'); !
luke.fullName; luke.usarForca(); luke.usarSabreDeLuz(); !
!
!
!
!
!
Class
class Human { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get fullName() { return this.firstName + ' ' + this.lastName; } } !
!
!
!
Subclasses
!
class Jedi extends Human { constructor(firstName, lastName) { super(firstName, lastName); } usarForca() {} usarSabreDeLuz() { console.log('Zuuuuumm'); } } !
!
!
!
chamada da classe “Human”
Extendendo a class “Human”
Subclasses
!
!
let han = new Human(‘Han’, ‘Solo’); let luke = new Jedi('Luke', 'Skywalker'); !
luke.fullName; luke.usarForca(); luke.usarSabreDeLuz(); !
han.fullName; !
!
!
!
!
Subclasses
MODULARIZAÇÃO
// 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
GENERATORS E ITERATORS
ITERATORS
Iteração nas estruturas de dados
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
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
GENERATORS
Suspender a execução de funções
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
LOOP FOR…OF
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
SYMBOL, UM NOVO TIPO PRIMITIVO
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
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
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
ESTRUTURAS DE DADOS
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
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
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
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
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
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
PROMISE API
PROMISES
O que é isto?
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
PROMISES
PROMISES
COMO E ONDE APRENDER MAIS?
