Applicazione dell'ambiente lessicale delle funzioni in JavaScript

Supponiamo di avere una funzione che restituisce un'altra funzione come risultato:

javascriptfunction test() {
  return function() {
    
  }
}

Se la funzione genitore ha delle variabili, queste variabili saranno contenute nell'ambiente lessicale della funzione restituita:

javascriptfunction test() {
  let num = 1; // variabile della funzione genitore
  
  return function() {
    // ambiente lessicale = {num: 1}
  }
}

Scriviamo nel codice della nostra funzione restituita console.log, che visualizza il valore della variabile num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

Ora chiamiamo la funzione genitore test e registriamo il risultato della sua esecuzione in una variabile func:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();

Nella variabile func verrà registrata la funzione restituita. Chiamiamo la nostra funzione - come suo risultato visualizzerà il contenuto della variabile num:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

let func = test();
func(); // visualizzerà 1

Se invece si tenta semplicemente di visualizzare la variabile num al di fuori della funzione - non sarà accessibile:

javascriptfunction test() {
  let num = 1;
  
  return function() {
    console.log(num);
  }
}

console.log(num); // la variabile num qui non è accessibile

Come puoi vedere, la variabile locale num si è legata all'ambiente lessicale della nostra funzione e ora, chiamando questa funzione in qualsiasi punto del codice, potremo ottenere il valore della variabile num, anche se nel punto di chiamata la variabile di per sé non è accessibile.

In realtà, si potrebbe ottenere un risultato simile rendendo la variabile num globale:

javascriptfunction test() {
  return function() {
    console.log(num);
  }
}

let num = 1; // variabile globale
let func = test();
func(); // visualizzerà 1

Tuttavia, qui ci sarà una differenza sostanziale: nel nuovo caso la variabile num può essere modificata al di fuori delle funzioni (poiché è globale), mentre nel vecchio caso - no.

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

let func = test();
console.log(func());

javascriptfunction test() {
  let num1 = 1;
  let num2 = 2;
  
  return function() {
    return num1 + num2;
  }
}

console.log(test()());

javascriptfunction test() {
  let num1 = 1;
  
  return function() {
    return num1 + num2;
  }
}

let num2 = 2;
let func = test();
console.log(func());

javascriptfunction test() {
  let num = 1;
  
  return function() {
    return num;
  }
}

let num = 2;
let func = test();
console.log(func());