Funções de retorno de chamada JavaScript – O que são retornos de chamada em JS e como usá-los


Se você conhece a programação, já sabe o que as funções fazem e como usá-las. Mas o que é uma função de retorno de chamada? As funções de retorno de chamada são uma parte importante do JavaScript e, depois de entender como o retorno de chamada funciona, você se tornará muito melhor em JavaScript.

Portanto, neste post, eu gostaria de ajudá-lo a entender o que são funções de retorno de chamada e como usá-las em JavaScript por exemplos.

O que é uma função de retorno de chamada?

Em JavaScript, funções são objetos. Podemos passar objetos para funções como parâmetros? Sim.

Portanto, também podemos passar funções como parâmetros para outras funções e chamá-las dentro das funções externas. Parece complicado? Deixe-me mostrar isso em um exemplo abaixo:

function print(callback) {  
    callback();
}

A função print () pega outra função como parâmetro e a chama dentro. Isso é válido em JavaScript e nomeado como “retorno de chamada”. Portanto, uma função que é passada para outra função como parâmetro é uma função de retorno de chamada. Mas isso não é tudo.

Por que precisamos de funções de retorno de chamada?

JavaScript executa o código seqüencialmente em ordem descendente. No entanto, existem alguns casos em que um código é executado (ou deve ser executado) após algo acontecer e também não sequencialmente. Isso é chamado de programação assíncrona.

Os retornos de chamada garantem que uma função não seja executada antes que uma tarefa seja concluída, mas será executada logo após a conclusão da tarefa. Isso nos ajuda a desenvolver código JavaScript assíncrono e nos mantém seguros de problemas e erros.

No JavaScript, a maneira de criar uma função de retorno de chamada é passá-la como parâmetro para outra função e, em seguida, retorná-la logo após algo acontecer ou alguma tarefa ser concluída. Vamos ver como …

Como criar um retorno de chamada?

Para entender o que expliquei acima, deixe-me começar com um exemplo simples. Queremos registrar uma mensagem no console, mas ela deve aparecer após 3 segundos.

const message = function() {  
    console.log("This message is shown after 3 seconds");
}
 
setTimeout(message, 3000);

Existe um método interno no JavaScript chamado “setTimeout”, que chama uma função ou avalia uma expressão após um determinado tempo (em milissegundos). Então, aqui, a função “mensagem” está sendo chamada após 3 segundos. (1 segundo = 1000 milissegundos)

Em outras palavras, a função de mensagem está sendo chamada depois que algo aconteceu (3 segundos passaram para este exemplo), mas não antes. Portanto, a função de mensagem é um exemplo de função de retorno de chamada.

O que é uma função anônima?

Como alternativa, podemos definir uma função diretamente dentro de outra função, em vez de chamá-la. Isso parecerá assim:

setTimeout(function() {  
    console.log("This message is shown after 3 seconds");
}, 3000);

Como podemos ver, a função de retorno de chamada aqui não tem nome e uma definição de função sem um nome em JavaScript é chamada de “função anônima”. Isso faz exatamente a mesma tarefa que o exemplo acima.

Retorno de chamada como uma função de seta

Se preferir, também é possível gravar a mesma função de retorno de chamada que uma função de seta ES6, que é um tipo mais novo de definições de função em JavaScript:

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

E os Eventos?

JavaScript é uma linguagem de programação orientada a eventos. Também usamos funções de retorno de chamada para declarações de eventos. Por exemplo, digamos que queremos que os usuários cliquem em um botão:

Desta vez, veremos uma mensagem no console apenas quando o usuário clicar no botão:

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("User has clicked on the button!");
});

Então, aqui, selecionamos o botão primeiro com seu ID e, em seguida, adicionamos um ouvinte de evento com o método addEventListener. São necessários 2 parâmetros. O primeiro é do tipo “clique” e o segundo parâmetro é uma função de retorno de chamada, que registra a mensagem quando o botão é clicado.

Como você pode ver, as funções de retorno de chamada também estão sendo usadas para declarações de eventos em JavaScript.


Os retornos de chamada são muito usados ​​em JavaScript e espero que este post o ajude a entender o que eles realmente fazem e como trabalhar com retornos de chamada mais facilmente. A próxima coisa que você pode aprender é o JavaScript Promises, que é um tópico semelhante.

Se você quiser aprender mais sobre desenvolvimento web, sinta-se à vontade para visite nosso blog e canal.

Obrigado pela leitura!



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *