ECMAScript 6 အေၾကာင္းသိေကာင္းစရာ

The Next of Javascript

Javascript ဟာ Web Developer တိုင္း နီးပါး ျငင္းပယ္လို႔မရတဲ့ language ပါ။ သင္သာ Fullstack developer တစ္ေယာက္ဆိုရင္ Backend ကို Ruby ဒါမွမဟုတ္ Java လို language မ်ိဳးသုံးရင္ frontend က behaviour ေတြကို ေဖာ္ျပဖို႔ Javascript ကို အနည္းဆုံးေတာ့ အသုံးျပဳရတာပါပဲ။ တကယ္လို႔ ဒိတ္ေအာက္ ေနတဲ့ applet ေတြ သုံးရင္ေတာ့ တမ်ိဳးေပါ့။ အဲဒီလို Javascript နဲ႔ ထိေတြ႕တဲ့ အခါတိုင္း အမ်ားစုရဲ့ တုံျပန္ခ်က္ကေတာ့ သိပ္ၿပီး ႏွစ္ႏွစ္ၿခိဳက္ၿခိဳက္ မရွိၾကပါဘူး။ Javascript ရဲ့ functional ဆန္တဲ့ အေရးအသားေတြကို OOP paradigm ကလာတဲ့ လူေတြ အေနနဲ႔ ေလ့လာရတဲ့ အခက္အခဲက အနည္းနဲ႔အမ်ားပါပဲ။ ကၽြန္ေတာ္ဆိုရင္လည္း PHP ကေန Javascript ကို ကူးေတာ့ မတူတဲ့ Pattern ေတြ၊ Jargon ေတြ လုပ္ထုံးလုပ္နည္းေတြက တကယ္ကို မ်က္လုံးက်ယ္စရာပါပဲ။ တကယ္တမ္း hand on ေရးနိုင္ဖို႔က ေျခာက္လ ေလာက္ အခ်ိန္ေပးခဲ့ရပါတယ္။

ဘာပဲျဖစ္ျဖစ္ အခုခ်ိန္မွာေတာ့ Javascript ဟာ တကယ္ကို သေဘာက်စရာ ေကာင္းတဲ့ language တစ္ခုလိုပဲ ျမင္မိပါတယ္။ အခု မ်ားမၾကာမီ ၂၀၁၅ အတြင္းမွာလည္း Javascript ရဲ့ ေနာက္ထပ္မ်ိဳးဆက္ျဖစ္တဲ့ ES6 ကိုလည္း အတည္ျပဳေတာ့မွာျဖစ္ပါတယ္။ Javascript လိုသာ ကၽြန္ေတာ္တို႔က အလြယ္ေခၚၾကေပမယ့္ သူရဲ့ နာမည္အရင္းကေတာ့ ECMAscript ပါ။ အခုလက္ရွိအသုံးျပဳေနတဲ့ browser ေတြမွာ ES 5.1 ကို အသုံးျပဳၾကၿပီး အေဟာင္းေတြမွာေတာ့ သူထက္နိမ့္တဲ့ version ကို အသုံးျပဳၾကပါတယ္။ ECMAscript ေတြရဲ့ version ေတြထုတ္လုပ္ခဲ့တာ ခုႏွစ္ အလိုက္ေဖာ္ျပရရင္ေတာ့

၁၉၉၉ ခုႏွစ္တြင္ ECMAScript 3
၂၀၀၅ ခုႏွစ္တြင္ ECMAScript 4
၂၀၀၉ ခုႏွစ္တြင္ ECMAScript 5
၂၀၁၁ ခုႏွစ္တြင္ ECMSScript 5.1

