var, let & const in JavaScript Programming !!!

Developer လုပ်မယ်ဆိုသူတွေဟာ Html, CSS လေ့လာပြီးရင် JavaScript ကိုလေ့လာကြပါတယ်။ JS က နယ်ပယ်စုံမှာ သုံးလို့ရပြီး ကြီးမားတဲ့ Programming Language တစ်ခု ဖြစ်ပါတယ်။

ကြီးမားတယ်ဆိုသော်လည်း ကိုယ်က အခုမှ လေ့လာခါစ ပဲရှိသေးတယ်ဆိုတော့ Junior Dev နဲ့ လုပ်ငန်းခွင် ဝင်လို့ရတယ်ဆိုတဲ့ Level လောက်ထိပဲ လေ့လာဖို့ လိုပါဦးမယ်။ ကျန်တာ ဖြည်းဖြည်း လေ့လာသွားလို့ရပါတယ်။

အခုပြောပြမယ့် အကြောင်းရာက JS လေ့လာရင် variable တွေကို ကြေညာတဲ့ အခါမှာ Beginner တွေ နားလည်ဖို့ ခက်ခဲနိုင်၊ နားလည်မှုလွဲမှား နိုင်တဲ့ var, let နဲ့ const အကြောင်းကို အခြေခံ detail လေး ပြောပေးသွားပါမယ်။

i. var

# Global and Function scope

var ကိုသုံးပြီး ကြေညာလိုက်တဲ့ variable တွေဟာ globally scoped သို့မဟုတ် function/locally scoped တွေဖြစ်ကြပါတယ်။

function ပြင်ပမှာ ကြေညာတဲ့ var variable တွေဟာ global scoped တွေဖြစ်ကြပြီး အဲ့ဒီ variable တွေကို မည်သည့်နေမှာ မဆို ခေါ်ယူအသုံးပြုလို့ရပါတယ်။

function အတွင်းထဲမှာဘဲ ကြေညာတဲ့ var variable တွေကတော့ function scoped တွေဖြစ်ကြပြီး အဲ့ဒီ variable တွေကို မိမိ ကြေညာခဲ့တဲ့ function အတွင်းမှာပဲ အသုံးပြု လို့ရမှာ ဖြစ်ပါတယ်။

eg. 1

// global scoped
var name = "Bella Snow"
    
function getInfo() {
    // function or local scoped
    var age = 20

    console.log(name)
    console.log(age)
}
getInfo()
// Bella Snow
// 20

console.log(name)   // Bella Snow
console.log(age)   // Uncaught ReferenceError: age is not defined

name ကို function ပြင်ပမှာ ကြေညာခဲ့ လို့ global scoped ဖြစ်သွားတယ်။ ဒါကြောင့် မည်သည့် နေရာက‌နေမဆို ခေါ်လို့ရနေတယ်။

age ကို getInfo ဆိုတဲ့ function အတွင်းမှာ ကြေညာခဲ့လို့ function or locally scoped ဖြစ်သွားတယ်။ ဒါကြောင့် function အတွင်းမှာပဲ ယူသုံးရင် အလုပ်လုပ်သော်လည်း function ပြင်ပကနေ ခေါ်သုံးရင် not defined error ဖြစ်သွားပါတယ်။

# re-declared & re-assigned

var နဲ့ ကြေညာ-declare လုပ်ထားတဲ့ variable တွေကို နောက်တစ်ခါ ပြန် declared လုပ်လို့ ရသလို သူ့ ကို assign လည်းထပ်ချလို့ရပါတယ်။

eg. 2

// this will work 
var name = "Bella Snow";
var name = "Ella Snow";

// and this will work too
var name = "Bella Snow";
name = "Ella Snow";

# var’s Weakness or strengths

var ကိုအသုံးပြုရင် တစ်ချို့နေရာတွေမှာ ပြသနာ ရှိတတ်ပါတယ်။ ဒါဟာ သူ့ရဲ့ အားနည်းချက်လို့ ပြောလို့ရသလို အားသာချက်လို့ လည်းဆိုနိုင်ပါတယ်။

eg. 3

var greet = "မင်္ဂလာပါခင်ဗျ"
var gender = "female"

if (gender == "female") {
    var greet = "မင်္ဂလာပါရှင့်"
    console.log(greet)  //"မင်္ဂလာပါရှင့်"
}
console.log(greet)  //"မင်္ဂလာပါရှင့်"

condition အတွင်းရော အပြင်ပါ “မင်္ဂလာပါရှင့်” ပဲထွက်နေပါတယ်။

