Aplicarea mediului lexical al funcțiilor în JavaScript

Să presupunem că avem o funcție care returnează ca rezultat o altă funcție:

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

Dacă funcția părinte are variabile, aceste variabile vor fi conținute în mediul lexical al funcției returnate:

javascriptfunction test() {
  let num = 1; // variabila funcției părinte
  
  return function() {
    // mediul lexical = {num: 1}
  }
}

Să scriem în codul funcției noastre returnate console.log, care afișează valoarea variabilei num:

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

Acum să apelăm funcția părinte test și să înregistrăm rezultatul ei în variabila func:

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

let func = test();

În variabila func se va scrie funcția returnată. Să apelăm funcția noastră - ca rezultat va afișa conținutul variabilei num:

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

let func = test();
func(); // va afișa 1

Dacă în schimb încercăm să afișăm variabila num în afara funcției - ea nu va fi accesibilă:

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

console.log(num); // variabila num nu este accesibilă aici

După cum vedeți, variabila locală num s-a legat de mediul lexical al funcției noastre și acum, apelând această funcție în orice loc din cod, vom putea obține valoarea variabilei num, chiar dacă în locul apelului însăși această variabilă este inaccesibilă.

De fapt, un rezultat similar poate fi obținut făcând variabila num globală:

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

let num = 1; // variabilă globală
let func = test();
func(); // va afișa 1

Aici, totuși, va fi o diferență substanțială: în noua variantă variabila num poate fi modificată în afara funcțiilor (deoarece este globală), iar în cea veche - nu.

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());