Aula 37 — Callbacks

Na aula anterior, entendemos o conceito de assincronicidade e vimos que o JavaScript precisa lidar com tarefas que levam tempo sem travar a aplicação.

Agora vamos aprender o primeiro mecanismo usado para isso: os Callbacks.

Eles parecem simples à primeira vista, mas são fundamentais para entender como o JavaScript funciona por dentro.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o que é um callback
• Usar funções como argumentos
• Compreender callbacks em código síncrono
• Compreender callbacks em código assíncrono
• Identificar problemas comuns com callbacks

Primeiro: o que é um callback?

Um callback é simplesmente:

👉 uma função passada como argumento para outra função.

Essa função será chamada depois, quando algo acontecer.

Funções são valores no JavaScript

No JavaScript, funções podem ser tratadas como qualquer outro valor.

 
        function saudacao() 
        { 
          console.log("Olá!"); 
        }
        function executar(funcao) 
        {
          funcao();
        }
        executar(saudacao);

 
  executar(saudacao); 
  // Saída será "Olá!" 

Aqui, a função saudacao é passada como argumento e executada depois.

Callback na vida real

Imagine que você pede uma pizza:

• Você faz o pedido
• O restaurante prepara a pizza
• Quando fica pronta, eles te ligam

Essa ligação é o callback: uma ação que acontece quando algo termina.

Callbacks em código síncrono

Nem todo callback é assíncrono.

Veja um exemplo simples:

 
    function processar(valor, callback) 
    { 
      callback(valor); 
    }
    processar(10, function (numero) 
    {
      console.log(numero * 2);
    });

 processar(10, callback); // Saída será 20 

Aqui o callback é executado imediatamente, de forma síncrona.

Callbacks em código assíncrono

Agora vamos ao cenário mais comum: callbacks com tarefas demoradas.

 console.log("Início");
setTimeout(function () 
{
console.log("Processo finalizado");
}, 2000);
console.log("Fim");

 
  console.log("Início"); 
  // Saída será "Início" 
  console.log("Fim"); 
  // Saída será "Fim" 
  console.log("Processo finalizado"); 
  // Saída após 2 segundos 

A função passada para o setTimeout é um callback.

Callbacks estão em todo lugar

Você já usou callbacks sem perceber:

• addEventListener
• setTimeout
• map, filter, reduce

 
    const numeros = [1, 2, 3];
    numeros.map(n => n * 2);
    // Callback: n => n * 2

O problema dos callbacks

Quando muitos callbacks são encadeados, o código pode ficar difícil de ler:

Exemplo ilustrativo:

 
  buscarUsuario(function (usuario) 
  { 
    buscarPedidos(usuario, function (pedidos) 
    { 
      buscarDetalhes(pedidos, function (detalhes) 
      { 
        console.log(detalhes); 
      }); 
    }); 
  }); 

Esse tipo de código é difícil de manter e entender.

Por isso surgiram as Promises

Callbacks resolvem o problema da assincronicidade, mas não escalam bem em códigos grandes.

Para isso, o JavaScript criou uma solução melhor: Promises.

Na próxima aula, vamos aprender sobre Promises e resolver os problemas dos callbacks.