Chiusura in JavaScript

Cos'è Closure e quando possiamo davvero usarla?

Per comprendere la chiusura, dobbiamo conoscere 2 semplici concetti in JavaScript: funzioni nidificate e restituzione di una funzione.

Funzioni nidificate

In JavaScript, possiamo avere funzioni nidificate. La funzione interna ha accesso alle variabili e ai parametri della funzione esterna.

Controlliamo il seguente esempio:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  displayMessage();
}

greetPerson('Alex'); // Hello Alex!

Restituzione di una funzione

Oltre a dichiarare e invocare una funzione interna all'interno della funzione esterna, possiamo anche restituire la funzione interna in modo che possa essere invocata dall'esterno.

Vediamo un esempio di questo:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  return displayMessage;
}

const displayMessageFunction = greetPerson('Alex');

console.log(typeof(displayMessageFunction)); // function
displayMessageFunction(); // Hello Alex!

Chiusura

Dopo aver compreso questi 2 concetti, la "definizione" di chiusura è piuttosto semplice.

Chiusura significa che una funzione interna ha accesso alle variabili e ai parametri della sua funzione esterna anche dopo che la funzione esterna è tornata.

Vediamo un altro esempio in cui possiamo vedere esattamente come può essere utilizzata la chiusura:

function counterFunction() {
 let counter = 0;

 function increaseCounter() {
  return counter += 1;
 }

 return increaseCounter;
}

// counter reffers to the increaseCounter returned by the counterFunction
const counter = counterFunction();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

Una funzione interna non conserva una copia separata di una variabile esterna, ma fa riferimento alla variabile esterna. In altre parole, il valore di counterverrà modificato se lo si modifica utilizzando la funzione interna.

La funzione esterna counterFunctionrestituisce anche un riferimento alla increaseCounterfunzione interna, quindi quando la chiamiamo, il valore effettivo della countervariabile verrà modificato. In questo modo, possiamo vedere che la countervariabile ha un nuovo valore incrementato dopo ogni counter()chiamata.

Quando usare la chiusura?

Possiamo usare la chiusura per ottenere l'incapsulamento in JavaScript. Ciò può essere ottenuto nascondendo l'implementazione dei dettagli. In questo modo, possiamo creare variabili e funzioni private.

Controlliamo il seguente esempio, in cui vogliamo incapsulare alcuni dati utilizzando solo funzioni e oggetti:

const counter = (function () {
  let privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  function increaseCounter() {
    changeBy(1);
  }

  function decreaseCounter() {
    changeBy(-1);
  }

  function decreaseCounter() {
    return privateCounter;
  }

  return { increaseCounter, decreaseCounter, getCounterValue };
})();

console.log(counter.getCounterValue()); // 0

counter.increaseCounter();
counter.increaseCounter();

console.log(counter.getCounterValue()); // 2

counter.decreaseCounter();

console.log(counter.getCounterValue()); // 1

Possiamo controllare il valore del contatore dall'esterno, solo chiamando increaseCounterand decreaseCounter, e possiamo ottenere il valore chiamando la getCounterValuefunzione, che si comporta come un getter.

In questo modo, siamo in grado di simulare gli specificatori publice privatedi accesso e ottenere l'incapsulamento.

Questo è un concetto molto potente nello sviluppo del software poiché impedisce modifiche involontarie a variabili e funzioni che dovrebbero rimanere private.

È tutto!

Grazie per aver dedicato del tempo a leggere questo articolo sulla chiusura in JavaScript. Spero che ti abbia aiutato a capire meglio questo importante concetto e come può essere utilizzato per ottenere l'incapsulamento e creare variabili e funzioni private!