JS နှင့် Variable ကြေညာခြင်း အနုပညာ 🧩

Scope နှင့် Declaration

Javascript မှာ Variable တွေကြေညာဖို့အတွက် အသုံးပြုနိုင်တဲ့ Keyword ၃ ခုရှိပါတယ်။ var, let နဲ့ const ဆိုတဲ့ Keyword တွေပါ။ ၃ ခုစလုံးဟာ တူသလိုထင်ရပေမယ့် မတူညီတဲ့သဘောတရားတွေရှိနေပါတယ်။ အထူးသဖြင့် မတူညီတဲ့ Scope သဘောတရားတွေကို ဆုံးဖြတ်ဖန်တီးပေးနိုင်တဲ့အတွက် ဖြစ်ပါတယ်။

Scope ဆိုတာ Variable တစ်ခုကို "ရယူသုံးစွဲနိုင်ခွင့်အပိုင်းအခြား"လို့ ခပ်တည့်တည့် ဘာသာပြန်ရမှာပါပဲ။ တနည်းအားဖြင့် Variable တစ်ခုကို ကုဒ်ရဲ့ ဘယ်နေရာကနေ ရယူသုံးစွဲနိုင်သလဲ၊ မရနိုင်သလဲ ဆုံးဖြတ်ပေးမယ့် အခြေအနေ၊ အပိုင်းအခြားတခုဖြစ်ပါတယ်။ Global Scope, Function Scope နဲ့ Block Scope ဆိုပြီး ရှိပါတယ်။

Global Scope ဆိုတာ Variable တွေကို ကုဒ်ရဲ့ ဘယ်နေရာကနေမဆို ရယူသုံးစွဲနိုင်တဲ့အခြေအနေဖြစ်ပါတယ်။ Function Scope ဆိုတာ သတ်မှတ်ထားတဲ့ Function အတွင်းမှာပဲ ရယူသုံးစွဲနိုင်တဲ့အခြေအနေဖြစ်ပါတယ်။ Block Scope ဆိုတာ တွန့်ကွင့်အဖွင့်အပိတ် { } အသုံးပြုပြီး ရေးသားထားတဲ့ ကုဒ်အစိတ်အပိုင်းတခုအတွင်းမှာပဲ ရယူသုံးစွဲနိုင်တဲ့အခြေအနေဖြစ်ပါတယ်။

The var Keyword

ပထမဆုံးအနေနဲ့ var ဆိုတဲ့ Keyword အကြောင်းကို ပြောပါမယ်။ ကနဦး Javascript မှာ Variable ကြေညာဖို့အတွက် var ဆိုတဲ့ Keyword ကိုသာ အသုံးပြုနိုင်ခဲ့တာဖြစ်ပါတယ်။ var ကို အသုံးပြုပြီး ကြေညာထားတဲ့ Variable တွေဟာ Function Scope သဘာဝရှိပါတယ်။ အဆိုပါ Function Scope အပြုအမူကြောင့်ပဲ မထင်ထားတဲ့ Bug တွေ ဖြစ်ပေါ်စေနိုင်တာဖြစ်ပါတယ်။

ဥပမာ -

function example() {
  var topic = "JavaScript";  
  if (topic) {
    var topic = "React";
    console.log("Block scope:", topic);  // Outputs: React
  }  
  console.log("Global scope:", topic);   // Outputs: React (variable was overwritten)
}

နမူနာကုဒ်မှာဆိုရင် if Block ထဲမှာ topic ဆိုတဲ့ Variable လေးရဲ့redeclare လုပ်ခြင်းခံလိုက်ရတဲ့ အကျိုးဆက်ဟာ မူရင်း Function တခုလုံးပေါ်မှာ သက်ရောက်သွားစေတာဖြစ်ပါတယ်။ ဒီလိုအခြေအနေဟာ မထင်ထားတဲ့ Bug တွေကို ဦးတည်လာစေနိုင်ပါတယ်။ ဒါဟာ Block Scope သဘောတရားကို အသုံးမပြုနိုင်တဲ့ var ရဲ့အကျိုးဆက်ဖြစ်ပါတယ်။

The let Keyword

var ရဲ့ ဟာကွက်တွေကို ဖြေဆည်းပေးဖို့ let Keyword ကို မိတ်ဆက်ပေးခဲ့ပါတယ်။ လက်ရှိ Javascript community မှာ let Keyword ကိုသာ အသုံးပြုပြီး Variable တွေကို အတတ်နိုင်ဆုံး ကြေညာကြပါတယ်။ let ကိုအသုံးပြုပြီး ကြေညာထားတဲ့ Variable တွေဟာ Function Scope သဘာဝရှိပါတယ်။ ဆိုလိုတာက သူတို့ကို ကြေညာထားတဲ့ Block အတွင်းမှာပဲ ကန့်သတ်ရယူနိုင်မှာဖြစ်ပါတယ်။ ဒီသဘောတရားဟာ Loop တွေ၊ Condition တွေ၊ တခြားသော Block Structure ကုဒ်တွေအတွက် var ထက်ပိုမို သင့်တော်တဲ့ အခြေအနေတခုကို ရရှိဖန်တီးနိုင်သွားမှာဖြစ်ပါတယ်။