gender သည် female နဲ့ညီနေလို့ condition true တယ်၊ ဒါကြောင့် greet သည် နောက်တစ်ကြိမ် “မင်္ဂလာပါရှင့်” ဆိုတဲ့ တန်ဖိုးနဲ့ အတူ ကြေညာခြင်းခံ လိုက်ရတယ်။

ကိုယ်တကယ်ဖြစ်ချင်တာလဲ ဒီလိုပဲဆိုရင် ပြသနာမဟုတ်ပါဘူး။ တကယ်လို့များ greet ဆိုတဲ့ variable ကို ကြေညာခဲ့တာ မသိလိုက်ဘူး (သို့) if gender is equal to female ဆိုတဲ့ condition အတွင်းမှာ သက်သက် နုတ်ဆက်စကား၊ အပြင်မှာ သက်သက် နုတ်ဆက်စကား ဖြစ်စေချင်တဲ့ ပုံစံနဲ့ ရေးရင် ပြသနာ တက်ပါပြီ။

ဒါကြောင့် ဒီလိုပြသနာ ကိုဖြေရှင်းဖို့ JS ES6 မှာ let, const ဆိုပြီး variable ကြေညာနည်း ၂ မျိုး ထပ်တိုးလာပါတယ်။

ii. let

let သည် block scoped ဖြစ်ပါတယ်။ block scoped ကိုအရင်နားလည်အောင် ပြောပေးပါမယ်။ {} — curly braces နဲ့ ဘောင်ခတ်ထားတဲ့ အတွင်းပိုင်းကို block လို့ခေါ်ပါတယ်။

ဒါကြောင့် let သည် block scoped မလို့ block ထဲမှာ ကြေညာထားရင် အဲ့ဒီ block အတွင်းမှာပဲ အလုပ်လုပ်သွားမှာဖြစ်ပြီး သို့သော် အပြင်မှာ ကြေညာထားရင်တော့ အပြင်မှာရော block အတွင်းမှာပါ အသုံးပြုလို့ရမှာ ဖြစ်ပါတယ်။

eg. 1

let greet = "မင်္ဂလာပါခင်ဗျ"
var gender = "female"

if (gender == "female") {
    let greet = "မင်္ဂလာပါရှင့်"
    console.log(greet)  // မင်္ဂလာပါရှင့်
}
console.log(greet)  // မင်္ဂလာပါခင်ဗျ

var နဲ့မတူတော့ပါဘူး။ အတွင်းက greet ရဲ့ output သည် “မင်္ဂလာပါရှင့်” ဖြစ်ပြီး အပြင်မှာတော့ “မင်္ဂလာပါခင်ဗျ” ဆိုပြီး သီးခြားစီ ဖြစ်သွားပါပြီ။

ဒီတစ်ခါမှာတော့ ယောကျ်ားလေးဆိုရင် “မင်္ဂလာပါခင်ဗျ”၊ မိန်းကလေးဆိုရင် “မင်္ဂလာပါရှင့်” လို့ နုတ်ဆက်ပါ ဆိုတဲ့ Logic ကိုလိုချင်ရင် let ကိုသုံးခြင်းအားဖြင့် အဆင်ပြေသွားနိုင်ပါတယ်။

# re-assigned & re-declared

var လိုပဲ let ကို တန်ဖိုးအသစ် assign ပြန်လုပ်လို့ရပါတယ်။ သို့သော် ပြန်တော့ ကြေညာ ခွင့်မရှိပါဘူး။

eg. 2

let greet = "မင်္ဂလာပါ";
greet = "မင်္ဂလာပါ ခင်ဗျ";
console.log(greet)  // မင်္ဂလာပါ ခင်ဗျ

re-assigned လုပ်လို့ရတာမလို့ error မရှိပါဘူး။

eg. 3

let greet = "မင်္ဂလာပါ";
let greet = "မင်္ဂလာပါ ခင်ဗျ";

re-declared ပြန်လုပ်ခွင့်မရှိလို့ အောက်မှာပြထားသလို error တက်သွားပါမယ်။

Uncaught SyntaxError: Identifier ‘greet’ has already been declared

မတူညီတဲ့ scoped မှာတော့ တူညီတဲ့ variable name ကို ပြန်ကြေညာ လို့ရပါတယ်၊ eg. 1 မှာဖော်ပြခဲ့ပါတယ်။

iii. const

const က let နဲ့ တစ်ချို့ဟာတွေ တူပါတယ်။ const သည် let လိုပဲ block scoped ဖြစ်ပါတယ်။

