JavaScript အခြေခံများ- Variables၊ Types၊ Scope နှင့် Hoisting အကြောင်း (Test)
JavaScript Engine ရဲ့ နောက်ကွယ်က Memory အလုပ်လုပ်ပုံ၊ Variable သက်တမ်းနဲ့ Execution တည်ဆောက်ပုံများကို အသေးစိတ်လေ့လာခြင်း။
Read in EnglishJavaScript အခြေခံများ
Predictable ဖြစ်ပြီး Bug ကင်းစင်တဲ့ JavaScript ကုဒ်တွေ ရေးသားနိုင်ဖို့အတွက် Engine က နောက်ကွယ်မှာ Memory ဘယ်လိုသတ်မှတ်တယ်၊ Variable တွေကို ဘယ်လိုခြေရာခံတယ်ဆိုတဲ့ အဓိက လုပ်ဆောင်ချက်တွေကို အသေအချာ နားလည်ထားဖို့ လိုအပ်ပါတယ်။
၁။ Variables နှင့် Keywords များ
JavaScript မှာ Variable တစ်ခု ကြေညာဖို့အတွက် Keyword (၃) မျိုး ပေးထားပြီး ၎င်းတို့ရဲ့ တန်ဖိုးပြောင်းလဲနိုင်မှု (Mutability) နဲ့ သက်ရောက်မှုနယ်ပယ် (Scoping) အပေါ် မူတည်ပြီး ကွာခြားသွားပါတယ်။
var(Legacy): Function-scoped ဖြစ်ပါတယ်။ တန်ဖိုးကို ထပ်ခါထပ်ခါ ကြေညာလို့ရသလို ပြောင်းလဲလို့လည်း ရပါတယ်။ Block အကန့်အသတ်တွေ (ifသို့မဟုတ်forloop) ကို လျစ်လျူရှုပါတယ်။let(Modern): Block-scoped ဖြစ်ပါတယ်။ တန်ဖိုးကို ထပ်မံပြင်ဆင် သတ်မှတ်နိုင်သော်လည်း တူညီတဲ့ Scope တစ်ခုထဲမှာ Variable အမည်တူနဲ့ ထပ်ကြေညာလို့ မရပါဘူး။const(Modern): Block-scoped ဖြစ်ပါတယ်။ ပြောင်းလဲလို့မရတဲ့ Immutable Reference Binding ဖြစ်ပါတယ်။ ကြေညာကတည်းက တန်ဖိုးတစ်ခါတည်း ထည့်ပေးရမှာဖြစ်ပြီး နောက်မှ တန်ဖိုးအသစ် ထပ်မံ Assign လုပ်လို့ မရပါဘူး။
အရေးကြီးသော ခြွင်းချက်-
constသည် Variable ၏ ကိုးကားမှုကိုသာ အသေပိတ်ထားခြင်း ဖြစ်သည်။ ထို့ကြောင့်constနဲ့ ကြေညာထားတဲ့ Object သို့မဟုတ် Array တစ်ခုရဲ့ အတွင်းပိုင်း Properties တွေကိုတော့ ဝင်ရောက်ပြင်ဆင်ခြင်း သို့မဟုတ် အသစ်ထည့်ခြင်းများ ပြုလုပ်နိုင်ပါသေးသည်။
၂။ အခြေခံ Data Types များ
JavaScript သည် Dynamic Type ဘာသာစကားဖြစ်ပြီး ၎င်းတွင် Type ကြီး (၂) မျိုး ခွဲခြားထားပါတယ်- Primitives နှင့် Objects။
Primitive Types (Value အလိုက် တိုက်ရိုက်သိမ်းဆည်းခြင်း)
ဤတန်ဖိုးများသည် ပြောင်းလဲ၍မရနိုင်ဘဲ (Immutable) ၎င်းတို့၏ တန်ဖိုးကို Memory Stack ထဲတွင် တိုက်ရိုက် သိမ်းဆည်းပါတယ်။
၁။ Number: ကိန်းပြည့်နှင့် ဒသမကိန်း နှစ်မျိုးလုံးကို ကိုယ်စားပြုသည် (ဥပမာ- 42, 3.14)။
၂။ String: Text စာသားများ ဖြစ်သည် (ဥပမာ- "Hello")။
၃။ Boolean: မှန် သို့မဟုတ် မှား (true / false) ကို ပြသသည်။
၄။ Null: တန်ဖိုး လုံးဝမရှိကြောင်းကို တမင်သက်သက် ထင်ထင်ရှားရှား ပြသလိုသည့်အခါ သုံးသည်။
၅။ Undefined: Variable ကြေညာထားသော်လည်း တန်ဖိုး တစ်စုံတစ်ရာ ထည့်မပေးရသေးသည့်အခါ အလိုအလျောက် သတ်မှတ်ခံရသည့် အမျိုးအစားဖြစ်သည်။
၆။ Symbol: အခြားအရာများနှင့် မတူဘဲ သီးသန့်ဖြစ်နေစေမည့် Unique Identifier အဖြစ် သုံးသည်။
Reference Types (လိပ်စာလမ်းကြောင်းဖြင့် ကိုးကားခြင်း)
Objects (အပါအဝင် Arrays နှင့် Functions များ) သည် ပြောင်းလဲနိုင်သော (Mutable) ဖွဲ့စည်းပုံများဖြစ်ပြီး ၎င်းတို့ကို Memory Heap ထဲတွင် သိမ်းဆည်းပါတယ်။ Variable ထဲတွင် အဆိုပါ Object တည်ရှိရာ Memory Address Pointer ကိုသာ လှမ်းယူသိမ်းဆည်းထားခြင်း ဖြစ်သည်။
၃။ Scope အလုပ်လုပ်ပုံ
Scope ဆိုသည်မှာ သင်ရေးသားလိုက်သော Variable များကို ကုဒ်၏ မည်သည့်နေရာကနေ လှမ်းမြင်နိုင်ပြီး အသုံးပြုခွင့်ရှိသည်ဆိုသည့် သက်ရောက်မှု နယ်ပယ်ကို ကန့်သတ်ပေးခြင်း ဖြစ်သည်။
- Global Scope: မည်သည့် Function သို့မဟုတ် Block ၏ ပြင်ပတွင်မဆို ကြေညာထားသော Variable များ ဖြစ်သည်။ ကုဒ်၏ မည်သည့်နေရာကမဆို လှမ်းသုံးနိုင်ပါတယ်။
- Function Scope: Function တစ်ခုခုအတွင်း
var၊letသို့မဟုတ်constဖြင့် ကြေညာထားသော Variable များကို အဆိုပါ Function ပြင်ပကနေ လှမ်းယူသုံးစွဲခွင့် မရှိပါ။ - Block Scope: ES6 တွင် စတင်မိတ်ဆက်ခဲ့သည်။ တွန့်ကွင်း
{}တစ်ခုအတွင်းletသို့မဟုတ်constဖြင့် ကြေညာထားသော Variable များသည် ထို Block အတွင်း၌သာ သက်ရောက်မှု ရှိသည်။
၄။ Hoisting နှင့် Temporal Dead Zone (TDZ)
Hoisting ဆိုသည်မှာ JavaScript Engine က ကုဒ်များကို တစ်ကြောင်းချင်းစီ အပေါ်မှအောက်သို့ မလည်ပတ်မီ (Compilation Phase တွင်) Variable ကြေညာချက်များအတွက် Memory နေရာကို အပေါ်ဆုံးသို့ ကြိုတင်ရွှေ့ဆိုင်း သတ်မှတ်ပေးလိုက်သည့် သဘာဝ ဖြစ်သည်။
console.log(greeting); // ပြန်ထွက်လာမည့်ရလဒ်- undefined
var greeting = "Hello";
// Engine က နောက်ကွယ်မှာ အခုလို ပုံစံမျိုး ပြောင်းလဲလုပ်ဆောင်သွားတာပါ-
// var greeting;
// console.log(greeting);
// greeting = "Hello";