Entendendo Callbacks
Tags: callback, javascript, webdev, beginners
Published: 2021-10-28 20:09:44

####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](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) 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.