ဒါကြောင့် const သည် block scoped မလို့ block ထဲမှာ ကြေညာထားရင် အဲ့ဒီ block အတွင်းမှာပဲ အသုံးပြုလို့ရမှာဖြစ်ပြီး အပြင်မှာ ကြေညာထားရင်တော့ အပြင်မှာရော block အတွင်းမှာပါ အသုံးပြုလို့ရမှာ ဖြစ်ပါတယ်။

# re-assigned & re-declared

eg. 1

const greet = "မင်္ဂလာပါ";
greet = "မင်္ဂလာပါ ခင်ဗျ";

// Uncaught TypeError: Assignment to constant variable.

eg. 2

eg. 2
const greet = "မင်္ဂလာပါ";
const greet = "မင်္ဂလာပါ ခင်ဗျ";

// Uncaught SyntaxError: Identifier 'greet' has already been declared

assign ပြန်ချတာ၊ declare ပြန်လုပ်တာ ၂ မျိုးလုံး လက်မခံပါဘူး။

eg. 3

const greet = "မင်္ဂလာပါ ခင်ဗျ";
const gender = "female"

if(gender == "female") {
    const greet = "မင်္ဂလာပါ ရှင့်";
    console.log(greet)      // မင်္ဂလာပါ ရှင့်
}

console.log(greet)  // မင်္ဂလာပါ ခင်ဗျ

scoped မတူရင် declare ပြန်လုပ်လို့ရပါတယ်။

နောက်ထပ်အရေးကြီးတဲ့ တစ်ခု ရှိပါသေးတယ်။ Object နဲ့ပက်သက်လာရင် Object တန်ဖိုးကို re-assigned or update ပြန်လုပ်လို့ မရဘူးဆိုပေမယ့် အဲ့ဒီ Object ရဲ့ Properties တွေကိုတော့ update လုပ်လို့ရပါတယ်။

eg. 4

const person = {
    name: "John Doe",
    age: 20
}
person = {
    nationality: "Myanmar",
    city: "Yangon"
}

// Uncaught TypeError: Assignment to constant variable.

re-assigned or update လက်မခံလို့ အခုလို error တက်ပါမယ်။

eg. 5

const person = {
    name: "John Doe",
    age: 20
}
person.name = "Ella Snow"
person.age = 25

console.log(person) // {name: 'Ella Snow', age: 25}

const variable ဆိုပေမယ့်၊ variable က Object ဖြစ်နေရရင် Object တန်ဖိုးကို တိုက်ရိုက် update or re-assigned လုပ်လို့ မရပေမယ့် သူ့ရဲ့ Object properties တွေကိုတော့ ဖော်ပြထားသလို update ပြန်လုပ်လို့ရပါတယ်။

နောက်ဆုံး အနေနဲ့ ပြောချင်တာ တစ်ခုကျန်သေးပါတယ်။ အဲ့ဒါဘာလဲ ဆိုတော့ Vue.js Project တွေမှာ variable တွေကြေညာရင် var, let တို့ကို မသုံးဘဲ အမြဲ const ကိုပဲ ဘာလို့ သုံးတာလဲ ပေါ့။

ဘာလို့လဲ ဆိုတော့ Vue ရဲ့ ref variable တွေကဆိုရင် ဘယ်တော့ မှ re-assigned or update ပြန်မလုပ်ပါဘူး။ သူ့ရဲ့ property ကိုပဲ update ပြန်လုပ်လို့ဖြစ်ပါတယ်။

ESLint ဆိုတဲ့ JS code တွေကို analysis လုပ်တဲ့ Tool ကဆိုရင်လည်း ဘယ်တော့မှ re-assigned လုပ်စရာမလိုတဲ့ variable တွေကို cognitive load နဲ့ maintainability improve ဖြစ်ဖို့ const နဲ့ပဲ ကြေညာတာ ပိုကောင်းတယ်လို့ ဆိုပါတယ်။

eg. 6

const name = ref('John Doe')
name.value = "Emma"

ကဲ ဒီလောက်ဆိုရင် var, let, const အကြောင်းကို အခြေခံ လောက်တော့ နားလည်သွားမယ်လို့ မျှော်လင့်ပါတယ်။ အားလုံးကျန်းမာပြီး ပျော်ရွှင်သော နေ့ရက်လေးပိုင်ဆိုင် နိုင်ကြပါစေ။

Love you all. Written by Ye Myint Soe (Salai).