Javascript é uma linguagem de programação leve, interpretada e com inúmeras aplicações, com ela podemos desenvolver desde páginas web até sistemas complexos. Ter o domínio e entendimento do seu funcionamento principal lhe trará diversas vantagens no desenvolvimento das suas soluções e também ter o conhecimento necessário para explorar diversas funcionalidades avançadas.
Com base nisso criaremos uma série de artigos para explicar como funciona a parte assíncrona do Javascript, começando por esse primeiro artigo sobre Callbacks.

O que são Callbacks?

Se traduzirmos Callback será algo como chamada de retorno, o que soa um pouco complicado né? vamos tentar melhorar um pouco esse entendimento:

Callback é uma função que será executada quando algum evento ocorrer.

Ajudou? não muito?

No Javascript, Callback é uma função passada como argumento para outra função, que será executada posteriormente, mais abaixo traremos exemplo no qual ficará mais fácil de entender seu uso.

Por que no Javascript Callback são tão importantes?

O Javascript, e outras linguagens de programação, os códigos são executados de forma sequencial, mas haverá casos que essa execução não será dessa maneira, mas sim de forma assíncrona, ou seja, não esperar a finalização de um fluxo para executar o próximo.

Exemplos

Abaixo vamos verificar um exemplo de Callback.

A função abaixo imprime no console o valor que ela recebe por parâmetro. Ela é simples, mas poderia ser uma função complexa para exibir um gráfico ou caracteres coloridos no console.

function imprimeNoConsoleOResultado(valor) {
  console.log(`==> Resultado: ${valor} <===`);
}

Essa outra função abaixo executa um calculo com os valores recebidos por parâmetro, o resultado desse calculo será repassado para o Callback, que é a função recebida no terceiro parâmetro da função calcula.

function calcula(valor1, valor2, exibirResultado) {
  const resultado = valor1 + valor2;
  exibirResultado(resultado);
}

Como ficaria usando o Callback imprimeNoConsoleOResultado:

calcula(2, 2, imprimeNoConsoleOResultado);

O que será exibido: ==> Resultado: 4 <===

Digamos que queremos criar uma função de Callback de exibição mais complexa, que desenha um canvas com o resultado, segue exemplo abaixo:

function imprimeResultadoComCanvas(valor) {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.strokeText(`Resultado: ${valor}`, 5, 50);
  document.body.appendChild(canvas);
}

Agora usando o callback imprimeResultadoComCanvas que renderiza o resultado com canvas:

calcula(2, 2, imprimeResultadoComCanvas);

Você poderá conferir o resultado por aqui: https://jsfiddle.net/h5w2cn8f/19/

Com esses exemplos vimos que a função calcula realiza o calculo e o resultado ela repassa para o Callback, que por sua vez manipula de acordo com a sua implementação.

Objetos de Primeira Classe

O Javascript tem recursos de programação funcional graças às suas funções serem de primeira classes, ou seja, todas funções do Javascript são tratadas como objetos, como valores, podemos guardá-las dentro de variáveis e elas também podem ser retornadas através de funções, isso abre um leque grande de utilização como por exemplo nos padrões de projeto como High Order Functions.

Conclusão

Callback é um recurso muito importante e muito utilizado no Javascript, esse entendimento nos ajudará no entendimento dos próximos artigos sobre processamento assíncrono.

Originally posted on my blog carlosvaz.com.br.

Referências

• https://developer.mozilla.org/pt-BR/docs/Glossary/Callback_function
• https://blog.betrybe.com/tecnologia/callback/
• https://www.freecodecamp.org/portuguese/news/funcoes-de-callback-em-javascript-o-que-sao-e-como-usa-las/