WDD 131 | S05 – Atividade de Aprendizagem: Funções de Retorno de Chamada JavaScript

S05 – Atividade de Aprendizagem: Funções de Retorno de Chamada JavaScript

Visão Geral

Funções de retorno de chamada são um recurso poderoso do JavaScript, amplamente utilizado na própria linguagem e no navegador. Elas são utilizadas para manipular eventos, tratar dados e controlar o fluxo do programa.

"Uma função de retorno de chamada é uma função passada para outra função como um argumento, que é então invocada dentro da função externa para completar algum tipo de rotina ou ação." – MDN Web Docs

Objetivos de Aprendizagem do Curso

Demonstrar proficiência na sintaxe da linguagem JavaScript.
Usar JavaScript para responder a eventos e modificar HTML de forma dinâmica.

Preparação

Referência Funções de Retorno de Chamada – MDN
Leia e depois pondere sobre este artigo, que demonstra o uso de funções de retorno de chamada: Arrow functions – MDN

Instruções da Atividade

Considerando estas declarações de função:

function calcular(a, b, callback) {
  callback(a + b);
}

function mostrarResultado(resultado) {
  console.log('O resultado é: ' + resultado);
}

Chame uma função chamada calcular e passe a ela os argumentos para dar suporte à saída do console da seguinte equação: 2 + 3. Você precisa passar três argumentos para a função calcular.
Avalie Seu Conhecimento
```
calcular(2, 3, mostrarResultado)
```

Um uso comum de funções de retorno de chamada em JavaScript é para operações assíncronas, como manipular eventos ou fazer solicitações assíncronas. Aqui está uma simulação de exemplo:

function buscarDados(callback) {
  // usando setTimeout para simular a busca de dados de um servidor
  setTimeout(() => {
    // Isso chama a função 'callback' e passa dados para ela.
    callback('Os dados foram buscados');
  }, 2000); // Isso simula um atraso de 2 segundos de um serviço.
}

// função que realiza o tratamento dos dados
function tratarDados(dados) {
  console.log("Dados recebidos:", dados);
}

// Chame a função buscarDados e passe a função tratarDados como argumento.
buscarDados(tratarDados);

A função buscarDados simula a busca de dados de um servidor usando a função setTimeout para criar um atraso de 2 segundos. Após o atraso, ela chama a função de retorno de chamada fornecida, passando a string "Os dados foram buscados" como argumento. Nesse contexto, a função tratarDados é passada como retorno de chamada para buscarDados e registra os dados recebidos no console quando chamada.