Higher-order functions in JavaScript (Part-1)

1460 views Dec 22, 2024

Hello guys!

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

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

Example လေးတွေနဲ့ ကျွန်တော်တို့သွားကြည့်ရအောင်..

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

အပေါ်က codeရဲ့ရေးသားပုံက numbers ဆိုတဲ့ array တစ်ခုကို for loop ပတ်ပြီး array value တွေကို ထုတ်ထားတာပါ။ ဒီလိုပုံစံကို higher-order function တစ်ခုဖြစ်တဲ့ foreach နဲ့အသုံးပြုပြီးလဲ အခုလိုအောက်ကအတိုင်းထုတ်လို့ရပါတယ်။

numbers.forEach(function(num){
 console.log(num);
});

အပေါ်က codeကတော့ JavaScript ရဲ့ built-in higher-order function တစ်ခုဖြစ်တဲ့ forEach ကိုအသုံးပြုပြီးရေးထားတာပါ။ for loop နဲ့ တူညီတဲ့ result ပဲ ထွက်မှာဖြစ်တဲ့အပြင် code လဲအရမ်းမရှည်တော့ပါဘူး။ code ကို ထပ်ပြီး reduce လုပ်ချင်ရင် ES6 syntax တွေဖြစ်တဲ့ arrow functions, template strings စတာတွေနဲ့ မွမ်းမံလို့လဲရပါတယ်။ တစ်ချက်ရေးကြည့်ရအောင်..

numbers.forEach(num => console.log(num));

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

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

let newArray = [];
for(let i=0; i<numbers.length; i++){
 if(numbers[i] === 3){
    newArray.push(numbers[i]);
  }
}
console.log(newArray);

ဒီ code example မှာတော့ numbers array ထဲက number 3 value ကိုသာရွေးထုတ်ပြီး အသစ်ဆောက်ထားတဲ့ newArray ဆိုတဲ့ array ထဲကိုထည့်ထားပါတယ်။ ‌code အရ အလုပ်လုပ်တယ်..ဒါပေမဲ့ ကျွန်တော်တို့က ဒီအဖြေကိုရဖို့ပဲ Higher-order function တစ်ခုဖြစ်တဲ့ filter function ကိုအသုံးပြုသွားပါမယ်။

let newArray = numbers.filter(function(num){
 if(num === 3) return true;
});
console.log(newArray);

အပေါ်ကcodeရေးသားပုံကတော့ built-in higher-order function ဖြစ်တဲ့ filter ကိုအသုံးပြုထားပါတယ်။ ထူးခြားတာက filter function က return true or false ပြန်ပေးပြီး true value ကို new filtered array တစ်ခုထဲထည့်ပြီးပြန်ထုတ်ပေးတာပါပဲ။ အပေါ်က code အရ number 3 ဖြစ်တဲ့နံပါတ်ဖြစ်ရင် သူ့ကို filtered array အသစ်တစ်ခုထဲထည့်ပေးထားလိုက်တာပါပဲ။ အားသာချက်ကတော့ array ကို filter လုပ်ဖို့ဖန်တီးပေးထားတဲ့အပေါ်အသုံးပြုထားတာဖြစ်လို့ မိမိရေးသားတဲ့ code ရည်ရွယ်ချက်နဲ့ကျစ်လစ်မှုကိုပေါ်လွင်စေမှာလဲဖြစ်ပါတယ်။

JavaScript ES6 syntax ကိုအသုံးပြုပြီး filter ကို ပြန်ပြင်ရေးကြည့်မယ်။

let newArray = numbers.filter(num => num === 3 );
console.log(newArray);

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

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

#DetailProjects
#JavaScript
#ThuHtetTun