Entendendo Callbacks
brunojustino
Posted on October 28, 2021
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.
Posted on October 28, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.