JavaScript (Best Practices & Clean Coding)

1345 views May 18, 2024

JavaScript (Best Practices and Clean Coding)

ဘယ် program ရေးရေး တစ်ယောက်တည်းရေးရတဲ့ program ရှားပါတယ်။ အကယ်၍ တစ်ယောက်ထဲရေးထားရတဲ့ program ဖြစ်ရင်တောင် အချိန်တစ်ခုကြာရင် ကိုယ်ရေးထားတဲ့ code တွေကို မေ့လောက်ပါတယ်။ ပြောချင်တာက program coding ရေးရတဲ့လူတွေအနေနဲ့ မိမိ coding ကို တစ်ခြား Team members တွေပြန်ကြည့်/ရေး ရင်ပဲဖြစ်ဖြစ်.. မိမိက ပြန်ရေးရရင်ဖြစ်ဖြစ် ကြည့်လိုက်တာနဲ့ သဘောပေါက်နားလွယ်စေမယ့် ပုံစံမျိုးနဲ့ စရေးထဲက တခါတည်းရေးထားရင် ပိုကောင်းပါတယ်။ ရှင်းရှင်းလင်းလင်းနဲ့ပြတ်ပြတ်သားသားပေါ့..

ဒီ Blog မှာတော့ JavaScript Coding ရေးတဲ့နေရာမှာ Clean Code ဖြစ်စေမယ့် အချို့အချက်များကို ဆွေးနွေးသွားပါမယ်။ 

1. Variable ခံသင့်တဲ့နေရာ ခံပါ
---------------------------------------------------------------- 
- တချို့နေရာတွေမှာ ရေးတဲ့လူသာ နားလည်ပေမဲ့ တခြားလူကြည့်လိုက်ရင် ချက်ချင်းမသိမယ့် Code ပုံစံတွေရှိပါတယ်။
ဥပမာ.. 
if ( x > 3600){ } ဆိုကျပါတော့ 
3600 ဆိုတာကို ဒီအတိုင်းထည့်ထားတာထက်စာရင် အောက်ကပုံစံအတိုင်း variable လေးခံသုံးသင့်ပါတယ်။
const secondsOfAnHour = 3600;
if( x > secondsOfAnHour) { } ပေါ့ 
အဲ့လိုဆိုရင် ကြည့်ရတဲ့လူအနေနဲ့ ဒါ တစ်နာရီမှာရှိရမယ့် seconds ‌ဆိုတာမြင်တာနဲ့သဘောပေါက်မှာပါ။
မှတ်ချက်.. မလိုတဲ့နေရာမှာတော့ variable တွေလိုက်ခံနေစရာမလိုပါဘူး။

2. comments တွေမလိုရင် နေရာတိုင်းမထားပါနဲ့
---------------------------------------------------------------- 
အရင်တုန်းက ကိုယ်ရေးတဲ့ code ကို သူများနားလည်နိုင်ဖို့ ရှင်းပြတဲ့ comments တွေ ကျွန်တော်လဲရေးခဲ့ဖူးတယ်။ 
ဒီ code ကတော့ ဘာဘာညာညာဖြစ်ပါတယ်ပေါ့...  comments ရေးလိုက်ရင်ပဲ လှသလိုလို ဘာလိုလိုနဲ့။
ဒါပေမဲ့ Clean Code အကြောင်းဖတ်ကြည့်တော့ သူပြောတာက မလိုရင် မသုံးနဲ့တဲ့။
ပြောချင်တာက ကိုယ်ရေးတဲ့ code က standard ဖြစ်ပြီး ရှင်းလင်းနေရင် တစ်ဖက်လူနားလည်လွယ်တယ်ပေါ့ဗျာ။
အဲ့တာကြောင့် မလိုအပ်ပဲ comments တွေနေရာတကာမထည့်ပဲ ကိုယ်ရေးတဲ့ code ကိုပဲ simple and stupid ဖြစ်အောင်ရေးပါတဲ့။
မှတ်ချက်...လိုအပ်တဲ့နေရာမှာတော့ လိုအပ်သလို comments ကိုသုံးသင့်ပါတယ်။

