JavaScript Academy · Lezione

Come le closure catturano lo stato

Comprenda l'ambiente lessicale delle closure.

Come le closure catturano lo stato è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è una closure

Una closure è una funzione associata ai riferimenti delle variabili appartenenti all'ambito in cui è stata definita. La funzione interna «ricorda» queste variabili anche dopo che la funzione esterna ha restituito il proprio risultato.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Restituire la funzione interna

Il comportamento particolare emerge quando restituisce la funzione interna. Questa mantiene l'accesso alla variabile esterna anche se outer ha già terminato la propria esecuzione.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Ambito lessicale

Le closure funzionano grazie allo scope lessicale: una funzione può accedere alle variabili definite negli ambiti che la racchiudono fisicamente nel codice sorgente, non nel punto in cui viene chiamata.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Catturare per riferimento

Una closure cattura la variabile stessa, non un'istantanea del suo valore. Se la variabile cambia in seguito, la closure vede il nuovo valore.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Ogni chiamata crea un nuovo ambito

Ogni invocazione della funzione esterna crea un nuovo insieme di variabili. Le closure provenienti da chiamate diverse non condividono lo stato.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Closure sui parametri

Vengono catturati anche i parametri delle funzioni. Questo permette di creare funzioni specializzate a partire da una funzione generica.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

La classica trappola dei loop

Un bug famoso: usare var in un loop condivide una sola variabile tra tutte le closure. Quando vengono eseguite, il loop è terminato e tutte vedono il valore finale.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Risolvere il problema con let

let crea un nuovo binding a ogni iterazione, quindi ogni closure cattura il proprio i. Questa è la soluzione moderna.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Le closure mantengono viva la memoria

Finché esiste una closure, le variabili che cattura non possono essere raccolte dal garbage collector. Di solito non è un problema, ma può causare memory leak se si mantengono le closure più a lungo del necessario.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Le closure sono ovunque

Callback, gestori di eventi, setTimeout, metodi degli array e promise usano tutti le closure per ricordare il contesto. Vengono utilizzate continuamente, spesso senza accorgersene.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Esaminare lo stato catturato

Più closure create dalla stessa chiamata condividono le stesse variabili catturate, quindi una può leggere ciò che un'altra scrive.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Verifica rapida

Come le closure catturano lo stato.

Riepilogo

Una closure è una funzione insieme ai riferimenti al proprio scope di definizione. Grazie allo scope lessicale, ricorda le variabili esterne anche dopo che la funzione esterna ha restituito il risultato, catturandole per riferimento (non per valore). Ogni chiamata esterna crea uno scope indipendente; si utilizzi let per evitare la trappola dei loop. Le closure mantengono in vita la memoria catturata e alimentano i callback ovunque.

Domande Frequenti

La lezione «Come le closure catturano lo stato» è gratuita?

Sì — il testo completo di «Come le closure catturano lo stato» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Come le closure catturano lo stato»?

Comprenda l'ambiente lessicale delle closure. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Come le closure catturano lo stato»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy