Spiegazione delle Closure in JavaScript

Usi le closure ogni giorno in JavaScript. Probabilmente le usi negli hook di React, negli event listener e nei callback di Node.js. Molti sviluppatori hanno difficoltà con la teoria, ma il concetto è semplice una volta compreso lo schema.

Per capire le closure, devi comprendere lo scope lessicale.

Lo scope lessicale significa che una funzione può accedere alle variabili del proprio scope e a qualsiasi scope esterno in cui è stata definita. Dipende da dove scrivi il codice, non da dove lo chiami.

Una closure è una funzione che ricorda le variabili del suo scope originale anche dopo che tale scope ha terminato l'esecuzione.

Pensa a una funzione come se portasse uno zaino. Quando la funzione viene creata, inserisce nello zaino ogni variabile di cui ha bisogno dal suo ambiente. La funzione porta quello zaino ovunque vada.

Ecco come funzionano le closure in pratica:

  • Variabili private: Puoi nascondere i dati al mondo esterno. In un esempio di conto bancario, la variabile del saldo rimane privata. Puoi modificarla solo attraverso metodi specifici come deposit o withdraw. Questo impedisce l'accesso diretto a dati sensibili.

  • Function Factories: Puoi creare funzioni che producono altre funzioni. Una factory di moltiplicatori può creare una funzione "double" o una funzione "triple". Ogni nuova funzione mantiene il proprio moltiplicatore specifico nel suo zaino.

  • Event Listeners: Quando colleghi un evento click a un pulsante, l'handler ricorda i dati della funzione di setup. Anche dopo che la funzione di setup è terminata, il listener mantiene quei dati.

  • React Hooks: Ogni volta che usi useState o useEffect, stai usando delle closure. Un bug comune in React si verifica quando una closure cattura un vecchio valore dello stato. Questo viene chiamato stale closure.

Fai attenzione all'uso della memoria. Poiché una closure mantiene un riferimento attivo alle variabili, il motore non può rimuoverle tramite la garbage collection finché la closure esiste. Evita di mantenere oggetti massicci in una closure se non ne hai bisogno per molto tempo.

Riassunto:

  • Lo scope lessicale definisce l'accesso.
  • Le closure rendono quell'accesso persistente.
  • Una funzione porta il proprio ambiente in uno zaino.
  • Usa let invece di var nei cicli per evitare bug di scoping.

Fonte: https://dev.to/digitalunicon/javascript-closures-explained-with-examples-339f