ဥပမာ -

function example() {
  var topic = "JavaScript";
  
  if (topic) {
    let topic = "React";
    console.log("Block scope:", topic);  // Outputs: React
  }
  
  console.log("Global scope:", topic);   // Outputs: JavaScript (block-scoped variable does not overwrite)
}

နမူနာကုဒ်မှာဆိုရင် if Block အတွင်းက let ကို အသုံးပြုထားတဲ့ Declaration လေးဟာ Global Variable topic လေးကို မထိခိုက်မပြောင်းလဲနိုင်တာကို တွေ့ရမှာဖြစ်ပါတယ်။ Block တခုစီတိုင်းမှာလည်း ကိုယ်ပိုင် let Variable တွေကို ကြေညာထားနိုင်ပြီး ပြင်ပက Variable တွေပေါ်မှာလည်း သွားရောက် ထိခိုက်မှာမဟုတ်ပါဘူး။ ဒီအခြေအနေဟာ မထင်မှတ်ထားတဲ့ Bug တွေကို လျှော့ချပေးနိုင်မှာပဲဖြစ်ပါတယ်။

The const Keyword

နောက်ဆုံးအနေနဲ့ const ဆိုတဲ့ keyword အကြောင်းကို ပြောပြပေးပါမယ်။ const ဆိုတဲ့ Keyword ကိုသုံးပြီး ကြေညာထားသမျှ Variable တွေဟာ let ကိုသုံးပြီး ကြေညာထားတဲ့ Variable တွေနဲ့ အလားသဏ္ဍာန်တူပါတယ်။ မတူတဲ့အချက်တစ်ခုကတော့ const နဲ့ကြေညာထားတဲ့ Variable တွေဟာ ကြေညာပြီးသွားတာနဲ့တပြိုင်နက် သူတို့တွေရဲ့ တန်ဖိုးတွေကို Reassigned လုပ်လိုမရနိုင်တော့ပါဘူး။ ဒါကြောင့် ကိန်းသေတန်ဖိုးတွေအတွက် const ကိုအသုံးပြုပြီး ကြေညာသွားနိုင်မှာဖြစ်ပါတယ်။

ဥပမာ -

const PI = 3.14;
PI = 3.15;  // Error: Assignment to constant variable

နမူနာမှာဆိုရင် const သုံးပြီးကြေညာထားတာဖြစ်တဲ့အတွက် သူရဲ့ တန်ဖိုးကို နောက်တခေါက်ထပ်ပြီး ပြောင်းလဲလို့မရနိုင်တော့ပါဘူး။ အခု အခြေအနေမှာဆိုရင် ReferenceError ဆိုပြီး တတ်လာမှာပဲဖြစ်ပါတယ်။

The Global Scope

Variable တခုကို Function တွေ သို့မဟုတ် Block တွေရဲ့ အပြင်ဖက်ဆုံးမှာ ကြေညာလိုက်တဲ့အခါ Global Scope သဘောတရားကို ရရှိသွားမှာဖြစ်ပါတယ်။ ဆိုလိုတာက ကုဒ်ရဲ့ ဘယ်နေရာကနေမဆို ရယူသုံးစွဲသွားနိုင်မှာဖြစ်ပါတယ်။ Global Scope Variable တွေကို မလိုအပ်ဘဲ အများအပြား မသုံးသင့်ပါဘူး။ Variable Conflict ဖြစ်တာတွေ၊ မထင်ထားတဲ့ Bug တွေ ဖြစ်ပေါ်လာတာတွေ စသည်ဖြင့် တွေ့ကြုံရလေ့ရှိပါတယ်။

ဥပမာ -

var globalTopic = "JavaScript";
function showTopic() {
  console.log(globalTopic);  // Outputs: JavaScript
}
showTopic();
console.log(globalTopic);     // Outputs: JavaScript

Variable တွေကြေညာတဲ့အခါ မိမိလိုအပ်မယ့် အခြေအနေပေါ်မူတည်ပြီး let, const နဲ့ var ကို လိုအပ်သလိုအသုံးပြုသင့်ပါတယ်။ var ကိုတော့ သူရဲ့ Function Scope သဘောတရားကြောင့် အတတ်နိုင်ဆုံး ရှောင်သင့်ပါတယ်။ let ကို Block Scope တွေအတွက် အသုံးပြုသင့်ပြီး မပြောင်းမလဲရှိမယ့် ကိန်းသေတန်ဖိုးတွေအတွက် const ကို အသုံးပြုသင့်ပါတယ်။