Arrow Function

Arrow Function Syntax

Arrow function က ES6 မှာ ပါလာတဲ့ features တွေထဲက popular အဖြစ်ဆုံးတစ်ခုပါ ။ သူ့ကို fat arrow function လို့လည်းခေါ်ပါတယ်။ regular function(function expression) ရဲ့ syntax အရဆိုရင် function ဆိုတဲ့ keyword ပါမယ် သူ့နောက်မှာ parameters တွေကို parenthesis() ထဲ ရေးပြီး {} ထဲမှာ statements တွေရေးပါတယ်။

Example 

const  name = function(parameters){
 statements
}

const square = function(num){
 return num*num;
}
    

ဒီမှာဆိုရင် anonymous function တစ်ခုကို square ဆိုတဲ့ variable ထဲထည့်ထားတယ် ။ ပြီးတော့ အဲ့ဒီ function က num ဆိုပြီး parameter တစ်ခုယူတယ် ။ ပြီးတော့ return num * num ဆိုပြီးတော့ statement တစ်ခုရှိတယ်။

square(3);//9
    

square() ကို parameter ထည့်ပြီး Invoke လုပ်လိုက်ရင် 9 ရပါလိမ့်မယ် ။ Arrow function က function expression နဲ့ နဲနဲဆင်တူပါတယ် ။ ဒါပေမဲ့သူက ရေးရတာ ပိုတိုပါတယ်။ arrow function ရဲ့ syntax က () နဲ့ parameters ပါမယ် ပြီး‌တော့ =>(arrow) လိုက်မယ် ။ ပြီးတော့ statements လိုက်ပါတယ် ။

    Syntax: 
    const name = (parameters) => {
        Statements
    }    

အပေါ်က square function ကို arrow function ပုံစံနဲ့ပြန်ရေးကြည့်ပါမယ် ။

    const square = (num) => {
        return num * num;
    }    

Function expression နဲ့ arrow function ပြန် နှိုင်းယှဉ် ကြည့်တဲအခါ ကွဲပြားနေတာ တွေ့ရပါလိမ့်မယ် ။

    // Function Expression
    const squareExp = function(num){
        return num * num ;
    }
    
    //Arrow Function 
    const  squareArr = (num) => {
        return num * num;
    }    

Function keyword အစာ =>(arrow) ကို အသုံးပြုလိုက်ပါတယ် ။ သူတို့ ကို invoke လုပ်ပြီး ရင် output ကအတူတူပဲထွက်ပါလိမ့်မယ်။

    squareExp(3); // 9

    squareArr(3); //9     

ဒီမှာ မေးစရာတစ်ခုရှိပါတယ် ။ အလုပ်လုပ်ပုံခြင်းလည်းတူတယ် ။ same output လည်းရတယ် ။ ဒါဆို ဘာလို့arrow function( =>) ကို အသုံးပြုမလဲ ။ Arrow function (=>) ကို အသုံးပြုခြင်းအားဖြင့် function ကို shorten ပုံစံရေးလို့ရပါတယ် ။ ဥပမာ အပေါ် က square() function ကို

const square = num => num*num; 

ဆိုပြီးရေးလို့ရပါတယ် ။ same output ပဲထွက်ပါလိမ့်မယ်။ ဒီမှာဆို ရှုပ်သွားနိုင်ပါတယ် ။

    const square = (num) =>{
        return num * num ;
    }
    
    // Is the same as
    const square = num => num * num;     

နဲ့ အတူပါပဲ ။ ဒီ arrow function ကို ပြန်ရှင်းမယ်ဆိုရင် အကယ်၍ Arrow function က parameters မပါဘူးဆိုရင် parenthesis () ထဲမှာ ဘားမှမထည့်ပဲ အလွတ်တိုင်းပြန်ရေးပါတယ် ။

() => { statements }

အကယ်၍ parameter တစ်ခုပါခဲ့ရင် parenthesis() ကို ဖြုတ်ထားခဲ့လို့ရပါတယ် ။

parameter => { statements }

အကယ်၍ parameters နစ်ခုနှစ်ခုထက်ပိုခဲ့ရင် parenthesis() ထဲမှာ ‘,’ ခံပြီးရေးပါတယ် ။

    (parameter1,parameter2,....) => { statements } 

အဲ့ဒါကြောင့် အပေါ်က arrow function ကိုပြန်ကြည့်မယ် ဆိုရင်

    const square = (num) =>{
        return num * num ;
    }    

က

    // Is the same as
    const square = num => num * num;

နဲ့အတူတူပါပဲ။ ဒီမှာဆိုရင် နောက်ထပ် မှတ်စရာတစ်ခုက အကယ်၍ arrow function က (single line code) ကုတ်တစ်ကြောင်းထဲကိုပဲ return ပြန်ရမည်ဆိုလျှင် brackets {} နဲ့ return keyword တို့ကို ချန်ထားခဲ့လို့ ရပါတယ် ။ အလုပ်လုပ်ပုံခြင်းကတူတူပါပဲ ။ Function expression ကို shorten ပုံစံနဲ့ပြန်ပြရမယ်ဆိုလျှင်

    let name = function(parameters){
        return expression
      }
      
      Is shortened to:
      let name = (parameters) => expression      

ဒီလိုဖြစ်ပါလိမ့်မယ်။ အောက်ပါ function expression တွေကို ARROW FUNCTION ပုံစံနဲ့ ပြန်ပြောင်း ‌ရေးပေးခဲ့ပါအုံးဗျ။

    1.
    const add3 = function(num1, num2, num3){
      return num1 + num2 + num3;
    }
    
    2.
    const double = function(num){
      return num * 2;
    }
    
    3.
    const sayHi = function(){
      console.log('Hi');
    }
    
    4.
    const square = function(num){
      return num ** 2;
    }