Come funzionano le closure in JavaScript

Come funzionano le closure in JavaScript? C’è un modo semplice per capirlo attraverso vari esempi? In questo articolo affrontiamo l’argomento!

Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!

Le closure non sono magiche

Partiamo dal principio: le closure non sono niente di strano o magico, ma prima ancora di capire come funzionano in JavaScript, è giusto spiegare che cosa sono.

Mi rendo benissimo conto che non posso sapere il tuo livello di esperienza nella programmazione funzionale, perciò se già sai cosa sono le closure, ti invito a saltare a piè pari oltre questa sezione!

Spesso il materiale accademico a riguardo delle closure, è abbastanza tecnichese, meglio vedere con esempio concreto cosa sono:

function scriviCiao(nome){
   var testo = "Ciao " + nome;
   var scrivi = function() { console.log(testo); }
   scrivi();
}
scriviCiao("Marco");

Due piccole precisazioni:

• Quando all’interno di una funzione dichiariamo altre funzioni, le variabili locali create dentro la prima funzione non vengono distrutte quando la funzione esiste. Le variabili semplicemente sono invisibili per il mondo esterno. Quindi, le funzioni dichiarate all’interno della prima, possono essere ritornate dalla funzione padre, possono comunicare quindi scrivere e leggere tramite queste variabili locali.
  
• Le closure sono una modalità d’uso del criterio di funzioni di prima classe.
  

Un esempio di closure in JavaScript

Una volta chiarito cosa sono le closure, vediamo un esempio in JavaScript.

function scriviCiao(nome){
  var testo= "Ciao " + nome; //Variabile locale
  var scrivi = function () { console.log(testo); }
  return scrivi;
}
var scrivi2 = scriviCiao("Marco");
scrivi2(); //Stampa nel log "Ciao Marco"

Se sei abituato a programmare in JavaScript, capirai come sia possibile che la variabile “scrivi2” contenga una funzione eseguibile 😀

Però, dove sta la vera differenza?

La variabile “scrivi2” contiene al suo interno una funzione anonima (quella che a tutti gli effetti esegue la stampa nel log).

E di fatto, questa anonymous function è dichiarata all’interno di un’altra funzione: “scriviCiao” nel nostro caso.

Quindi, come funzionano le closure in JavaScript?

In parole molto semplici:

Le closure in JavaScript funzionano in modo semplicissimo.

Abbiamo una closure quando dichiariamo una funzione anonima all’interno di un’altra funzione

Semplice, rapido, immediato, indolore.