Primena leksičkog okruženja funkcija u JavaScript-u

Neka imamo funkciju koja svog rezultatom vraća drugu funkciju:

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

Ako roditeljska funkcija ima bilo kakve promenljive, onda će te promenljive biti sadržane u leksičkom okruženju vraćene funkcije:

javascriptfunction test() {
  let num = 1; // promenljiva roditeljske funkcije
  
  return function() {
    // leksičko okruženje = {num: 1}
  }
}

Napišimo u kodu naše vraćene funkcije console.log koji ispisuje vrednost promenljive num:

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

Hajde sada da pozovemo roditeljsku funkciju test i njen rezultat zabeležimo u promenljivu func:

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

let func = test();

U promenljivu func zabeležiće se vraćena funkcija. Hajde da pozovemo našu funkciju - svojim rezultatom ona će ispisati sadržaj promenljive num:

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

let func = test();
func(); // ispisaće 1

Ako se jednostavno pokuša ispisati promenljiva num van funkcije - ona neće biti dostupna:

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

console.log(num); // promenljiva num ovde nije dostupna

Kao što vidite, lokalna promenljiva num vezala se za leksičko okruženje naše funkcije i sada, pozivajući na bilo kom mestu koda ovu funkciju, možemo dobiti vrednost promenljive num, čak i ako na mestu poziva sama po sebi ova promenljiva i nije dostupna.

Zapravo, sličnog rezultata može se dostići ako se promenljiva num učini globalnom:

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

let num = 1; // globalna promenljiva
let func = test();
func(); // ispisaće 1

Međutim, ovde će postojati suštinska razlika: u novoj varijanti promenljivu num možemo menjati van funkcija (pošto je globalna), a u staroj - ne možemo.

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