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

Se você está familiarizado com 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 funcionam os retornos de chamada, você se tornará muito melhor em JavaScript.

Portanto, neste post, gostaria de ajudá-lo a entender o que são funções de retorno de chamada e como usá-las em JavaScript, passando por alguns 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 () recebe outra função como parâmetro e a chama internamente. Isso é válido em JavaScript e chamamos de “retorno de chamada”. Portanto, uma função que é passada para outra função como um parâmetro é uma função de retorno de chamada. Mas isso não é tudo.

Você também pode assistir à versão em vídeo das funções de retorno de chamada abaixo:

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

JavaScript executa o código sequencialmente em ordem de cima para baixo. No entanto, existem alguns casos em que o código é executado (ou deve ser executado) depois que algo mais acontece e também não sequencialmente. Isso é chamado de programação assíncrona.

Os retornos de chamada garantem que uma função não será 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 protegidos contra problemas e erros.

Em JavaScript, a maneira de criar uma função de retorno de chamada é passá-la como um parâmetro para outra função e, em seguida, chamá-la de volta 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 estar lá após 3 segundos.

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

Existe um método embutido em JavaScript chamado “setTimeout”, que chama uma função ou avalia uma expressão após um determinado período de tempo (em milissegundos). Portanto, 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 (após 3 segundos se 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 como uma “função anônima”. Isso faz exatamente a mesma tarefa do exemplo acima.

Retorno de chamada como uma função de seta

Se preferir, você também pode escrever a mesma função de retorno de chamada como uma função de seta ES6, que é um tipo mais novo 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:

Click here

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!"); });

Portanto, aqui selecionamos o botão primeiro com seu id e, em seguida, adicionamos um ouvinte de evento com o método addEventListener. Leva 2 parâmetros. O primeiro é o seu tipo, “click”, e o segundo parâmetro é uma função de callback, que registra a mensagem quando o botão é clicado.

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

Embrulhar

Callbacks são usados ​​com frequência em JavaScript, e espero que esta postagem ajude você a entender o que eles realmente fazem e como trabalhar com eles mais facilmente. A seguir, você pode aprender sobre JavaScript Promises, que é um tópico semelhante que expliquei em meu novo post.

Se você quiser saber mais sobre desenvolvimento web, fique à vontade para me seguir no Youtube !

Obrigado por ler!