Entendendo funções callback em JavaScript

Definição de funções callback

Funções callback em JavaScript nada mais é uma função que é passada como argumento para outra função e é chamada de volta (executada) quando a função principal termina sua execução ou atinge um determinado ponto. O callback permite que o código assíncrono seja executado de forma não bloqueante, permitindo que outras operações sejam realizadas enquanto o código assíncrono está sendo executado em segundo plano. Os callbacks são amplamente utilizados em JavaScript para lidar com eventos, chamadas assíncronas de APIs e outras operações assíncronas.

Utilidade das funções callback

As funções callback são muito úteis em JavaScript, pois permitem que o código seja executado de forma assíncrona e não bloqueante, o que significa que outras operações podem ser realizadas enquanto o código está sendo executado em segundo plano. Aqui estão algumas das utilidades das funções callback:

1. Manipulação de eventos: As funções callback são frequentemente usadas para manipular eventos em JavaScript, como o clique do mouse ou o envio de um formulário. Quando o evento ocorre, o callback é chamado para lidar com ele.
2. Chamadas assíncronas de APIs: Quando uma chamada de API é feita em JavaScript, ela geralmente é assíncrona e leva algum tempo para retornar uma resposta. Para lidar com a resposta da API, é comum usar uma função callback que é chamada quando a resposta é recebida.
3. Animações: As funções callback também são úteis para animações em JavaScript. Elas podem ser usadas para executar uma série de ações em um determinado tempo e depois chamar o callback quando a animação estiver concluída.
4. Tratamento de erros: As funções callback podem ser usadas para lidar com erros em JavaScript. Se ocorrer um erro durante a execução do código, o callback pode ser chamado para lidar com ele e exibir uma mensagem de erro para o usuário.
5. Modularização de código: As funções callback também são úteis para modularizar o código em JavaScript. Elas permitem que as funções sejam passadas como argumentos para outras funções, tornando o código mais modular e fácil de manter.

Essas são apenas algumas das muitas utilidades das funções callback. Elas são amplamente usadas em todo o ecossistema do JavaScript e são uma parte importante do arsenal de qualquer desenvolvedor JavaScript.

Exemplo de callback

Um exemplo simples de como o callback é usado em JavaScript é o método setTimeout. O setTimeout é uma função que permite que outra função seja executada depois de um certo tempo em milissegundos. A função passada para o setTimeout é um callback que será executado após o tempo especificado ter passado.

Por exemplo, suponha que temos uma função chamada mensagemDeBoasVindas que imprime uma mensagem de boas-vindas no console. Podemos usar o setTimeout para atrasar a execução dessa função em 3 segundos. Aqui está o código:

function mensagemDeBoasVindas() {
  console.log("Bem-vindo!");
}

setTimeout(mensagemDeBoasVindas, 3000); // aqui é passado a função mensagemDeBoasVindas como callback

Nesse exemplo, a função mensagemDeBoasVindas é passada como um argumento para o setTimeout. Quando o setTimeout é executado, ele espera por 3 segundos e, em seguida, executa o callback (no caso, a função mensagemDeBoasVindas) que imprime “Bem-vindo!” no console.

Esse é um exemplo simples de como o callback pode ser usado para executar uma função após um certo tempo ou evento assíncrono. O callback permite que o código continue sendo executado enquanto aguarda a finalização do tempo ou evento assíncrono, evitando que o programa pare ou congele.

Exemplo de callback simulando uma API

Suponha que temos uma API que retorna informações de um usuário com base em seu ID. A chamada para a API é assíncrona, o que significa que leva algum tempo para receber a resposta da API. Para lidar com a resposta da API, podemos usar um callback.

Aqui está um exemplo de como podemos implementar uma chamada assíncrona para a API e usar um callback para manipular a resposta:

function getUser(id, callback) {
  // Simula uma chamada assíncrona para a API
  setTimeout(() => {
    // Suponha que isso é a resposta da API
    const user = { id: id, name: "João" };
    // Chama o callback e passa a resposta da API como argumento
    callback(user);
  }, 2000); // Simula um atraso de 2 segundos na resposta da API
}

function exibeUsuario(usuario) {
  console.log("ID do usuário:", usuario.id);
  console.log("Nome do usuário:", usuario.name);
}

// Faz uma chamada para a função getUser e passa a função exibeUsuario como callback
getUser(123, exibeUsuario);

Neste exemplo, a função getUser simula uma chamada assíncrona para a API usando o setTimeout. Quando a resposta da API é recebida (após um atraso de 2 segundos), a função callback é chamada e a resposta da API (um objeto user) é passada como argumento para a função exibeUsuario.

A função exibeUsuario é o callback que lida com a resposta da API. Ele exibe o ID e o nome do usuário no console. Ao passar a função exibeUsuario como callback para a função getUser, garantimos que a resposta da API será manipulada assim que for recebida, sem bloquear a execução do restante do código.