တို႔ကို အသီးသီး အတည္ျပဳခဲ့ပါတယ္။ အခုထြက္လာမယ့္ ECMAscript version 6 မွာ feature ေတြ အမ်ားႀကီး ပါလာ ပါလိမ့္မယ္။ တခ်ိဳ႕ feature ေတြက တျခား language ေတြမွာ ပါၿပီးသား ေတြကို အခုမွ အတည္ျပဳတာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ တျခားဘက္က ကူးလာတဲ့ developer ေတြလည္း ပို အဆင္ေျပမွာ ျဖစ္သလို Javascript developer ေတြ အေနနဲ႔ ပိုၿပီး productive ျဖစ္ျဖစ္ လုပ္နိုင္ပါလိမယ္။ အခုလက္ရွိ ေလာေလာဆယ္မွာေတာ့ တခ်ိဳ႕ application ေတြကို ES6 ကေန ES5 ကို ေျပာင္းေပးတဲ့ third party convertor ေတြကိုသုံးၿပီး ေရးေနတဲ့သူေတြ ေရးေနၾကပါၿပီ။ ဥပမာ ES6ify ၊ traceur ဒါအျပင္ node မွာဆိုရင္လည္း version 0.1.x version ေတြကစၿပီး harmony mode ကိုအသုံးျပဳၿပီး ES6 feature ေတြကို ေရးလို႔ရေနပါၿပီ။ express ကိုေရးတဲ့သူကပဲ Koa ဆိုတဲ့ ES6 အေျချပဳ framework တစ္ခုကို ေရးခဲ့ပါေသးတယ္။ ဒီေန႔ ၾကားရတဲ့ သတင္းအရ Node.js ရဲ့ fork ျဖစ္တဲ့ io.js မွာဆိုရင္ ES6 ရဲ့ feature တခ်ိဳ႕ကို default အေနနဲ႔ အသုံးျပဳနိုင္ၿပီ ျဖစ္ပါတယ္။ io.js ဟာ node ရဲ့ government model fork ျဖစ္ၿပီး တခ်ိန္ၾကရင္ ျပန္ၿပီး merge ဖို႔ အလားအလာရွိပါတယ္။ ဒါေၾကာင့္ ES6 ဟာ အေႏွးနဲ႔ အျမန္ ကၽြန္ေတာ္တို႔ ၾကည့္ထားဖို႔ လိုပါလိမ့္မယ္။ အခုမဟုတ္ရင္ေတာင္ ကၽြန္ေတာ္တို႔ တခ်ိန္မွာ အသုံးဝင္လာပါလိမ့္မယ္။

Block Scope

Javascript ဟာ တကယ္ေတာ့ ၿပီးျပည့္စုံတဲ့ language တဲ့တစ္ခု မဟုတ္ပါဘူး။ ေျပာသာ ေျပာတာ ၿပီးျပည့္စုံတဲ့ language ဆိုတာ အျပင္ မွာ မရွိပါဘူး။ အဲဒီ အျပစ္အနာအဆာေတြထဲက တစ္ခုကေတာ့ Javascript ရဲ့ scope ပါပဲ။ Javascript ရဲ့ scope အားနည္းခ်က္ေတြေၾကာင့္ Javascript ဟာ Global variable pollution ျဖစ္တဲ့လို႔ နာမည္ႀကီးပါတယ္။ အဲဒီ အခ်က္ေတြကို ဒီ ES6 မွပဲ ျပင္နိုင္တာပါ။ ES5 မွာ အထိ Javascript ရဲ့ scope ဟာ block scope မဟုတ္ပါဘူး ၊ function scope ပါ။ က်န္တဲ့ language အေတာ္မ်ားမ်ားဟာ တကယ္တမ္း ပို အဆင္ေျပတဲ့ block scope ကို အသုံးျပဳပါတယ္။ Javascript မွာေတာ့ ယခုလက္ရွိ ES6 မွသာ Block scope ကို support ေပးတာျဖစ္ပါတယ္။ ပိုရွင္းသြားေအာင္ ေအာက္က ဥပမာကို ၾကည့္ပါ။

အေပၚက ဥပမာဟာ ကၽြန္ေတာ္ list ဆိုတဲ့ object array တစ္ခုယူၿပီး အကုန္လုံးမွာ name နဲ႔ email ဆိုတဲ့ attribute ေတြကို ျဖည့္လိုက္တာပါ။ အျပင္မွာ ကၽြန္ေတာ္ j ဆိုတဲ့ object ကို အလုပ္လုပ္ေသးလားဆိုတာ စမ္းၿပီး log ထုတ္ၾကည့္တာပါ။ String value ျဖစ္တဲ့ “Okkar” ဆိုတဲ့ နာမည္က ရမွာပါ။ တကယ္ဆိုရင္ j ဆိုတဲ့ value က သုံးၿပီးသြားၿပီ ျဖစ္လို႔ မလိုေတာ့ပါဘူး။ ES5 မွာဆိုရင္ အဲဒါကို ရွင္းဖို႔အတြက္ j ကို null ဒါမွမဟုတ္ undefined ျပန္ထည့္ေပးသင့္ပါတယ္။ မထည့္လည္း ဘာမွေတာ့ မျဖစ္ပါဘူးသို႔ memory မွာ allocate လုပ္ထားတာျဖစ္လို႔ မလိုတာေတြ မလုပ္တာဟာ အေကာင္းဆုံးပါပဲ။ တခ်ိဳ႕ကလည္း empty value တစ္ခုခုကို assign မလုပ္ပဲနဲ႔

delete j;

