ဒီနေ့ပြောပြပေးသွားမှာက ပေါ့ပေါ့ပါးပါး နဲ့ အရမ်းအသုံးဝင်တဲ့ JavaScript ရဲ့ special syntax တစ်ခုဖြစ်တဲ့ optional chain [?.] လေးအကြောင်းပါ။
အဖြစ်များတဲ့ type error ❌
Optional chain လေးအကြောင်းမပြောခင် အောက်က code example လေးတစ်ခုကို အရင်ကြည့်ကြမယ်။
const username = user.username
အဲcodeလေးကို browser ပေါ်မှာ run လိုက်ရင် user ဆိုတဲ့ object ထဲက username လို့ခေါ်တဲ့ attribute ထဲမှာသိမ်းထားတဲ့ value တစ်ခုခုကို username ဆိုတဲ့ variable ထဲ copy ယူပြီး ထည့်ပေးသွားမယ်ပေါ့။
ပြဿနာက အခုမှစတာပါ။ user variable ထဲမှာ သိမ်းထားတာဟာ ကျွန်တော်တို့ ထင်ထားသလို object value တစ်ခုခု ဟုတ်မနေဘဲ nullish value [null (ဒါမှမဟုတ်) undefined] သာဖြစ်နေရင်ရော ?
[TypeError: Cannot read properties of (null or undefined) (reading 'username’)] ဆိုတဲ့ type error တက်ပြီး program crash သွားမှာပါ။
အဲတော့ user variable ဟာ object value တစ်ခုခု သိမ်းထားတယ်လို့ ကျိန်းသေ ယူဆလို့မရဘဲ nullish value တစ်ခုခုလည်း ဖြစ်နေနိုင်ရင် user variable သိမ်းထားတာ nullish များဖြစ်နေမလား ဆိုပြီး အရင်ဆုံးစစ်ဖို့လိုလာပါပြီ။
အဲတော့ ခုဏကcode ကို
const username = user && user.username
ဆိုပြီး ပြောင်းရေးရမှာပါ။ အဲတော့ user && ဟာ user ထဲက value တစ်ခုခု မထုတ်ခင် falsy value တစ်ခုခု များဖြစ်နေမလား ဆိုပြီးအရင် စစ်ပေးသွားမှာ (falsy မှာ nullish ဖြစ်တဲ့ null undefined အပြင် integer (0) empty string (“”) စသဖြင့် ပါပါသေးတယ်)။အကယ်၍ falsy သာဖြစ်နေရင် အဲ falsy value ကိုဘဲ username variable ထဲထည့်ပေးသွားပြီး အနောက်က code တွေဆက်မ run တော့လို့ ခုဏက type error လည်း မတက်တော့ပါဘူး။
အသုံးများတဲ့ optional chain 💡
ပြဿနာတစ်ခုက အဲ && syntax ဟာ nested object တွေကိုစစ်ဖို့ (short-circuiting လုပ်တယ်လို့လည်းခေါ် ) အတွက် အရမ်း verbose ဖြစ်လွန်းတာပါ။ ဥပမာ user object ထဲမှာရှိတဲ့ names ဆိုတဲ့ object ထဲက firstname ကို ခဏက type error safe ဖြစ်အောင် ထုတ်ချင်မယ်ဆိုရင်
const firstname = (user && user.names) && user.names.firstname
ဆိုပြီးရေးရမှာပါ။ အဲတာကို optional chain သာသုံးပြီးရေးရင်
const firstname = user?.names?.firstname
ဆိုပြီးတန်းရေးရုံပါဘဲ။ 💡 code ကအရမ်းရိုးရှင်းသွားမှာပါ။ ပြီးတော့ optional chain ဟာ && လို user or names သာ falsy value ဖြစ်ခဲ့ရင် အဲ falsy value ကို firstname ထဲကို တိုက်ရိုက်ထည့်သွားမှာမဟုတ်ဘဲ undefined ကိုဘဲ ထည့်ပေးသွားမှာဖြစ်လို့ unexpected behaviors (ဥပမာ firstname ထဲကို integer (0) ဝင်သွားတာမျိုး) တွေကိုပါ cover ဖြစ်စေပါသေးတယ်။
Type safe attribute retrieval တစ်ခုထက်ပိုတဲ့ optional chain 🛠️
Optional chain ကို object တစ်ခုခုထဲက attribute တစ်ခုခုရဲ့ value ကို type error မတက်အောင် ထုတ်တာအပြင် object ထဲက method တစ်ခုခုကို type error မတက်အောင် invoke လုပ်တဲ့နေရာတွေ
const speech = user?.speak?.()
လိုမျိုး၊
value တစ်ခုခုရှိမရှိ ပေါ်မူတည်ပြီး expression တစ်ခုခု run ချင်တာမျိုး -
ဥပမာ user variable ထဲမှာ hobbies ဆိုတဲ့ object ရှိနေရင် profileCompletion ဆိုတဲ့ variable ကို တစ်ပေါင်းပေးလိုက်တာမျိုး -
let profileCompletion = 0
withProfileRanking && user?.hobbies?.[profileCompletion++]
စတဲ့ အခြေအနေတွေမှာလည်း အထာကျကျသုံးလို့ရပါသေးတယ်။
တန်ဆေးလွန်ဘေး 🚬
Optional chain ဟာ အရမ်းသုံးဝင်ပေမယ့် မလိုတဲ့နေရာတွေမှာ သုံးမိရင် development process တွေ debugging process တွေကို နှောင့်နှေးစေပါတယ်။ (ဥပမာ ကျွန်တော်တို့ရဲ့ user variable ဟာ value တစ်ခုခု သိမ်းကိုသိမ်းထားသင့်တဲ့ mandatory variable တစ်လုံးဖြစ်မယ်ဆိုရင် type error တက်သွားတာက ပိုပြီး အဓိပ္ပာယ်ရှိပါတယ်။ အဲတာမှ လုပ်သင့်လုပ်ထိုက်တာတွေကို development phase မှာတင် ကြိုမြင် ကြိုပြင်ထားမိမှာပါ။)
နိဂုံးချုပ်
ဆိုတော့ ဒီ blog လေးကိုဖတ်ပြီး
✅ Optional chain ဆိုတာဘာလဲ ?
✅ Optional chain ဟာ ဘယ်လိုပြဿနာတွေကို ဖြေရှင်းပေးလဲ ?
✅ Optional chain ကိုဘယ်လိုနေရာတွေမှာသုံးလဲ ?
စတာတွေကို အကြမ်းဖျင်း သဘောပေါက်နားလည်သွားမယ်လို့ ယုံကြည်ပါတယ်။
ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးပါဗျ။ ကျက်သရေရှိသောနေ့ရက်လေးကို ပိုင်ဆိုင်နိုင်ကြပါစေ။ 🤗
မှီငြမ်းနဲ့ ဆက်ဖတ်စေလိုသည်များ
https://javascript.info/optional-chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining