Hello guys!

ဒီblogလေးမှာ JavaScript ရဲ့ Higher-order functions တွေအကြောင်းကို Part-2 အနေနဲ့ ဆွေးနွေးသွားမှာ ဖြစ်ပါတယ်။

ပြီးခဲ့တဲ့ part-1 တုန်းကလိုပဲ ကျွန်တော်တို့ ရိုးရိုးသုံးနေကျ codeရေးသားပုံစံနဲ့ higher-order functions တွေအသုံးပြုပြီးရေးပုံနဲ့ ကွာခြားပုံကို အဓိကထားပြီးနားလည်လွယ်ကူအောင် ဆွေးနွေးသွားပါမယ်။

ဒီအပတ်မှာတော့ map နဲ့ reduce အကြောင်းကို Example လေးတွေနဲ့ ကျွန်တော်တို့သွားကြည့်ရအောင်..

အရင်ဆုံး higher-order function မပါတဲ့ code ပုံစံရေးပါမယ်။

let numbers = [1,2,3,4,5];
let newArray = [];
for(let i=0; i<numbers.length; i++){
 newArray.push(numbers[i] * 2);
}
console.log(newArray);
// output: [2, 4, 6, 8, 10]

အပေါ်က codeရဲ့ရေးသားပုံအရ အရင်ဆုံး numbers ဆိုတဲ့ array တစ်ခုကို for loop ပတ်ထားတယ်။ ပြီးတော့ numbers[i] ဆိုပြီး array value ကိုယူလိုက်တယ်။ အဲ့ value ကို 2 နဲ့မြှောက်ပြီး newArray ဆိုတဲ့ array အလွတ်ထဲကို တစ်ခုချင်း ထည့်ထားတာကိုမြင်ရမှာပါ။ result အနေနဲ့ newArray ကို printပြန်ထုတ်ကြည့်တာမှာ numbers array ကို 2 နဲ့မြှောက်လို့ရတဲ့ တန်ဖိုးတွေပြန်ထွက်လာမှာ တွေ့ရမှာပါ။

ခြုံပြောရမယ်ဆိုရင် array တစ်ခုကနေ တန်ဖိုးကို လိုအပ်သလို calculate လုပ်ပြီး array အသစ်တစ်ခုထဲကို ရွေ့လိုက်တာပေါ့.. ဒါကို higher-order function တစ်ခုဖြစ်တဲ့ map() ကိုသုံးပြီးရေးကြည့်ကြမယ်။

let numbers = [1,2,3,4,5];
let newArray = numbers.map(function(num) {
 return num * 2;
});
console.log(newArray);
// output: [2, 4, 6, 8, 10]

အပေါ်က code အရ map ရဲ့လုပ်ဆောင်မှုကို နှိုင်းယှဥ်ကြည့်လို့ရပါတယ်။ numbers array ထဲက တန်ဖိုးတစ်ခုချင်းဆီကို calculation လုပ်ပြီး return ပြန်ခြင်းဖြင့် တန်ဖိုးအသစ်တွေနဲ့ newArray ဆိုတဲ့ array အသစ်ကို ဖြစ်‌စေခဲ့တာပါ။ map() ရဲ့သဘောတရားကလဲ အဲ့တာပါပဲ။ ဘယ်လိုရေးရေး အဖြေတူပေမဲ့ map() ကိုသုံးခြင်းဖြင့် မိမိရေးသားတဲ့ code ကျစ်လစ်မှုကိုပေါ်လွင်စေမှာလဲဖြစ်ပါတယ်။

code ကို ပိုကျစ်လစ်အောင်  ES6 syntax တစ်ခုဖြစ်တဲ့ arrow function syntax နဲ့အခုလိုရေးလို့ရပါတယ်။

let numbers  = [1,2,3,4,5];
let newArray = numbers.map(num => num * 2);
console.log(newArray);
// output: [2, 4, 6, 8, 10]

အပေါ်ကလို ရှင်းလင်းတဲ့ code နဲ့ တူညီတဲ့အဖြေကိုရတာ တွေ့ရမှာပါ။

