Callback em javascript como fiz para entender?
Tags: braziliandevs, callback, javascript, async
Published: 2021-05-31 18:59:26

Então você chegou esta estudando JS, ou precisou fazer algo que envolve JS e esta em callback. 
Esta difícil de entender? 
Eu te entendo. 

Primeiro, vamos entender como o JS funciona por dentro(de modo simples e básico)

A maquina interna do JS lê e executa uma linha por vês!
As funções são resolvidas na ordem que são chamadas!  

linha 1
linha 2 
linha 3 

```Javascript
function souResolvidaPrimeiro(){
  console.log('souResolvidaPrimeiro')
}


function souResolvidaEmSegundo(){
  console.log('souResolvidaEmSegundo')
}

function souResolvidaEmTerceiro(){
  console.log('souResolvidaEmTerceiro')
}

//ordem em que foram chamadas! 

souResolvidaPrimeiro()
souResolvidaEmSegundo()
souResolvidaEmTerceiro()

``` 
Isso quer dizer que, a souResolvidaEmTerceiro() nunca será resolvida antes da souResolvidaPrimeiro(). 
Primeiro é preciso resolver cada linha antes da souResolvidaEmTerceiro()

 

Se quiser entender melhor > {% embed https://medium.com/reactbrasil/como-o-javascript-funciona-uma-vis%C3%A3o-geral-da-engine-runtime-e-da-call-stack-471dd5e1aa30 %}


Mas você precisa que uma das função faça algo demorado. 
Ou daqui alguns segundos. 
Ou precisa pegar dados de algum lugar, e isso possa demorar 

Como fazer isso? 
Se o Js executa linha a linha. Ele vai TRAVAR até ter o que foi pedido e assim passar para a próxima! 

```Javascript
function souResolvidaPrimeiro(){
  console.log('Mas preciso pegar algo em outro servidor e isso demora')
}


function souResolvidaEmSegundo(){
  console.log('souResolvidaEmSegundo')
}

function souResolvidaEmTerceiro(){
  console.log('souResolvidaEmTerceiro')
}

//ordem em que foram chamadas! 

souResolvidaPrimeiro()
souResolvidaEmSegundo()
souResolvidaEmTerceiro()

``` 
Teremos um problema aqui. 
O usuário vai ficar esperando com tudo travado até ter todas as 3 funções resolvidas? 

E se as 3 funções precisam fazer coisas demoradas? 
Tudo fica travado para sempre? 
Não! 
Aqui entra o callback. 

```Javascript
function souResolvidaPrimeiro(){
  console.log('Mas preciso pegar algo em outro servidor e isso demora')
}
```
Esta função faz algo que demora. 

Mais sobre callback. 

Segundo o MDN: https://developer.mozilla.org/pt-BR/docs/Glossary/Callback_function
```
Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.
```

Ou seja, você tem uma função que recebe outra via parâmetro. 
Em algum momento do código vc chama essa função do parâmetro.

 ```Javascript 
function func(num){
  console.log('num maior que 5',num)
}

function somar(num1, num2, callback){

const result = num1 + num2

  return callback(result);
}

somar(2,1, func)

``` 
O que fizemos acima foi simples 
Apenas quando declaramos uma função somar, deixamos claro que receberíamos 1 função de callback(a função pode ser qualquer uma). 

Neste caso usamos como callback a função de nome func. 
Nossa func recebe um parâmetro. E o mostra no console. 
O parâmetro é exatamente o resultado da nossa primeira função! 

Simples de entender? 

O callback é muito utilizado no Front e no back com JS. 

um bom exemplo e se você gostar de frontEnd deve ser umas das funções mais repetidas na sua vida é a addEventListener. 

alvo.addEventListener('click', callback) 

explicando por cima,addEventListener é uma função que sempre esta atrelada a algum div dentro do seu código. 
e ela precisa de um callback. Este callback é o que você precisa que aconteça. 
alvo.addEventListener('click'). Como você vê. 
Esta função esta esperando um clique. 
Quando alguém clicar, ela vai executar a função de callback 

```Javascript 
function callback(){
console.log('foi clicado')
}

alvo.addEventListener('click',callback)

Ou 
você pode chamar a callback diretamente na função! 

alvo.addEventListener('click',()=> {
console.log('foi clicado')
})
``` 

São as 2 maneiras de chamar uma função de callback. 
Criando a função fora ou dentro. 

Callbacks são muito utilizados. 
Se você precisa repetir uma função, mas não pode utilizar o resultado da mesma forma, você cria mais de uma função de callback. 

```Javascript 
function subtrair(num1,num2){
 const result =  num1 - num2 
  console.log(result)
}
function somar(num1,num2){
   const result =  num1 + num2 
  console.log(result)
}


function doisNumeros(num1,num2, callback){
  
  
callback(num1, num2)

}

 doisNumeros(5,4,subtrair)
 doisNumeros(5,4,somar)
 doisNumeros(5,4,(num1,num2)=> console.log(num1/num2))
```

```Javascript 

function subtrairSal(sal,desconto){
 const result =  sal - desconto
  console.log(result)
}
function somarSal(sal,beneficio){
   const result =  sal + beneficio
  console.log(result)
}


function doisNumeros(salInicial,adiantado, callback){
  
  const salFinal = salInicial - adiantado
  
  
callback(salInicial,salFinal)

}

 doisNumeros(5000,4000,subtrairSal)
 doisNumeros(5000,4000,somarSal)


```

Você pode dizer, mas isso eu faço tudo de uma vez. Sem callback. 
Sim, da pra fazer! Claro que pode mas...


Outra forma de utilizar callback é quando o que você precisa fazer, depende de algo externo. Ai entra todo o poder do JS e do callback

Buscar um dado em outro site. Isso demora. 
Esperar que algo seja salvo no banco de dados. 
Utilizar um timer. 

Tudo isso e muito mais pode ser utilizado callbacks 
O exemplo mais utilizado para exemplificar o assincronismo do JS é a função setTimeout(). Ela é boa para mostrar como o Js funciona quando se usa callbacks e quando se precisa mostrar que algo demore. 

```Javascript
setTimeout(() => console.log("1"),2000);
console.log(2)

``` 
setTimeout(callback, tempoEmMilissegundos);

Ela é uma função simples da api de navegadores. 
Você já entende callback.
Já consegue entender como essa função funciona? 

Mas como eu fiz para entender callback? 
Depois de ler e reler muita coisa que explicava basicamente o que você viu acima. Eu tentei entender, mas demorou um pouco para entender. 

O que fiz para entender do meu jeito, foi pensar em uma fabrica. Exemplos de fabricas sempre me ajudam e pensar em pessoas e suas funções. 

Imaginei que, a função principal era uma linha de produção de caixas. Onde as funções de callback retiravam da linha as caixas ruins! 

Você pode ter mais de uma função de callback! 
Isso me ajudou a entender melhor! 

Também imaginei alguém pedindo algo a um terceiro. 
Você tem uma moto. E pede para um lavacar limpar ela. 
E continua fazendo suas coisas. 
Em algum momento o callback vai responder com sua moto limpa ou não! (este exemplo será usado no futuro)

Isso que fiz para me ajudar a entender melhor callbacks!
Se isso não te ajudou!

Quem sabe este outro post ajude > https://dev.to/uriel29/javascript-primeiro-aprender-funcoes-callback-sem-entender-o-conceito-3ggl 

Se não entendeu mesmo assim. Por favor deixe sua dúvida nos comentários! Irei fazer o que puder para te ajudar!