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!
