Funções callback em Java Script

Se você está aprendendo JavaScript, provavelmente já ouviu falar de funções callback. Elas são essenciais para escrever código assíncrono e manter a flexibilidade de suas funções. Vamos entender o que são funções callback em Java Script e como funcionam.

O que é uma função Callback?

Uma função callback é uma função passada como argumento para outra função e executada após o término de uma operação. Esse padrão é muito utilizado em JavaScript, principalmente em operações assíncronas, como requisições HTTP, leitura de arquivos, ou manipulação de eventos.

Por exemplo, quando você clica em um botão em uma página da web, a ação que acontece após o clique é muitas vezes executada por uma função callback.

Estrutura básica

Aqui está um exemplo simples de uma função callback:

function saudacao(nome) {
    console.log("Olá, " + nome);
}

function processaEntradaUsuario(callback) {
    var nome = "Maria";
    callback(nome);
}

processaEntradaUsuario(saudacao);

Neste exemplo:

• A função saudacao é passada como argumento para processaEntradaUsuario;
  
  
• Dentro de processaEntradaUsuario, a função saudacao (callback) é executada com o valor nome.

Por que utilizar callbacks?

Callbacks permitem que o JavaScript execute código após uma tarefa ser completada, sem bloquear o fluxo do programa. Como o JavaScript é uma linguagem single-threaded, ou seja, executa uma tarefa por vez, ele precisa de uma forma de lidar com operações demoradas, como chamadas a servidores ou manipulação de arquivos, sem travar o restante da aplicação.

Funções callback em operações assíncronas

O verdadeiro poder das funções callback aparece em operações assíncronas. Veja um exemplo simples com setTimeout, que simula um atraso na execução:

function exibeMensagem() {
    console.log("Essa mensagem será exibida após 2 segundos");
}

setTimeout(exibeMensagem, 2000);

Nesse código, a função exibeMensagem é passada como callback para setTimeout, que executa a função após 2 segundos.

Callbacks aninhadas (Callback Hell)

Às vezes, ao utilizar múltiplas operações assíncronas que dependem uma da outra, podemos acabar com callbacks aninhados, o famoso “callback hell”. Veja um exemplo:

funcao1(() => {
    funcao2(() => {
        funcao3(() => {
            console.log("Executou todas as funções!");
        });
    });
});

Este código funciona, mas rapidamente pode se tornar difícil de ler e manter à medida que mais callbacks são adicionados. Para resolver isso, surgiram abordagens como Promises e async/await.

Outro exemplo prático

Pode ser chamada uma ou várias vezes de acordo com o contexto no qual a função foi passada:

 const modelos = ["Celta", "Pálio", "Gol"]
 
 function imprimir(descricao, indice) {
    console.log(`${indice + 1}. ${descricao}`)
 }
 
 //Para cada elemento do array será chamada a função imprimir passando os parâmetros
 modelos.forEach(imprimir) //forEach é uma função do array  
 
 //Para cada elemento do array será chamada a função modelo
 modelos.forEach(modelo => console.log(modelo)) //função arrow

Veja abaixo um exemplo de código com e sem a utilização de funções callback:

 const notas = [6.5, 7.8, 4.3, 8.8, 10, 7.5, 5.5]
 
 //SEM USAR FUNÇÕES CALLBACK
 const notasBaixas1 = []
 
 for(let i in notas) { //percorre as notas...
    if(notas[i] < 7) { //verifica as notas...
       const notasBaixas1.push(notas[i]) //armazena nota caso seja menor do que 7
     }
  }
  
  console.log(notasBaixas1)    
  
  //USANDO FUNÇÕES CALLBACK
  
  /* A função filter filtrará os elementos do array em cima de um determinado critério.
  Se a função nota retornar true o elemento será adicionado ao array notasBaixas*/
  
  const notasBaixas2 = notas.filter(function (nota) {
     return nota < 7
  })  
  
  console.log(notasBaixas2) 
  
  //Utilizando funções arrow:  
  const notasBaixas3 = notas.filter(nota => nota < 7)
  console.log(notasBaixas3) 

As funções callback são um recurso poderoso em JavaScript, especialmente quando lidamos com operações assíncronas.

Elas permitem que o código seja mais flexível e eficiente. Embora o uso excessivo de callbacks possa levar ao callback hell, a evolução do JavaScript trouxe soluções como Promises e async/await, que tornam o código mais legível e fácil de gerenciar.

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: callback