Seguici su:
Programmazione Web Italia

JavaScript CLOSURE: cosa sono e a cosa servono (con esempi concreti)

Tutte le volte che ho dovuto affrontare il discorso CLOSURE in JS finivo per avere una impressione riassumibile nella frase: "Tutto molto bello, ma... QUINDI?"

Definizione: cosa sono le closure in JavaScript?

Una closure è la capacità di una funzione, definita all'interno di un'altra funzione contenitrice, di accedere allo scope della funzione esterna, anche dopo che questa ha cessato la sua esecuzione.
Attraverso le closure (ed ad un apposito handler), insomma, posso accedere allo scope (metodi e attributi) di una funzione (quella contenitrice) da un qualsiasi ambito esterno.

Ecco un esempio di closure.

See the Pen Closures-1 by PWI - Programmazione Web Italia @programmazione-web-italia on CodePen.

Utilizzo: come utilizzo la closure appena creata?

Ora posso accedere alla variabile "x" anche da un ambito "esterno" alla funzione in cui è definita (nell'esempio: "funzioneContenitrice")

Un esempio di utilizzo della closure definita in precedenza...

See the Pen Closures-2 by PWI - Programmazione Web Italia @programmazione-web-italia on CodePen.

Esempi: quali sono gli utilizzi pratici delle closure?

Implementare variabili private

Possono "simulare" una variabile privata in un linguaggio come JavaScript che non implementa nativamente questo concetto. Questo è possibile attraverso il meccanisco di incapsulamento: lo scope della funzione contenitrice è privato ma le variabili in esso definite sono accessibili attraverso l'utilizzo esplicito di un handler.

See the Pen Closures-3 by PWI - Programmazione Web Italia @programmazione-web-italia on CodePen.

Creazione di moduli riutilizzabili

L'ambito privato può essere utilizzato come un modulo a sè stante per esporre funzionalità al resto della applicazione. Il codice precedente rappresenta, per esempio, un codice riutilizzabile in differenti applicazioni e che espone la funzionalità (per quanto basilare) di contare tutte le volte che una data azione viene effettuata.

Creare funzioni di callback

La Closure può essere definita (on the fly) al momento dell'utilizzo come una callback da passare alla funzione esterna, aumentando le potenzialità espressive del nostro codice.
Ecco un esempio esplicativo.

See the Pen Closures-4 by PWI - Programmazione Web Italia @programmazione-web-italia on CodePen.

Aumentare l'efficenza e le performance

Una Closure può permettere un accesso più efficente alle risorse evitando elaborazioni non necessarie, per esempio: differenti chiamate ad una stessa risorsa esterna possono essere ridotte ad una sola request HTTP.
Vediamo un esempio di codice.

See the Pen Closures-5 by PWI - Programmazione Web Italia @programmazione-web-italia on CodePen.

Conclusioni

L'argomento "Closure" sa essere semplice e allo stesso tempo complicato, dato il fatto che il concetto in sè è piuttosto astratto. In ogni caso, avere degli esempi concreti di codice sotto'occhi ed una spiegazione dei vantaggi che derivano dal loro utilizzo può aiutare a dipanare un poco la nebbia e favorire un approccio più pragmatico. Mi piace pensare alle Closure come un piccolo robottino indipendente dalla applicazione in cui lo utilizzo e che posso richiamare in ogni momento per immagazzinare dati o effettuare computazioni di un livello più generale rispetto al resto del codice.