Aplikácia lexikálneho prostredia funkcií v JavaScripte

Majme funkciu, ktorá ako svoj výsledok vracia inú funkciu:

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

Ak rodičovská funkcia má nejaké premenné, tieto premenné budú obsiahnuté v lexikálnom prostredí vrátenej funkcie:

javascriptfunction test() {
  let num = 1; // premenná rodičovskej funkcie
  
  return function() {
    // lexikálne prostredie = {num: 1}
  }
}

Napíšme v kóde našej vrátenej funkcie console.log, ktorý vypíše hodnotu premennej num:

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

Poďme teraz zavolať rodičovskú funkciu test a výsledok jej práce zapíšme do premennej func:

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

let func = test();

Do premennej func sa zapíše vrátená funkcia. Poďme zavolať našu funkciu - ako svojím výsledkom vypíše obsah premennej num:

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

let func = test();
func(); // vypíše 1

Ak sa jednoducho pokúsime vypísať premennú num mimo funkcie - bude nedostupná:

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

console.log(num); // premenná num tu je nedostupná

Ako vidíte, lokálna premenná num sa naviazala na lexikálne prostredie našej funkcie a teraz, zavolaním na akomkoľvek mieste kódu túto funkciu, môžeme získať hodnotu premennej num, aj keby v mieste volania sama o sebe táto premenná bola nedostupná.

V skutočnosti podobný výsledok je možné dosiahnuť vytvorením premennej num globálnou:

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

let num = 1; // globálna premenná
let func = test();
func(); // vypíše 1

Tu však bude podstatný rozdiel: v novom variante premennú num je možné meniť mimo funkcií (keďže je globálna), kdežto v starom - nie.

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