ဆိုၿပီး လုပ္တက္ၾကပါတယ္။ သုံးလို႔ေတာ့မရေတာ့ေပမယ့္ေကာင္းတဲ့ နည္းလမ္းေတာ့ မဟုတ္ပါဘူး။ delete keyword ဟာ နာမည္နဲ႔လိုက္ေအာင္ တကယ္ဖ်က္လိုက္တာ မဟုတ္ပါဘူး။ reference လုပ္ထားတာကိုပဲ ပယ္ဖ်က္လိုက္တာပါ။ တကယ္လို႔ j ကို delete လုပ္လိုက္ရင္ေတာ့ j ကိုေခၚရင္ေတာ့ empty ျဖစ္ေနမွာ ျဖစ္ေပမယ့္ တကယ္တမ္း memory ရဲ့ တေနရာမွာ name နဲ႔ address ဟာ ရွိေနတုံး ျဖစ္ပါတယ္။

Let

အဲဒီျပႆနာကို ေျဖရွင္းဖို႔အတြက္ ES6 မွာ let ဆိုတဲ့ keyword ကို အသုံးျပဳနိုင္ပါတယ္။ let ဟာ var နဲ႔မတူတာက function scope မဟုတ္ပဲ block scope ျဖစ္ပါတယ္။ let ဟာ သူနဲ႔အနီးဆုံးရွိတဲ့ {} ႏွစ္ခုၾကားထဲမွာ အလုပ္လုပ္တာ ျဖစ္ၿပီး var ကေတာ့ အနီးဆုံး function ရဲ့ scope မွာ အလုပ္လုပ္တာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ အေပၚကလိုမ်ိဳး အေျခအေနမ်ိဳးမွာ let ကို အသုံးျပဳတာဟာ အေတာ္ေလးကို သက္ေတာင့္သက္သာ ျဖစ္ၿပီး အဆင္လည္း ေျပပါတယ္။

အေပၚက code မွာဆိုရင္ log ထဲမွာက undefined ပဲေပၚမွာပါ။ block scope အတြင္းကဟာကို run ၿပီးတာနဲ႔ let ကို destroy လုပ္လိုက္ပါတယ္။ မလိုအပ္ပဲ memory မွာ allocate မလုပ္ထားတဲ့ အတြက္ performance အတြက္ ပိုၿပီး ေကာင္းလာမွာပါ။ ဒါအျပင္ မလိုအပ္ပဲ variable pollute ျဖစ္တာကေန တားဆီးနိုင္ပါတယ္။

Default Parameter

default parameter ဟာ တျခား language ေတြမွာ အသုံးျပဳနိုင္ေပမယ့္ Javascript မွာ အသုံးမျပဳနိုင္ေသးတဲ့ feature ပါ။ javascript မွာ default parameter မပါတဲ့အတြက္ assign value ေတြ သတ္မွတ္တဲ့ အခါက ေအာက္က အတိုင္း လုပ္ရပါတယ္။

ဒါမွမဟုတ္ ပိုၿပီးတိုသြားေအာင္ developer အေတာ္မ်ားမ်ားက ေအာက္ကအတိုင္းေရးၾကပါတယ္။

သို႔ေသာ္ ဘယ္လိုပဲလုပ္လုပ္ native support လုပ္ရင္ေတာ့ ပိုၿပီးေတာ့ ေကာင္းတာေပါ့။ ES6 မွာေတာ့ ေအာက္ကအတိုင္း အသုံးျပဳလို႔ရေတာ့မွာပါ။

Rest Parameter

Rest Parameter လိုသေဘာတရားမ်ိဳးဟာ Java လို Language မ်ိဳးမွာ ပါတာၾကာလွပါၿပီ။ သင့္အေနနဲ႔ number ေတြထည့္သေလာက္ေပါင္းထည့္ သြားမယ့္ function တစ္ခု ေရးမယ္ဆိုပါစို႔။ အရင္ဆုံး ဂဏန္း ႏွစ္လုံးအတြက္ဆို ေအာက္က အတိုင္း ေရးရမွာ ျဖစ္ပါတယ္။

ဒါေပမယ့္ အေပၚက code ဟာ ဂဏန္းႏွစ္လုံးအတြက္ပဲ မွန္မွာ ျဖစ္ပါတယ္။ ဂဏန္းသုံးလုံးအတြက္ဆိုရင္ parameter သုံးခု သုံးရမွာျဖစ္ၿပီး ေလးခုဆိုရင္ ေလးခုေပါ့။ ဘယ္ႏွစ္လုံးပါမလဲ မသိတဲ့ အေနအထားမွာဆိုရင္ မေသခ်ာပါဘူး။ အဲဒီလို အေျခအေနမ်ိဳးအတြက္ ေအာက္ကလို ေရးနိင္ပါတယ္။

အေပၚက ဥပမာ မွာ array ကိုအသုံးျပဳၿပီး loop ပတ္ကာ result အေနနဲ႔ ျပန္ထုတ္ေပးလိုက္ပါတယ္။ ေနာက္ တစ္မ်ိဳး ဒီလို ထပ္ေရးလို႔ရပါေသးတယ္။

