# Javascript Assíncrono - Entenda o que são Callbacks

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.
```javascript
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`.

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

Como ficaria usando o Callback `imprimeNoConsoleOResultado`:
```javascript
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:

```javascript
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:
```javascript
calcula(2, 2, imprimeResultadoComCanvas);
```
![Exibe a imagem 4 no canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/446slhcn0r2u376r1uih.png)

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.

### 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/