အဲ့တာဆို နောက် Higher-order function တစ်ခုဖြစ်တဲ့ reduce() ကိုဆက်သွားပါမယ်။

reduce() မသုံးပဲ ရိုးရိုး code example အရင်‌ရေးကြည့်မယ်။

let numbers = [1,2,3,4,5];
let total  = 0;
for(let i=0; i<numbers.length; i++){
  total += numbers[i];
}
console.log(total);
// output: 15

အပေါ်က code အရ total ဆိုတဲ့ variable ကို တန်ဖိုး 0 နဲ့ assign လုပ်ထားတာ တွေ့ရမှာပါ။ နောက်ပြီး numbers ဆိုတဲ့ array တန်ဖိုးတွေကို for loop ပတ်ပြီး တစ်ခုချင်းကို total variable ထဲ ပေါင်းထည့်ထားတဲ့ပုံစံမျိုးပါ။ looping ပြီးနောက် total variable ကို print ထုတ်ကြည့်ချိန်မှာ numbers array ထဲက value တွေနဲ့ စုစုပေါင်း ပေါင်းလဒ်ကို တွေ့ရမှာဖြစ်ပါတယ်။ ရှင်းရှင်းပြောရရင် array value တွေရဲ့ ပေါင်းလဒ်ကို ထုတ်ပေးတဲ့ code example ဖြစ်ပါတယ်။

reduce() သည်လည်း ပေးထားတဲ့ array ကိုလက်ခံပြီး single output value ကိုထုတ်ပေးတဲ့ပုံစံမျိုးပါ။ code ကိုအရင်ရေးကြည့်လိုက်ရင် ပိုရှင်းပါလိမ့်မယ်။

let numbers = [1,2,3,4,5];
let total = numbers.reduce(function (accumulator, num) {
 return accumulator + num;
});
console.log(total);
// output: 15

reduce() method သည် parameter နှစ်မျိုးကိုလက်ခံထားတာတွေ့ရပါမယ်။ ပထမတစ်ခုက reducer function (callback) နဲ့ နောက်တစ်ခုက initialValue ပါ။ initialValue ကတော့ optional အနေနဲ့ ထည့်ချင်လဲရတယ် မထည့်ချင်လဲရပါတယ်။
ကျွန်တော်တို့ reduce() ထဲက accumulator parameter နဲ့ num parameter တို့ကို reducer function (callback) ထဲမှာပါပါတယ်။ accumulator parameter က ပေါင်းလဒ်ရလဒ်တွေကို ထပ်တိုးသိမ်းပေးပြီး num ကတော့ numbers array ရဲ့ element တွေကို ထုတ်ပေးတာပါ။

initialValue ကတော့ code example ထဲမပါပါဘူး။ သူက accumulator စတဲ့ calculate လုပ်ချင်တဲ့ စမှတ်ကို ထည့်ပေးရတဲ့ parameter တစ်မျိုးပါ။ initialValue ထည့်ပြီး ရေးကြည့်ရအောင်..

let numbers = [1,2,3,4,5];
let initialValue = 0;
let total = numbers.reduce(function (accumulator, num) {
 return accumulator + num;
},initialValue);
console.log(total);
// output: 15

အပေါ်က code example ကိုကြည့်ရင် ပိုသဘောပေါက်လွယ်မယ်ထင်ပါတယ်။

code ကို ES6 syntax နဲ့ reduce လုပ်ပါမယ်။

let total = numbers.reduce((accumulator,num) => accumulator + num, 0);

အခုလိုတူညီတဲ့အဖြေကို code အနည်းငယ်နဲ့ ကျစ်လစ်စွာရရှိမှာပါ။

Congratulations!
ဒီနေ့အတွက် JavaScript Higher-order functions ထဲက map နဲ့ reduce တို့ကို ‌ကျွန်တော်တို့ဆွေးနွေးခဲ့ပါတယ်။ နောက်blogမှာလဲ JavaScript coding တွေအကြောင်းဆက်လက်ဆွေးနွေးသွားပါတယ်။ ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။

#DetailProjects
#JavaScript
#ThuHtetTun