Javascript မွာ function တစ္ခုေခၚလိုက္တိုင္း this နဲ႔ arguments တို႔ကို အသုံးျပဳလို႔ရပါတယ္။ this က object ရဲ့ member variable ေတြ function ေတြကို ေခၚတဲ့ေနရာအမွာ အသုံးျပဳနိုင္ပါတယ္။ Javascript မွာ function တိုင္းဟာ object ျဖစ္တဲ့ object behaviour ေတြပါဝင္ပါတယ္။ arguments ကေတာ့ တကယ္တမ္း function ကို pass လုပ္လိုက္တဲ့ argument ေတြကို array အေနနဲ႔ဝင္လာတာပါ။ ပုံမွန္အေျခအေနမွာ အေတာ္ အသုံးဝင္ေပမယ့္ ရွုပ္ေထြးလာတဲ့ အခ်ိန္မွာေတာ့ အဆင္မေျပေတာ့ပါဘူး။

အေပၚက functionမွာဆိုရင္ error တက္မွာျဖစ္ပါတယ္။ arguments function ရဲ့ ေနာက္ဆုံး parameter ဟာ number type မဟုတ္တဲ့အတြက္ပါ။ အဲဒီလို ျပႆနာမ်ိဳးကို ေျဖရွင္းလို႔ရေပမယ့္ parameter မ်ားလာတဲ့အမၽွ ပိုရွုပ္ေထြးလာပါတယ္။ အဲဒါအျပင္ code ရဲ့ readability လည္းက်ပါတယ္။ တကယ္လို႔ ES6 မွာဆိုရင္ ေအာက္က အတိုင္းလုပ္လို႔ရပါတယ္။

Spread

…variable ဟာ argument ေတြ passing လုပ္တဲ့ေနရာသာမက က်န္တဲ့ေနရာမွာလည္း အသုံးဝင္ပါတယ္။ ဥပမာ သင့္ အေနနဲ႔ array ႏွစ္ခုကို ေပါင္းခ်င္တယ္ဆိုပါစို႔။

…variable ကိုၾကားကေန assign လုပ္ၿပီး ေပါင္းလို႔ရပါတယ္။

For…of

Javascript မွာ key value ေတြအတြက္ သာမန္ for loop ေတြသာမက for…in လိုမ်ိဳး loop ေတြရွိပါတယ္။

သာမန္ for loop ေတြနဲ႔ ေရးရတာ ရွင္းၿပီး powerful လည္းျဖစ္ပါတယ္။ ဒါေပမယ့္ key ကိုလိုခ်င္ရင္ တန္းရေပမယ့္ value ကိုလိုခ်င္တဲ့ အခါ အေပၚကလိုမ်ိဳး ျပန္ေထာက္ရပါတယ္။ လြယ္ကူတဲ့ array ေတြမွာ မသိသာေပမယ့္ nested array ေတြမွာဆိုရင္ memory ကိုမလိုအပ္ပဲ သုံးရပါတယ္။ အဲဒီဟာကို ေျဖရွင္းဖို႔အတြက္ for…of loop ကိုသုံးနိုင္ပါတယ္။

key ကိုလိုခ်င္ရင္ for…in ၊ value ကိုလိုခ်င္ရင္ for…of ကိုသုံး႐ုံပါပဲ။

ES6 မွာ feature ေတြက ဒါတင္ပဲလား ဆိုေတာ့ မဟုတ္ေသးပါဘူး။ အမ်ားႀကီး က်န္ပါေသးတယ္။ တခ်ိဳ႕ concept ေတြကေတာ့ code sample ၾကည့္တာနဲ႔သေဘာေပါက္နိုင္ၿပီး တစ္ခ်ိဳ႕ဟာေတြကေတာ့ စာျပန္ဖတ္ယူရပါတယ္။ အေပၚက feature ေတြနဲ႔ ပတ္သတ္ၿပီး အရင္ႏွစ္ပတ္ေလာက္က Phandeeyar မွာ ကၽြန္ေတာ္ Introduction to ES6 ဆိုၿပီး ေျပာတဲ့ထဲက ဟာေတြပါပဲ။ ျပန္ရွင္းဖို႔လိုေလာက္တာေတြကို article အေနနဲ႔ေရးလိုက္ပါတယ္။ က်န္တဲ့ code ၾကည့္တာနဲ႔ နားလည္ေလာက္တာေတြကိုေတာ့ ကၽြန္ေတာ္ slide ကိုပဲၾကည့္ေစခ်င္ပါတယ္။ေနာက္တစ္ပိုင္းမွာေတာ့ ကၽြန္ေတာ္ Phandeeyar မွာ မေျပာျဖစ္ခဲ့တဲ့ အပိုင္းေတြကို ေရးဖို႔ႀကိဳးစားပါ့မယ္။ ေက်းဇူးတင္ပါတယ္။