A függvények lexikális környezetének alkalmazása JavaScriptben

Tegyük fel, hogy van egy függvényünk, amely egy másik függvényt ad vissza eredményül:

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

Ha a szülőfüggvénynek vannak változói, akkor ezek a változók a visszaadott függvény lexikális környezetében fognak szerepelni:

javascriptfunction test() {
  let num = 1; // a szülőfüggvény változója
  
  return function() {
    // lexikális környezet = {num: 1}
  }
}

Írjunk a visszaadott függvény kódjába egy console.log-ot, amely kiírja a num változó értékét:

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

Most hívjuk meg a test szülőfüggvényt, és mentsük az eredményét a func változóba:

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

let func = test();

A func változóba a visszaadott függvény kerül. Hívjuk meg a függvényünket - az eredménye a num változó tartalmát fogja kiírni:

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

let func = test();
func(); // kiírja az 1-et

Ha viszont a függvényen kívül próbáljuk meg kiírni a num változót - az nem lesz elérhető:

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

console.log(num); // a num változó itt nem elérhető

Amint látod, a num lokális változó hozzákapcsolódott a függvényünk lexikális környezetéhez, és most, bárhol meg tudjuk hívni ezt a függvényt, megkaphatjuk a num változó értékét, még akkor is, ha a hívás helyén ez a változó önmagában nem elérhető.

Valójában hasonló eredményt érhetünk el, ha a num változót globálissá tesszük:

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

let num = 1; // globális változó
let func = test();
func(); // kiírja az 1-et

Itt azonban jelentős különbség lesz: az új változatban a num változót a függvényeken kívül is meg lehet változtatni (mivel globális), a régiben viszont nem.

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