As funções callback são funções que são passadas como parâmetro para outra função. Veja o exemplo: EXEMPLO12.HTML
function soma(a, b) {
return a + b;
}
function subtracao(a, b) {
return a - b;
}
function multiplicacao(a, b) {
return a * b;
}
function divisao(a, b) {
return a / b;
}
function calculadora(a, b, operacao) {
return operacao(a, b);
}
let resultado = calculadora(10, 5, soma);
alert(resultado);
Este é um exemplo simples, onde temos quatro funções, que são as operações matemáticas básicas. A função calculadora() recebe três parâmetros, que são os dois valores e a operação matemática. A função calculadora() retorna o resultado da operação matemática. Por fim, a função calculadora() é chamada, passando os dois valores e a operação matemática. Note que a operação matemática é passada como parâmetro, que é uma função. Assim, a função calculadora() chama a função passada como parâmetro, passando os dois valores. O resultado da operação matemática é atribuído à variável resultado e, por fim, a variável resultado é exibida na caixa de diálogo.
As funções callback são muito utilizadas em eventos de elementos HTML. Por exemplo, imagine que você precisa criar um botão que, quando clicado, exibe uma mensagem na caixa de diálogo. Assim, você pode criar uma função anônima e atribuir essa função ao evento onclick do botão. Veja o exemplo: EXEMPLO13.HTML
<button onclick="function() { alert('Olá, mundo!'); }">Clique aqui</button>
Na verdade, as Funções Callbacks foram disponibilizadas na versão mais recente do JavaScript, o ES6. Antes disso, era necessário utilizar as Funções Anônimas para fazer o mesmo que as Funções Callbacks fazem.
Vamos simular um outro exemplo. Considere a seguinte lista de números:
let numeros = [1, 2, 4, 7, 5, 3, 6];
Digamos que você deseja obter todos os números ímpares que estão presentes no Array acima. Para tal, é possível usar a função filter()
, que pertence ao objeto Array do JavaScript. Sem utilizar callbacks, o código seria o seguinte: EXEMPLO14.HTML
let numeros = [1, 2, 4, 7, 5, 3, 6];
function ehNumeroImpar(nro) {
return nro % 2 != 0;
}
let numerosImpares = numeros.filter(ehNumeroImpar);
alert(numerosImpares);
Como anteriormente ao ES6 utilizavam-se as Funções Anônimas, o código acima poderia ser escrito da seguinte forma: EXEMPLO15.HTML
let numeros = [1, 2, 4, 7, 5, 3, 6];
let numerosImpares = numeros.filter(function(nro) {
return nro % 2 != 0;
});
alert(numerosImpares);
Porém, com o advento do ES6, é possível utilizar as Funções Callbacks, que são funções que são passadas como parâmetro para outra função. Veja o exemplo: EXEMPLO16.HTML
let numeros = [1, 2, 4, 7, 5, 3, 6];
let numerosImpares = numeros.filter(nro => nro % 2 != 0);
alert(numerosImpares);
Algumas funções nativas do JavaScript que valem ser mencionadas aqui, quais podem ser úteis em algum momento da vida do programador:
88funcoes.html