Aplikace lexikálního prostředí funkcí v JavaScriptu

Předpokládejme, že máme funkci, která svým výsledkem vrací jinou funkci:

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

Pokud má rodičovská funkce nějaké proměnné, budou tyto proměnné obsaženy v lexikálním prostředí vrácené funkce:

javascriptfunction test() {
  let num = 1; // proměnná rodičovské funkce
  
  return function() {
    // lexikální prostředí = {num: 1}
  }
}

Napišme v kódu naší vrácené funkce console.log, který vypíše hodnotu proměnné num:

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

Nyní zavolejme rodičovskou funkci test a výsledek její práce zapišme do proměnné func:

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

let func = test();

Do proměnné func se zapíše vrácená funkce. Zavolejme naši funkci - svým výsledkem vypíše obsah proměnné num:

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

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

Pokud se pokusíme jednoduše vypsat proměnnou num mimo funkci - bude nedostupná:

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

console.log(num); // proměnná num je zde nedostupná

Jak vidíte, lokální proměnná num se navázala na lexikální prostředí naší funkce a nyní, když zavoláme tuto funkci na jakémkoli místě kódu, budeme moci získat hodnotu proměnné num, i když v místě volání sama o sobě tato proměnná není dostupná.

Ve skutečnosti lze podobného výsledku dosáhnout tím, že proměnnou num učiníme globální:

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

let num = 1; // globální proměnná
let func = test();
func(); // vypíše 1

Zde však bude podstatný rozdíl: v nové variantě lze proměnnou num měnit mimo funkce (protože je globální), zatímco ve staré - ne.

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