Le function callback sono utilizzate in JavaScript per far si che il codice sia asincrono, cioè eseguito dopo un determinato evento, come ad esempio quando un pulsante è cliccato, oppure quando si passa sopra un elemento della pagina html, ecc..
Abbiamo anche visto nei precedenti articoli che le funzioni di callback possono essere passate come argomenti alle funzioni, in quanto sono degli oggetti.
In questo articolo faremo ancora qualche esempio per comprenderne meglio l’utilizzo.
Interessante è infatti il loro utilizzo con altri metodi predefiniti, come nel primo esempio sotto.
Function callback – primo esempio
Togliamo da un array, precedentemente popolato, gli elementi dispari.
Innanzitutto creiamo il nostro array di numeri.
Dopo creiamo una function anonima in JavaScript che memorizziamo in una variabile numero.
Quindi nella variabile numero stiamo memorizzando la nostra funzione di callback, che rappresenta il nostro oggetto.
Poi filtriamo l’array utilizzando il metodo filter che richiama la nostra function di callback in Javascript, che è stata creata per restituire true se un elemento è pari.
La funzione di callback prende un solo parametro che rappresenta ogni singolo elemento dell’array che deve essere valutato.
La funzione è poi richiamata senza parentesi tonde all’interno del metodo filter.
var array = [5,7,8,9,10];
var numero = function (n) {
if(n% 2 == 0){
return true;
}
};
//numero diventa la funzione che posso richiamare, dunque:
var n = array.filter(numero);
console.log(n);
Il console.log stamperà l’array con i soli numeri pari.
La stessa funzione si può scrivere anche in questo modo:
var array = [5,7,8,9,10];
var n = array.filter(function (n) {
if(n% 2 == 0){
return true;
}
});
console.log(n);
Function callback – secondo esempio
Inseriamo 5 numeri in un array al clik del pulsante e dopo visualizziamo la loro somma.
Anche in questo caso utilizziamo una funzione di callback anonima dentro la quale richiamiamo le funzioni chiediNumeri e sommaNumeri.
La funzione chiediNumeri ha come argomenti un array e la quantità dei numeri da inserire, mentre la funzione sommaNumeri prende come argomento l’array.
Ecco il codice completo della nostra function callback e delle funzioni da noi create:
var numeri = [];
var calcolo = document.getElementById('calcolo');
calcolo.addEventListener('click',function (){
chiediNumeri(numeri, 5);
var sum = sommaNumeri(numeri);
alert('la somma è: ', sum);
});
function chiediNumeri(arr, q){
while (arr.length < q){
var n = parseInt(prompt('Inserisci un numero'));
arr.push(n);
}
return arr;
}
function sommaNumeri(array){
var somma = 0;
for (var i = 0; i< array.length; i++){
somma += array[i];
}
return somma;
}
Abbiamo svolto alcuni esercizi sulle function di callback in JavaScript, nelle prossime lezione torneremo su questo argomento.
Alcuni link utili
Introduzione al tutorial JavaScript
Come utilizzare JavaScript alert
Come utilizzare JavaScript confirm