Funzioni di callback in JavaScript -

In questa lezione parleremo delle funzioni di callback in JavaScript, che sono delle funzioni che vengono passate come parametri ad altre funzioni.

Nella versione JavaScript ES5 sono molto utilizzate, mentre nella ES6 lasciano spazio alle promise che sono diventate un componente nativo del linguaggio. Qualche anno fa infatti le promise venivano usate solo grazie a delle librerie esterne.

Le funzioni di callback derivano da un paradigma di programmazione noto come programmazione funzionale.

Inoltre è bene ricordare che, quando passiamo una funzione di callback come argomento ad un’altra funzione, non stiamo eseguendo la funzione, ma stiamo solo passando la definizione della funzione. Quindi non dobbiamo utilizzare le parentesi tonde, così come facciamo quando invece eseguiamo una funzione.

Le funzioni di callback in JavaScript – primo esempio

In questo primo esempio utilizzeremo una semplice funzione per la somma di 2 numeri e poi la passeremo come parametro ad un’altra funzione.

Ecco dunque il codice della nostra funzione che semplicemente prende 2 numeri e ritorna la loro somma:

Banner Pubblicitario



function somma (a,b){
  return a + b;
}

La funzione a cui passeremo la nostra funzione come argomento, dunque senza parentesi la chiameremo richiamaCallBack semplicemente per far capire che richiama una funzione di callback:



function richiamaCallBack(callback){
  var numero1 = parseInt(prompt('Inserisci un numero'));
  var numero2 = parseInt(prompt('Inserisci un numero'));
  alert(callback(numero1,numero2));
}

Adesso richiamiamo la funzione:

richiamaCallBack(somma);

Se provate lo script noterete che comparirà un alert dove sarà visibile la somma dei due numeri presi in input. In alternativa provate con il console.log() al posto dell’alert!

Le funzioni di callback in JavaScript – secondo esempio

In questo secondo esempio realizzeremo una funzione pariDispari che restituisce true se un valore passato come argomento è pari, altrimenti restituisce false.

Dopo alla nostra funzione richiamaCallBack passeremo come argomenti un numero e la funzione appena creata, senza parentesi, e se il numero passato è pari stamperemo la stringa ‘numero pari‘, altrimenti stamperemo ‘numero dispari‘.



function pariDispari(item) { 
//funzione che verrà poi passata come argomento senza parentesi
  if (item % 2 == 0){
    return true;
  } else {
    return false;
  }
}

function richiamaCallBack(x,callback){ 
//i parametri sono un numero e una funzione
    if (callback(x)) {
      console.log('numero pari');
    } else {
      console.log('numero dispari');
    }
    return x;
}


for (var i = 0; i< 10; i++){
  var n = parseInt(prompt('inserisci un numero intero'));
  var y = richiamaCallBack(n,pariDispari);//richiamo la funzione senza parentesi
  console.log(y);
}

Le funzioni di callback in JavaScript - terzo esempio

In questo terzo esempio popoleremo un array di soli numeri maggiori o uguali a zero (scartiamo solo i negativi), utilizzando ancora le funzioni di callback.

Quindi creiamo la nostra funzione positivoNegativo che restituisce un valore booleano.
Dopo creiamo la funzione popolaArray a cui passiamo come argomento un numero, un array e una funzione (dunque vi ricordo senza parentesi), e aggiungiamo l'elemento nell'array solo se positivo. Questa funzione restituisce il nostro array.

Banner pubblicitario

Infine tramite un ciclo for chiediamo un numero e richiamiamo la funzione popolaArray con i nostri parametri.

Se facciamo il console.log possiamo vedere il nostro array popolato con soli numeri maggiori o uguali a zero.



function positivoNegativo(item) { 
//funzione che verrà poi passata come argomento senza parentesi
  if (item >= 0){
    return true;
  } else {
    return false;
  }
}

function popolaArray(x,array,callback){ 
//dove i parametri sono un numero, un array e una funzione
    if (callback(x)) {
      console.log('numero positivo lo inserisco nell\'array');
      array.push(x);
    } else {
      console.log('numero negativo non lo inserisco nell\'array');
    }
    return array; //restituisce l'array
}

var numeri = [];

for (var i = 0; i< 10; i++){
  var n = parseInt(prompt('inserisci un numero intero'));
  var y = popolaArray(n,numeri,positivoNegativo);
//richiamo la funzione senza parentesi
  console.log(y);
}
console.log('array finale' , numeri);

In questo articolo abbiamo visto dei semplici esempi d'uso delle funzioni di callback in JavaScript, nelle prossime lezioni proporrò tanti altri esempi pratici.

Lezione precedente: tavola pitagorica in JavaScript

Lezione successiva: callback JavaScript approfondimenti