cefet_web

JavaScript parte 7

Destructuring, módulos, promessas, async/await

---

Roteiro

1. Destructuring
2. Módulos
3. Promessas
4. Async/await

---

Destructuring

“Desmontando”
objetos e listas

• Propriedades curtinhas
• Motivação
• Exemplos

---

Propriedades curtinhas

• As shorthand property names são um açúcar sintático para propriedades de objetos

  1. Em vez disto:

     let a = 'cat', 
         b = 2, 
         c = {};
     
     // sem usar o atalho:
     let obj = {a: a, b: b, c: c};
     

  2. Podemos fazer isto 😎:

     let a = 'cat', 
         b = 2, 
         c = {};
     
     // shorthand property names
     let obj = {a, b, c};
     

---

Motivação para destructuring

• Uma função pode retornar mais do que 1 coisa?

  function getPosicaoMouse() {
    return {x: getX(), y: getY()}
  }
  const posicao = getPosicaoMouse()
  console.log(posicao.x)
  console.log(posicao.y)
  

• Como saber os parâmetros de um options?

  function filtraImagem(opcoes, imagem) {
    // ...
    if (opcoes.kernel === '3x3') {
      // ...
    }
    if (opcoes.padding > 0) {
      // ...
    }
  }
  const opcoes = {
    kernel: '5x5',
    padding: 0,
    shape: 'rect'
  }
  
  filtraImagem(opcoes, imagem)
    
    
  

---

Destructuring um objeto (1/2)

1. Às vezes queremos que uma função tenha 1+ valores de retorno
2. Ou então um função que espera um objeto que possua um certo formato

// Exemplo (1): "desmontando"
let imgEl = doc...ector('#logo');
const { alt, src } = imgEl;

console.log(`alt = ${alt}`);
console.log(`src = ${src}`);










// do jeito old...
let imgEl = doc...ector('#logo');
const alt = imgEl.alt;
const src = imgEl.src;

console.log('alt = ' + alt);
console.log('src = ' + src);

// Exemplo (2): definindo o parâmetro de forma "destructured":
function desenhaGrafico({size = 'big', coords = {x: 0, y: 0}} = {}) {
  console.log(size, coords, radius);
  // desenha aqui...
  // 


}

desenhaGrafico({
  coords: { x: 18, y: 30 },
  size: 'small'
});



// do jeito old...
function desenhaGraficoES5(options) {
  options = options || {};
  var size = options.size || 'big';
  var coords = options.coords || { x: 0, y: 0 };
  console.log(size, coords);
  // desenha aqui...
}

desenhaGraficoES5({
  cords: { x: 18, y: 30 },
  size: 'small'
});

---

Destructuring arrays

• Decapitando um array:

  const [head, ...tail] = [1, 2, 3, 4];
  console.log(tail);                    // imprime [2, 3, 4]
  

  • Usa destructuring + o operador spread
• Trocando o valor de 2 variáveis sem usar uma terceira:

  let a = 1;
  let b = 3;
  
  [a, b] = [b, a];                      // a=3, b=1
  

---

Módulos

Organização de código

• Motivação/história
• Módulos ES6
• Importação dinâmica
• Módulos ES6 no navegador

---

História da modularidade em JS

1. Ao longo dos anos 2000, a lógica das aplicações migrou para o front-end
   • Muito mais código JavaScript
   • Necessidade de organização
2. Problema:
   • Gestão de dependências “manual”
   • Poluição do namespace global
   • Ambientes JavaScript fora do navegador
3. Diferentes soluções emergiram ao longo do tempo
   • AMD, CommonJS, UMD e Módulos ES6 🌟

---

Módulos ES6

• Intenção de unificar módulos no navegador e em outros ambientes
• Cada módulo (arquivo) pode import o que outros módulos export

  • math.js:

    export function fft1d(dados) {
      // ... calcula transformada
      // ...
      return resultado
    }
    

  • processa-imagem.js:

    import { fft1d } from './math.js'
    
    export function compacta(imagem) {
      return fft1d(imagem.dados)
    }
    

---

Módulos ES6 no navegador

• Para usar módulos no navegador:
  1. No arquivo HTML, inclua apenas o “ponto de entrada”:

       <script type="module" src="principal.js"></script>
     </body>
     </html>
     

  2. O navegador o baixará e, recursivamente, todos os que ele import
  3. type="module" instrui o navegador a considerar o arquivo como módulo
• Ganhamos gerência automática da ordem das dependências
• E também a “não poluição” do namespace global

---

Exemplo de export e import

export const nome = 'quadrado';

export function desenha(ctx, tam, x, y, cor) {
  ctx.fillStyle = cor;
  ctx.fillRect(x, y, tam, tam);

  return {
    tamanho: tam,
    x,
    y,
    cor
  };
}

