Entendendo Callbacks

brunojustino — Thu, 28 Oct 2021 20:09:44 +0000

Introdução

Esse é um assunto que pra quem vê pela primeira vez pode ser um pouco difícil de assimilar.
De forma simples, callbacks são funções que são passadas como parâmetros em outras funções.

Repito: Funções que são passadas como parâmetros em outras funções.

Exemplo

Vamos ver o exemplo do MDN adaptado para o português.

function cumprimentar(nome) {
alert('Olá ' + nome);
}

function lerNome(callback) {
var nome = prompt('Digite seu nome.');
callback(nome);
}

lerNome(cumprimentar);

Explicação

Primeiro criamos uma função que alerta o nome passado como parâmetro

function cumprimentar(nome){
    alert('Olá ' + nome)
}

Segundo criamos uma função para perguntar o nome, note que nessa função passamos outra função como parâmetro

function lerNome(callback) {
    var nome = prompt('Digite seu nome.') 
    callback(nome) 
}

function lerNome(callback) {
Função lerNome tem como parâmetro a função de nome callback
var nome = prompt('Digite seu nome')
Lê o nome digitado
callback(nome)
Executa a função de nome callback(note que como é um parâmetro, qualquer nome digitado seria válido mas por colocar o parêntesis depois sabemos se tratar de uma função)

lerNome(cumprimentar)

Executamos a função lerNome e passamos a função cumprimentar como parâmetro.

Ao executar lerNome temos: 1 - o comando prompt o qual armazenamos o nome digitado. 2 - a execução da função cumprimentar(nome) passando o nome digitado como parâmetro.
Na função lerNome nos referimos a função cumprimentar como callback(lembre-se que o nome do parâmetro é apenas um placeholder). Poderíamos ter function lerNome(foo) e o resultado seria o mesmo(claro que teriamos que trocar onde tem callback(nome) por foo(nome) dentro da função lerNome.

Uso

Algum de vocês provavelmente já usaram callback e não sabem. A função addEventListener muito utilizada para manipular o DOM, nada mais é que um callback.

document.getElementById("botao").addEventListener("click", 
function() {
    document.getElementById("demo").innerHTML = "Hello World";
});

Note que o segundo parâmetro passado na função é uma callback.
Poderíamos em vez de criar uma função anônima dentro do parêntesis, tê-la criado separadamente e assim passaríamos só o nome da função criada.

Na prática

Callbacks são geralmente utilizados em funções assíncronas pois são utilizados para obter alguma informação o qual não se sabe o tempo necessário para conclui-las. Exemplos mais comuns são: solicitar informação de alguma página da web e buscar informação em algum banco de dados.

app.get('/', function(req, res) {
  res.send('Hello World')
})

Problemas

Um problema comum que ocorre com callback se refere quando usamos a keyword this. Por ser um tópico introdutório não entrarei em detalhes sobre esse problema mas adianto que você deve pensar no escopo em que chama o this. E adianto que a arrow function resolve esse problema de escopo.

Conclusão

Sinto que já prolonguei o assunto e a idéia é ser apenas uma introdução. É um assunto difícil de entrar na cabeça e requer um pouco de prática e depuração para entedê-lo.

DEV Community: brunojustino