Um conceito fundamental para você aprender é sobre as famosas callbacks ! E calma, não é um assunto complexo 😁 . Vamos abordar passo a passo o que é, como funcionam e vamos colocar a mão no código. Não vamos ter explicações muito elaboradas, para que o conceito fique claro. Bora para a explicação!
O que são e como funcionam?
O conceito é passar uma função como parâmetro para outra função, ou seja uma dentro de outra função. Além disso a callback será chamada quando ocorrer uma determinada ação, um evento. Vamos para o código, onde tudo ficará mais fácil de entender. Primeiro vamos construir uma função que vai retornar 3 argumentos (parâmetros) que são: Uma função, um valor que será chamado de a e outro valor que será b:
//arrow function
const executar = (funcao, a, b) => funcao(a, b)
// ou function clássica
function executar(funcao, a, b) {
return funcao(a, b)
}
Agora vamos definir a função que será passada como primeiro parâmetro da nossa função executar():
const multiplicar = (x, y) => console.log(x * y)
Feito isso, agora vamos entender como é realizado o callback, vamos passar dentro da função executar(), todos os argumentos que ele espera receber, o código todo ficará assim:
const executar = (funcao, a, b) => funcao(a, b)
const multiplicar = (x, y) => console.log(x * y)
executar(multiplicar, 2, 2)
Note que estamos passando dentro da função executar() outra função multiplicar(), além de dois valores que representam a, b. Se colocar o código para funcionar o resultado será 4:
Mas o foco é que temos uma função chamando outra em nosso código. Isso é o conceito de callback! Então vamos agora imaginar a seguinte situação:
Você acabou de desenvolver um sistema básico que multiplica os valores preenchidos em tela cada vez que o usuário clica no botão executar. Toda vez que o usuário realizar essa ação, um evento é iniciado, ou seja, a função será chamada dando inicio ao processo. A função então irá chamar multiplicar(), que tem a responsabilidade de realizar o cálculo e depois quando ele retornar o valor o processo será finalizado. Este exemplo é apenas para que entenda melhor esse conceito de passar uma função para parâmetro para outra. Espero que tenha ajudado😃.
Para reforçar ainda mais o conceito de callback, veja outro exemplo:
const executar = (funcao, a, b) => funcao(a, b)
const multiplicar = (x, y) => console.log(x * y)
executar(multiplicar, 2, 2)
setInterval(() => {
executar(multiplicar, 2, 2)
}, 2000);
O objetivo do setInterval() é fazer com que nosso código execute de forma repetida conforme o tempo definido e o que passamos dentro dele como retorno. Então se executar o código utilizando o Code Runner ou no seu browser com a extensão Live Server, vai ter esse resultado:
A cada dois segundos a função executar() é chamada e todo o processo de callback é iniciado novamente. Se você retirar do setInterval os parâmetros que a função executar() deve receber, terá esse erro em console (ou no terminal):
Lembrando que o setInterval é também uma function:
Então se passarmos uma função dentro dela como primeiro argumento, temos uma callback:
const mensagem = () => console.log('CallBack é fácil de se entender!')
setInterval(mensagem, 2222);
O resultado pode ser visto no GIF abaixo:
Conclusão
Vimos que o conceito de Callback é baseado em uma função poder chamar outra. E a partir do momento que vai se aprofundando, percebe que elas dependem de um evento e usamos elas muitas vezes em JavaScript. Além disso que abordamos, temos muitos conceitos que podemos nos aprofundar, mas vamos deixar para um próximo artigo conceitos mais profundos que estão relacionados com callbacks.
Agradeço mais uma vez por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 😉🚀