• Pode export:
  • Funções
  • var, let, const
  • Classes
• Outra sintaxe para exportar tudo:

  export { nome, desenha }
  

---

Exemplo de export e import

1. import { nome, desenha } from './geometria/quad.js'
   import { area, perimetro } from './retangulos.js'
   
   let quad = desenha(canvasEl.ctx, 50, 50, 100, 'blue');
   area(quad.tamanho)
   perimetro(quad.tamanho)
   

• Pode import qualquer coisa que um módulo export
• Atenção ao from: deve ser um caminho relativo explícito ou completo

---

import e export padrão

• Caso um módulo exporte apenas 1 única coisa, ele pode defini-la como export default (padrão)
• Quem fizer import, não precisará fazer destructuring. Exemplo:

  1. abelha.js

     export default class Abelha {
       static IMAGEM = 'imgs/abelha.gif'
       constructor(y) {
         this.y = y
       }
       desenha(ctx) {
         // ...
       }
       atualiza() {
         // ...
       }
     }
     

  2. principal.js

     import Abelha from './abelhas.js'
     
     let abelhas = [
       new Abelha(Math.random()),
       new Abelha(Math.random()),
       new Abelha(Math.random())
     ]
     
     
     
     
     
     

---

Importação dinâmica

• Adição mais recente, possibilita carregar módulos programaticamente (eg, condicionalmente)
  • Útil para carregar partes da aplicação apenas quando necessárias
  • Usa conceito de promessas (operação assíncrona)
• Exemplo:

  import('./filtros/convolucao.js')
    .then(modulo => {
      // módulo carregado
    }); 
  

---

Promessas

Programação assíncrona

• Loop de eventos
• Motivação
• Exemplos

---

Motivação para promessas

Problema ~ quando precisamos realizar várias chamadas assíncronas, podemos ter um callback hell: várias callbacks aninhadas - Dificulta a leitura e escrita - Suscetível a erros do programador - Trata erros apenas por callback, dificultando a legibilidade/manutenibilidade do código

Soluções ~ uso de promessas explicitamente ou com async/await

---

Exemplo usando a Star Wars API 🌐

Imprimir (4) todas as “pessoas”
(3) da mesma espécie do
(2) primeiro residente do
(1) planeta Naboo

---

Callback Hell (no JSFiddle)

• Imprimir (4) todas as “pessoas” (3) da mesma espécie do (2) primeiro residente do (1) planeta Naboo (planeta id=8)

  sendAjax('https://swapi.dev/api/planets/8', planeta  => { // Naboo
    sendAjax(planeta.residents[0], residente => {           // R2-D2
      sendAjax(residente.species, especie => {              // Droid
        // pega todas as "pessoas" dessa espécie
        for (let pessoa of especie.people) {
          sendAjax(pessoa, p => {
            console.log(p.name + ', ')                      // ordem pode mudar!
          })
          // C-3PO, R2-D2, R5-D4, IG-88, BB8,
        }
      })
    })
  })
  

---

Solução com Promises (no JSFiddle)

• Imprimir (4) todas as “pessoas” (3) da mesma espécie do (2) primeiro residente do (1) planeta Naboo (planeta id=8)

sendAjax('https://swapi.dev/api/planets/8')             // Naboo
  .then(planeta => sendAjax(planeta.residents[0]))      // R2-D2
  .then(residente => sendAjax(residente.species))       // Droid
  .then(especie => Promise.all(especie.people.map(pessoa => sendAjax(pessoa))))
  .then(pessoas => console.log(pessoas.map(p => p.name).join(', ')))
   // C-3PO, R2-D2, R5-D4, IG-88, BB8
  .catch(erro => console.error(`Deu ruim: ${erro}`));

---

Definição de Promise

• Uma promise é um objeto “thenable”, i.e., podemos invocar .then, passando uma função que só será chamada quando a promessa for cumprida (com êxito ou falha)
  • .then(callbackSuccess, callbackError) pode receber 2 funções
  • …ou podemos usar .catch para tratar o erro de uma “promise chain” de forma genérica
• É possível criar objetos do tipo Promise de forma que nós definimos quando elas estão resolvidas (com sucesso ou falha)
  • Próximo slide

---

Criando uma Promise (exemplo)

• Exemplo: aguardar 2s antes de fazer algo

  function espera2s() {
    return new Promise(resolver => {
      setTimeout(resolver, 2000)
    })
  }
  espera2s()
    .then(() => console.log('2s depois'))
  
  
  

• Exemplo 2: aguardar tempo antes de fazer algo (apenas parametrizando)

  function espera(tempo) {
    return new Promise(resolver => {
      setTimeout(resolver, tempo*1000)
    })
  }
  espera(5)
    .then(() => console.log('5s depois'))
  
  
  

