JavaScript မှာ [ ] ( ) ! + ဆိုတဲ့ သင်္ကေတ ၆ လုံးတည်း ကို သုံးပြီး alert('Hello') လို program မျိုးတင်မကဘဲ ကြိုက်တဲ့ code ကို ရေးလို့ရပါတယ်။
ဒါဟာ JavaScript ရဲ့ Type Coercion (ဒေတာ အမျိုးအစား တစ်ခုကနေ တစ်ခုကို အလိုအလျောက် ပြောင်းလဲခြင်း) ကို အသုံးချထားတာ ဖြစ်ပါတယ်။
ဒီ blog ထဲက code တွေကို Chrome Browser ရဲ့ Console (F12 နှိပ်ပြီး Console tab ကိုသွား) မှာ တစ်ခုချင်းစီ ကူးထည့်ပြီး Enter ခေါက်ကြည့်ပါ။
အဆင့် (၁) — True နဲ့ False ထုတ်ခြင်း
JavaScript မှာ array အလွတ် [] တစ်ခုဟာ logic အရ "မှန်တယ် (truthy)" လို့ ယူဆပါတယ်။ ! ဆိုတဲ့ သင်္ကေတက "ပြောင်းပြန်လှန်" ပေးတာပါ။
Array အလွတ်တစ်ခု စစ်ကြည့်မယ်
[]// [] (array အလွတ်)
ဒီတော့ ![] က false၊ !![] က true ဖြစ်ပါတယ်။ ဒါက ကျွန်တော်တို့ရဲ့ ပထမဆုံး အုတ်မြစ်ပါ။
အဆင့် (၂) — ကိန်းဂဏန်း (Numbers) ထုတ်ခြင်း
JavaScript မှာ + သင်္ကေတကို ရှေ့ကခံလိုက်ရင် နံပါတ်အဖြစ် အလိုအလျောက် ပြောင်း ပေးတတ်ပါတယ်။
Array အလွတ်ကို နံပါတ်ပြောင်းရင် 0 ရမယ်
+[]// 0
+!![] က 1 ဖြစ်ပြီး ကြိုက်သလောက် ပေါင်းသွားရုံပါပဲ။ 5 လိုချင်ရင် ငါးခါ ပေါင်းပေးလိုက်ရုံ။
အဆင့် (၃) — စာသား (Strings) ထုတ်ခြင်း
Boolean (true/false) ဒါမှမဟုတ် Number ကို array အလွတ် [] နဲ့ ပေါင်းပေးလိုက်ရင် String (စာသား) ဖြစ်သွားပါတယ်။
false ကို String ပြောင်းမယ်
![] + []// "false"
ဒီအဆင့်ပြီးရင် ကျွန်တော်တို့ဆီမှာ "false" နဲ့ "true" ဆိုတဲ့ စာသားနှစ်ခု ရှိသွားပါပြီ။
အဆင့် (၄) — စာလုံးတစ်လုံးချင်း ဆွဲထုတ်ခြင်း
String ထဲက စာလုံးတစ်လုံးချင်းကို index နံပါတ်နဲ့ ယူလို့ရပါတယ်။ "false"[0] ဆိုရင် "f" ရပါမယ်။
"false" ထဲက "f" ကို ယူမယ် (index 0)
(![] + [])[+[]]// "f"
"false" ထဲမှာ f, a, l, s, e ရှိပြီး "true" ထဲမှာ t, r, u, e ရှိပါတယ်။ ဒီ စာလုံး ၈ လုံးကို လွတ်လွတ်လပ်လပ် ဆွဲထုတ်သုံးလို့ ရပါပြီ။
အဆင့် (၅) — နောက်ထပ် စာလုံးတွေ ထုတ်ခြင်း
"false" နဲ့ "true" ထဲက စာလုံးတွေ မလုံလောက်သေးပါဘူး။ နောက်ထပ် စာလုံးတွေ လိုချင်ရင် အခြား JavaScript တန်ဖိုးတွေကို String ပြောင်းပြီး ယူရပါတယ်။
undefined ကို String ပြောင်းပြီး "n", "d" ယူမယ်
[][+[]] + []// "undefined"
ဒီနည်းနဲ့ "undefined", "NaN", "Infinity" ထဲက စာလုံးတွေကိုပါ ယူသုံးလို့ ရပါပြီ။
အဆင့် (၆) — Code အဖြစ် Run ခြင်း
နောက်ဆုံးအဆင့်ကတော့ ရလာတဲ့ စာသားတွေကို Code အဖြစ် အလုပ်လုပ် ခိုင်းတာပါ။ JavaScript မှာ Function constructor ကို သုံးပြီး String ကို code အဖြစ် run လို့ရပါတယ်။
Array ရဲ့ method name ကို String နဲ့ ခေါ်လို့ရတယ်
[]["filter"]// ƒ filter() { [native code] }
"filter" နဲ့ "constructor" ဆိုတဲ့ စာလုံးတွေကိုပါ အဆင့် (၄) နဲ့ (၅) မှာ သင်ခဲ့တဲ့ နည်းတွေနဲ့ တစ်လုံးချင်း ဖန်တီးပြီး ပေါင်းစပ်ရတာပါ။ ဒါကြောင့် နောက်ဆုံး code ကြီးက အရမ်း ရှည်သွားတာပါ။
အပြည့်အစုံ ဥပမာ — "alert(1)" ကို သင်္ကေတ ၆ လုံးတည်းနဲ့ ရေးခြင်း
အခု ကျွန်တော်တို့ သိထားတဲ့ အဆင့်တွေ အကုန်လုံး ပေါင်းပြီး alert(1) ကို ၆ လုံးတည်းနဲ့ ရေးကြည့်ရအောင်။
"a" ကို ထုတ်မယ် — "false"[1]
(![] + [])[+!![]]// "a"
ဒီနည်းနဲ့ "alert" ဆိုတဲ့ စာလုံးကို ဖန်တီးပြီး Function constructor ထဲ ထည့်ပြီး run ရတာပါ။
တကယ့် alert(1) ကို ၆ လုံးတည်းနဲ့ ရေးရင် စာလုံးပေါင်း ထောင်နဲ့ချီ ရှည်ပါတယ်။ ဒါပေမယ့် အလုပ်လုပ်ပုံ အခြေခံမူက ဒီအဆင့် ၆ ဆင့်ပဲ ဖြစ်ပါတယ်။
Type Coercion ဘာကြောင့် အရေးကြီးလဲ
ဒီ သင်္ကေတ ၆ လုံး trick က ပျော်စရာ ကောင်းပေမယ့် တကယ့် သင်ခန်းစာ ကတော့ JavaScript ရဲ့ Type Coercion ကို နားလည်ဖို့ပါ။
String + Number ပေါင်းရင် String ဖြစ်သွားတယ်
"5" + 3// "53" (ဂဏန်း ပေါင်းတာ မဟုတ်ဘူး)
ကိုယ့် code ထဲမှာ == အစား === ကို အမြဲသုံးပါ။ Type Coercion ကြောင့် ထင်မထားတဲ့ bug တွေ ဖြစ်တတ်ပါတယ်။
နိဂုံးချုပ်
ဒီ blog မှာ JavaScript ရဲ့ Type Coercion ကို အသုံးချပြီး သင်္ကေတ ၆ လုံးတည်းနဲ့ program ရေးနိုင်ပုံကို အဆင့်ဆင့် လေ့လာခဲ့ပါတယ်။
အဓိက သိထားရမယ့် အချက်တွေကတော့:
![]ကfalseဖြစ်ပြီး!![]ကtrueဖြစ်တယ်+ခံရင် Number ပြောင်းသွားတယ် (+!![]=1)[]နဲ့ ပေါင်းရင် String ပြောင်းသွားတယ် (!![] + []="true")- String ထဲက index နဲ့ စာလုံးတစ်လုံးချင်း ယူလို့ရတယ်
Functionconstructor နဲ့ String ကို code အဖြစ် run လို့ရတယ်
Type Coercion ကို နားလည်ထားရင် JavaScript ရဲ့ "ထူးဆန်းတဲ့" behavior တွေကို ရှင်းရှင်းလင်းလင်း မြင်နိုင်ပါလိမ့်မယ်။