Funções de callback em JavaScript –  o que são e como usá-las

Artigo original: JavaScript Callback Functions – What are Callbacks in JS and How to Use Them

Se você já estiver familiarizado com programação, sabe o que fazem as funções e como usá-las. Mas o que é uma função de callback? Funções de callback são uma parte importante do JavaScript e, ao entender como callbacks funcionam, você vai se tornar muito melhor em JavaScript.

Então, neste artigo, eu gostaria de ajudar você a entender o que são as funções de callback e como usá-las em JavaScript, passando por alguns exemplos.

O que é uma função de callback?

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

Então, nós podemos também passar funções como parâmetros para outras funções e chamá-las dentro das funções externas. Parece complicado? Vamos ver isso no exemplo abaixo:

function print(callback) {  
    callback();
}

A função print( ) recebe outra função como parâmetro e a chama dentro de si. Isso é válido no JavaScript e nós chamamos de "callback". Então, a função que é passada para outra função como um parâmetro é uma função de callback. Mas isso não é tudo.

Você também pode ver a versão em vídeo sobre as funções de callback abaixo:

Por que precisamos de funções de callback?

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

Callbacks garantem que uma função não seja executada antes que uma tarefa seja concluída, mas logo depois dessa tarefa ser concluída. Elas nos ajudam a desenvolver código JavaScript assíncrono e evitam que tenhamos problemas e erros.

Em JavaScript, o jeito de criar uma função de callback é passá-la como um parâmetro para outra função, chamando-a novamente em seguida, logo depois que algo aconteça ou que alguma tarefa seja concluída. Vamos ver como...

Como criar uma função de callback

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

const mensagem = function() {  
    console.log("Essa mensagem é exibida depois de 3 segundos");
}
 
setTimeout(mensagem, 3000);

Existe um método integrado no JavaScript, chamado "setTimeout", o qual chama uma função ou avalia uma expressão depois de um certo 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 mensagem está sendo chamada depois de algo acontecer (após 3 segundos se passarem para esse exemplo), mas não antes. Então a função mensagem é um exemplo de função de callback.

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

Como alternativa, podemos definir uma função diretamente dentro de outra função, ao invés de chamá-la. Vai ser parecido com isso:

setTimeout(function() {  
    console.log("Essa mensagem é exibida após 3 segundos");
}, 3000);

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

Callbacks como arrow functions

Se você preferir, você pode também escrever a mesma função de callback como uma arrow function do ES6, que é um tipo mais novo de função em JavaScript:

setTimeout(() => { 
    console.log("Essa mensagem é exibida após 3 segundos");
}, 3000);

E os eventos?

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

<button id="callback-btn">Clique aqui</button>

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

document.queryselector("#callback-btn")
    .addEventListener("click", function() {    
      console.log("O usuário clicou no botão!");
});

Então, aqui, nós primeiro selecionamos o botão pelo seu id. Em seguida, adicionamos um event listener (algo como um 'detector de eventos', em português) com o método addEventListener. Ele recebe dois parâmetros. O primeiro é o seu tipo, "click", e o segundo parâmetro é uma função de callback. Essa função insere a mensagem no console quando o botão é clicado.

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

Conclusão

Callbacks são usadas com frequência em JavaScript, e eu espero que este artigo ajude você a entender o que elas realmente fazem e como trabalhar com elas mais facilmente. Você também pode aprender sobre promises em JavaScript (em inglês), um tópico semelhante ao explicado aqui, em um outro artigo do autor.

Se você quiser aprender mais sobre desenvolvimento para a web, convido você a seguir o autor no YouTube!

Obrigado por ler!