---

Async/Await

Assíncrono que parece síncrono

• Motivação
• await em vez de .then
• async para retornar Promise
• Tratando exceções
• Exemplos
• Top-level await

---

Motivação: problemas com promessas

1. Promessas com .then encadeados reduzem (mas não acabam) com callback hell 🔥
2. Há possibilidade de .catch não capturar exceção
   • Caso .catch seja atrasado (eg, devido a alguma espera na criação da promessa - exemplo)
3. É difícil escrever um fluxo condicional em uma cadeia de promessas
4. Depurar ainda fica um pouco difícil com promessas
5. É possível aumentar a legibilidade, se o código parecer síncrono

---

Palavra-chave await

• ```js function espera(tempo) { return new Promise(resolver => { setTimeout(resolver, tempo*1000) }) }

• console.log('tempo = 0')
  await espera(2)   // <--
  console.log('tempo = 2')
  // tempo = 0
  // ...
  // tempo = 2 (2s depois)
  console.log('tempo = 0')
  espera(2).then(() => console.log('tempo = 2'))
    
  // tempo = 0
  // ...
  // tempo = 2 (2s depois)
  

1. await substitui o .then
2. Parece síncrono, mas suspende execução até a promessa ser cumprida
   • E isso não bloqueia a execução do processo (ie, é assíncrono)

---

Retorno de: await funcao()

• const db = {/*...*/}
  function dados(entidade) {
    return new Promise(resolver => {
      // faz algo assíncrono (eg, acessa banco ou ajax)
      // e resolve (cumpre) a promessa com o resultado
      resolver(db[entidade])
    })
  }
  
  // com await 🎉
  const noticia = await dados('noticias')
  const template = await formata(noticia)
  mostraNoticia(template)
  
  
  
  
  
  
  
  
  
  // com promise.then
  dados('noticias')
    .then(formata)
    .then(mostraNoticia)
  

1. O valor que é resolvido pela Promise é retornado pela função
2. ⬆️ Exemplo: pegar dados de notícias, criar um template e mostrar
   • 3x operações assíncronas em sequência:

     mostraNoticia() << formata() << dados('noticia')
     

---

Valores intermediários

• // com await 🎉
  const noticia = await dados('noticia')
  const autor = await dados(`autor/${noticia.autor}`)
  mostraNoticia(noticia, autor)
  
  
  // com promise.then
  dados('noticia')
    .then(noticia => {
      return dados(`autor/${noticia.autor}`)
        .then(autor => mostraNoticia(noticia, autor))
    })
  

• Neste exemplo, o 3º passo depende tanto do 2º quanto do 1º
  • E o 2º depende do 1º:

    mostraNoticia() << noticia, autor
    autor << noticia
    

• Repare que, para usar valores intermediários usando .then, o código perde legibilidade
  • Com await o código parece síncrono (ficando mais legível)

---

Tratando erros

• JavaScript possui try / catch, mas eles não funcionam com Promise
  • É necessário usar .catch ou passar uma errorCallback como 2º argumento para .then

• Se usarmos await, podemos usar try / catch sem problemas:

  // com await 🎉
  try {
    const noticia = await dados('noticias')
    const template = await formata(noticia)
    mostraNoticia(template)
  } catch (erro) {
    mostraUmaPropaganda()
    console.error(erro)
  }
  // com promise.catch
  dados('noticias')
    .then(formata)
    .then(mostraNoticia)
    .catch(erro => {
      mostraUmaPropaganda()
      console.error(erro)
    })
  
  

---

Palavra-chave async

• Além do await, foi introduzida async
• await é permitido apenas dentro de funções async
  • Mas removemos essa restrição dentro de módulos ES6
• Ela modifica a função fazendo retornar uma Promise

1. São basicamente equivalentes:

   // com async
   async function responder() {
     return 42
   }
   // promise explícita
   function responder() {
     return Promise.resolve(42)
   }
   

2. Função async sempre retorna uma Promise:

   async function hello() {
     return 'Hello';
   }
   
   
   const b = hello();
   console.log(b);
   // ❌ [object Promise]
   
   b.then(texto => 
     console.log(texto))
   // ✅ 'Hello'
   

---

async/await vs Promise

try {
  const planeta = await sendAjax('https://swapi.dev/api/planets/8') // Naboo
  const residnt = await sendAjax(planeta.residents[0])              // R2-D2
  const especie = await sendAjax(residnt.species)                   // Droid
  const pessoas = await Promise.all(especie.people.map(pessoa => sendAjax(pessoa)))
  console.log(pessoas.map(p => p.name).join(', '))
  // C-3PO, R2-D2, R5-D4, IG-88, BB8
} catch(erro) {
  console.error(`Deu ruim: ${erro}`)
}

sendAjax('https://swapi.dev/api/planets/8')                         // Naboo
  .then(planeta => sendAjax(planeta.residents[0]))                  // R2-D2
  .then(residnt => sendAjax(residnt.species))                       // Droid
  .then(especie => Promise.all(especie.people.map(pessoa => sendAjax(pessoa))))    
  .then(pessoas => console.log(pessoas.map(p => p.name).join(', ')))
   // C-3PO, R2-D2, R5-D4, IG-88, BB8
  .catch(erro => console.error(`Deu ruim: ${erro}`));

---

Callbacks

sendAjax('https://swapi.dev/api/planets/8', planeta  => { // Naboo
  sendAjax(planeta.residents[0], residente => {           // R2-D2
    sendAjax(residente.species, especie => {              // Droid
      // pega todas as "pessoas" dessa espécie
      for (let pessoa of especie.people) {
        sendAjax(pessoa, p => {
          console.log(p.name + ', ')
        })
        // C-3PO, R2-D2, R5-D4, IG-88, BB8,
      }
    })
  })
})

Promises

sendAjax('https://swapi.dev/api/planets/8')             // Naboo
  .then(planeta => sendAjax(planeta.residents[0]))      // R2-D2
  .then(residente => sendAjax(residente.species))       // Droid
  .then(especie => Promise.all(especie.people.map(pessoa => sendAjax(pessoa))))
  .then(pessoas => console.log(pessoas.map(p => p.name).join(', ')))
   // C-3PO, R2-D2, R5-D4, IG-88, BB8
  .catch(erro => console.error(`Deu ruim: ${erro}`));

async-await

try {
  const planeta = await sendAjax('https://swapi.dev/api/planets/8')   // Naboo
  const residnt = await sendAjax(planeta.residents[0])      		      // R2-D2
  const especie = await sendAjax(residnt.species)       	            // Droid
  const pessoas = await Promise.all(especie.people.map(pessoa => sendAjax(pessoa)))
  console.log(pessoas.map(p => p.name).join(', '))
  // C-3PO, R2-D2, R5-D4, IG-88, BB8
} catch(erro) {
  console.error(`Deu ruim: ${erro}`)
}

---

Cuidados com assincronia

• ::: figure .push-right

  // ❌ espera sem precisar
  async function mensagem() {
    const a = await quem()
    const b = await oque()
    const c = await onde()
  
    console.log(`${a} ${b} ${c}`)
  }
  
  // ✅ faz a,b,c em paralelo
  async function mensagem() {
    const todas = Promise.all([
        quem(), oque(), onde()
      ])
    const [a, b, c] = await todas 
      
    console.log(`${a} ${b} ${c}`)
  }
  

  ::: Quando atividades não possuem dependência entre si, podemos executá-las em paralelo

  • Usamos Promise.all() ou Promise.allSettled()
• Também há:
  • Promise.race(): resolve ou rejeita assim que a primeira resolve ou rejeita
  • Promise.any(): resolve quando a 1ª resolver
• ➡️ Exemplo: montar uma mensagem composta por 3 atividades independentes:

  console.log << quem(), oque(), onde()
  

---

Exemplo de espera desnecessária

function espera(tempo) {
  return new Promise(resolver => 
    setTimeout(resolver, tempo))
}

async function quem() {
  await espera(200)
  return '🤡'
}

async function oque() {
  await espera(300)
  return 'espreita'
}

async function onde() {
  await espera(500)
  return 'nas sombras'
}

async function mensagem1() { // ❌
  const a = await quem()
  const b = await oque()
  const c = await onde()

  console.log(`${a} ${b} ${c}`)
}
mensagem1() // depois de 1s: (esperou pra +)
// 🤡 espreita nas sombras


async function mensagem2() { // ✅
  const todas = Promise.all([quem(), oque(), onde()])
  const [a, b, c] = await todas 
  
  console.log(`${a} ${b} ${c}`)
}
mensagem2() // depois de 500ms:
// 🤡 espreita nas sombras

---

Top-level await

• await só podia ser usado dentro de funções async

  await Promise.resolve(console.log('🎉'));
  // → SyntaxError: await is only valid in async function
  
  (async function() {
    await Promise.resolve(console.log('🎉'));
    // → 🎉
  }());
  

• Mas há suporte incipiente para uso em “top-level” de módulos ES6

  await Promise.resolve(console.log('🎉'));
  // → 🎉
  

---

Referências

1. Na MDN:
   • JavaScript modules na MDN
   • Destructuring
   • Promises
   • Async/Await
2. Livro Eloquent JavaScript:
   • Capítulo 11: Async
3. Site Toptal
   • Asynchronous JavaScript