3. Function ‌တစ်ခုတည်းမှာ အစုံလိုက် အပြုံလိုက်ရေးတာမျိုး ရှောင်ပါ
---------------------------------------------------------------- 
function တစ်ခုတည်းမှာ code တွေ ပွထနေအောင် ထည့်တာထက် break down လုပ်တာက မိမိ code ကို ပိုရှင်းစေပါတယ်။
မေးစရာရှိလာပါတယ်။ function ခွဲရေးလဲ ဒီcodeပဲ ရေးရမှာ‌... code က လျော့သွားတာမှ မဟုတ်တာလို့ မေးလို့ရပါတယ်။
code လျော့ဖို့အတွက် ရည်ရွယ်တာမဟုတ်ပဲ .. သူ့ meaning နဲ့သူ ..သူ့အလုပ်နဲ့သူ ခွဲပေးလိုက်တဲ့သဘောပါ။ နောက်တစ်ခုက code တွေ duplication ဖြစ်မှုကိုလဲ လျော့ချပေးပါတယ်။ ဖတ်ရတဲ့သူအဖို့လဲ code ကကျစ်လစ်မှုပိုရှိလာတဲ့အပြင် နားလည်ရတာပါ ပိုမြန်လာမှာပါ။

5. Code Reduce လုပ်ပါ
---------------------------------------------------------------- 
စရေးတဲ့အချိန်မှာတော့ လိုချင်တဲ့ result ထွက်အောင် အရင်ဦးတည်ရေးသင့်ပါတယ်။ ရေးပြီးတာနဲ့ ကိုယ်ရေးလိုက်တဲ့ code style ကို တခြားနည်းနဲ့ပြောင်းရင် ပိုပြီးကျစ်လစ်မှုရှိမလား ကြည့်ကြည့်ပေါ့ .. code ကို refactoring တစ်ခါတည်းလုပ်လို့အဆင်ပြေရင် ပိုကောင်းပါတယ်။

6. Standard Variable Name
---------------------------------------------------------------- 
JavaScript မှာ variable naming ပေးတဲ့နေရာမှာ camel case နဲ့အဓိကပေးတာများပါတယ်။ ဥပမာ.. getUserAccount ‌လိုမျိုးပေါ့..
နောက်တစ်ခုက constant ဖြစ်တဲ့ permanent value မျိုးကိုတော့ Snake Upper Case နဲ့ပေးကျပါတယ်။ 
အပေါ်က No. 1 တုန်းက const secondsOfAnHour = 3600; လို့ရေးထားတာတွေ့မှာပါ။ တစ်နာရီမှာ 3600 second က အမြဲမှန်ပါတယ်..ပြီးတော့ ပြောင်းလို့လဲမရတဲ့ တန်ဖိုးတစ်ခုပါ။ သူ့ကိုပေးထားတဲ့ variable name ကို အောက်ကလို ပြင်ရေးတာပိုမှန်ပါလိမ့်မယ်။
 const SECONDS_OF_AN_HOUR= 3600;

7. Variable မလိုအပ်ပဲ မသုံးပါနဲ့
----------------------------------------------------------
No.1 မှာတုန်းက code ကြည့်တဲ့လူ နားလည်ရလွယ်အောင် variable ခံသင့်တဲ့နေရာခံပါလို့ပြောခဲ့ပါတယ်။ တဆက်တည်းမှာလဲ အဲ့မှတ်ချက်မှာ မလိုအပ်ပဲ မသုံးပါနဲ့လို့ပြောခဲ့ပါတယ်။ သုံးသင့်တဲ့နေရာဆိုတာရှိသလို မသုံးသင့်တဲ့နေရာတွေလဲရှိပါတယ်.. ဒီအချက်ကိုတော့ အခုထိ ဒီစာကိုဖတ်နေတဲ့လူ စိတ်ဝင်စားရင် ကိုယ်ဘာသာရှာကြည့်စေချင်ပါတယ်... ကျွန်တော်ပြောလိုက်ရင် တစ်ဆက်တည်းသိသင့်တဲ့ တချို့အရာတွေကို မသိတော့မှာဆိုးလို့ပါ.. ကိုယ်ဘာသာရှာကြည့်ရင်း အဲ့တာနဲ့ ဆက်စပ်နေတာတွေပါသိသွားရင် ပိုကောင်းတာပေါ့။

Congratulations to reach this step !!  
ဒီblog လေးကနေ တစ်ခုခုအသုံးဝင်တာ သိသွားရင် အကျိုးရှိပါတယ်။
Clean Code အကြောင်းစိတ်ဝင်စားရင် google မှာရှာကြည့်လိုက်ပါ..စာအုပ်တွေမှာပဲ တစ်ခါထဲဖတ်ဖို့လဲ recommend ပေးပါတယ်..
ကျန်သေးတဲ့အချက်တွေကို နောက် blog တွေမှာ အခွင့်ကြုံရင် share ပေးသွားပါမယ်။

#ThuHtetTun
#DetailProjects
#JavaScript