Uporaba leksikalnega okolja funkcij v JavaScriptu

Recimo, da imamo funkcijo, ki vrne drugo funkcijo:

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

Če ima nadrejena funkcija kakršne koli spremenljivke, bodo te spremenljivke vsebovane v leksikalnem okolju vrnjene funkcije:

javascriptfunction test() {
  let num = 1; // spremenljivka nadrejene funkcije
  
  return function() {
    // leksikalno okolje = {num: 1}
  }
}

V kodo naše vrnjene funkcije napišimo console.log, ki izpiše vrednost spremenljivke num:

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

Pokličimo zdaj nadrejeno funkcijo test in njen rezultat zapišimo v spremenljivko func:

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

let func = test();

V spremenljivko func se bo zapisala vrnjena funkcija. Pokličimo našo funkcijo - z rezultatom bo izpisala vsebino spremenljivke num:

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

let func = test();
func(); // izpiše 1

Če pa preprosto poskušamo izpisati spremenljivko num zunaj funkcije - ta ne bo dostopna:

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

console.log(num); // spremenljivka num tukaj ni dostopna

Kot vidite, se je lokalna spremenljivka num povezala z leksikalnim okoljem naše funkcije in zdaj, če kličemo to funkcijo kjer koli v kodi, lahko dobimo vrednost spremenljivke num, tudi če na mestu klica sama po sebi ta spremenljivka ni dostopna.

Pravzaprav je mogoče doseči podoben rezultat, če naredimo spremenljivko num globalno:

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

let num = 1; // globalna spremenljivka
let func = test();
func(); // izpiše 1

Tukaj pa bo bistvena razlika: v novi različici lahko spremenljivko num spreminjamo zunaj funkcij (ker je globalna), v stari pa - 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());