Lexical Scope in JavaScript: Isang Simpleng Gabay at Mga Halimbawa

Sa mundo ng programming, ang pag-unawa sa mga konsepto ng scope ay isa sa mga pinakamahalagang hakbang patungo sa pagiging isang eksperto. Ang "lexical scope" sa JavaScript ay isang konsepto na maaaring magpabago ng iyong pananaw sa kung paano gumagana ang iyong mga variable at function sa loob ng isang program. Kung ikaw ay isang baguhang developer o nais lang ng malinaw na paliwanag, huwag mag-alala! Dito ay tatalakayin natin kung ano ang lexical scope, paano ito gumagana, at magbibigay tayo ng mga halimbawa upang mas maunawaan ito.

Ano ang Lexical Scope?

Ang lexical scope (o static scope) ay isang konsepto sa JavaScript na tumutukoy sa paraan kung paano natutukoy ang saklaw (scope) ng mga variable at function batay sa kanilang lokasyon sa code. Sa madaling salita, ang lexical scope ay nagtatakda kung saan at paano maa-access ang mga variable sa isang function, batay sa kanilang lokasyon sa pag-declare ng mga ito sa code. Sa JavaScript, ang lexical scope ay nakabatay sa kung saan ang function ay nilikha, hindi sa kung saan ito tinawag.

Paano Gumagana ang Lexical Scope?

Ang scope ng isang variable ay tinutukoy batay sa lokasyon ng pag-declare ng variable sa code. Kung isang variable ay ipinahayag sa isang function, ito ay magiging available lamang sa loob ng function na iyon at sa mga nested function (mga function na nasa loob ng iba pang function). Hindi mo maaaring i-access ang mga ito mula sa labas ng function maliban kung ito ay ipapasa bilang argument o ito ay may global scope.

Halimbawa ng Lexical Scope

Magbigay tayo ng isang simpleng halimbawa para mas madaling maunawaan ang lexical scope:

function outerFunction() {
  var outerVar = "I am outside!";
  
  function innerFunction() {
    var innerVar = "I am inside!";
    console.log(outerVar);  // Maaari nating i-access ang outerVar
    console.log(innerVar);  // Maaari nating i-access ang innerVar
  }
  
  innerFunction();
  console.log(innerVar);  // Magkakaroon ng error, dahil ang innerVar ay nasa loob lamang ng innerFunction
}

outerFunction();

Sa halimbawa na ito, ang outerVar ay isang variable na ipinahayag sa loob ng outerFunction at ito ay maa-access sa loob ng parehong function pati na rin sa mga nested na function gaya ng innerFunction. Gayunpaman, ang innerVar ay available lamang sa loob ng innerFunction at hindi maa-access mula sa labas ng function.

Ang "Global Scope" at "Function Scope"

Sa JavaScript, mayroon tayong tinatawag na "global scope" at "function scope". Ang global scope ay tumutukoy sa mga variable na ipinahayag sa labas ng mga function at maaaring ma-access mula sa kahit saan sa code. Samantalang ang function scope naman ay tumutukoy sa mga variable na ipinahayag sa loob ng mga function at available lamang sa loob ng mga function na iyon.

Global Scope Example

var globalVar = "I am global!";

function showGlobalVar() {
  console.log(globalVar);  // Maa-access ang globalVar dito
}

showGlobalVar();  // Ipapakita ang "I am global!" sa console
console.log(globalVar);  // Ipapakita rin ang "I am global!" sa console

Dahil ang globalVar ay ipinahayag sa labas ng anumang function, ito ay available sa buong programa at maaaring ma-access kahit saan, tulad ng ipinapakita sa halimbawa.

Lexical Scope sa Mga Callback Functions

Ang lexical scope ay napakahalaga kapag nagtatrabaho ka sa mga callback function, dahil ang mga ito ay kadalasang gumagamit ng function scoping upang matukoy kung aling mga variable ang maaari nilang ma-access.

function greet(name) {
  var greeting = "Hello, " + name;
  
  setTimeout(function() {
    console.log(greeting);  // Maa-access ang greeting dahil sa lexical scope
  }, 1000);
}

greet("Juan");

Sa halimbawa sa itaas, ang callback function na ipinasa sa setTimeout ay maaaring ma-access ang greeting variable kahit ito ay nasa loob ng function greet. Ito ay dahil sa lexical scope ng JavaScript, na tumutukoy na ang callback function ay may access sa lahat ng variable sa function kung saan ito nilikha.

Lexical Scope at Closures

Ang closures ay isang konsepto na malapit na nauugnay sa lexical scope. Ang closure ay nangyayari kapag ang isang function ay nagtataglay ng reference sa mga variable na ipinahayag sa scope kung saan ito nilikha, kahit na ang function na iyon ay tinawag sa ibang lugar o kahit na ang original na scope ay natapos na.

function makeCounter() {
  var count = 0;
  
  return function() {
    count++;
    return count;
  };
}

var counter = makeCounter();
console.log(counter());  // Magbabalik ng 1
console.log(counter());  // Magbabalik ng 2
console.log(counter());  // Magbabalik ng 3

Dito, ang function na ibinalik mula sa makeCounter ay isang closure. Ang closure ay may access pa rin sa count variable kahit na ang makeCounter function ay tapos na. Ang mga closures ay isa sa mga pinakamahalagang konsepto sa JavaScript at malaki ang pakinabang nito sa pagbuo ng mga mas sopistikadong applications.

Lexical Scope at "this"

Ang this keyword sa JavaScript ay madalas na nagiging sanhi ng kalituhan, lalo na sa mga function. Ang lexical scope ay nakakatulong sa atin na maunawaan kung paano tumutukoy ang this sa mga variable at function. Sa pangkalahatan, ang this sa JavaScript ay tumutukoy sa object kung saan tinawag ang function, ngunit ang lexical scoping ay maaaring magbago kung paano tumutukoy ang this.

var person = {
  name: "Juan",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet();  // Output: "Hello, Juan"

Dahil ang this ay tumutukoy sa object kung saan tinawag ang function, sa halimbawa sa itaas, ang this.name ay tumutukoy sa person.name.

Pagpapalawak ng Iyong Pag-unawa sa Lexical Scope

Ang lexical scope ay isang pundamental na konsepto sa JavaScript na makakatulong sa iyo upang maunawaan kung paano ang mga variable at function ay nag-iinteract sa loob ng iyong program. Ito ay may malalim na epekto sa pagbuo ng mga software applications, kaya't ang pag-master nito ay isang hakbang patungo sa pagiging isang mahusay na developer.

Ang tamang pag-unawa at paggamit ng lexical scope ay magbibigay sa iyo ng mas malalim na pananaw sa kung paano gumagana ang iyong code at kung paano ito pwedeng mapabuti. Nawa'y nakatulong ang artikulong ito upang mas lalo mong maintindihan ang mga pangunahing prinsipyo ng lexical scope sa JavaScript.