Closures

Closure ဆိုတာ JavaScript ရဲ့ feature တစ်ခုဖြစ်ပြီး inner function ကနေ outer function ရဲ့ variable ကို လက်ခံတဲ့ scope chain တစ်ခုဖြစ်ပါတယ်။ Closure မှာ scope chains သုံးခုရှိပါတယ်။ ပထမအချက်က သူကိုယ်တိုင်(inner function) က သူ့ရဲ့ own scope အတွင်းမှာ ကြေညာထားတဲ့ variables ကိုလည်း access လုပ်နိုင်ပါတယ် ။ ဒုတိယ အချက်က အပြင်(outer function) က variables တွေကိုလည်း access လုပ်နိုင်ပါတယ်။ တတိယ အချက်က global variables တွေကိုလည်း access လုပ်နိုင်ပါတယ်။

Example 
function outer() {
 
 var b = 10;
 function inner() {
  
  var a = 20;
  console.log(a+b);
 }
 return inner;
}
    

ဒီမှာဆို ရင် function နှစ်ခုရှိပါတယ်။ အပြင်ဖက် function ဖြစ်တဲ့ outer function မှာ variable b ရှိ ပြီးတော့ inner function ကို return ပြန်ထားပါတယ် ။ အတွင်းဖက် function ဖြစ်တဲ့ inner function မှာ variable a ရှိ ပြီးတော့ အပြင်ဖက် function ဖြစ်တဲ့ outer function ရဲ့ variable b ကို သူ့ရဲ့ scope ထဲမှာ access လုပ်ထားပါတယ် ။ variable b ကို outer function ထဲမှာ ပဲ သတ်မှတ်ပြီး variable a ကို inner function ထဲမှာပဲ သတ်မှတ်ထားပါတယ်။ outer function ကို invoke လုပ်ဖို့ အတွက် ပထမတစ်ကြိမ် variable x ထဲမှာ သိမ်းထာလိုက်ပါတယ် ။ ဒုတိယအကြိမ် variable y ထဲမှာ တစ်ခါ ထပ်သိမ်းထာပါမယ်။

function outer() {

     var b = 10;
      function inner() {
                 
         var a = 20; 
         console.log(a+b);
      }
            return inner;
}
var X = outer(); //outer() invoked the first time
var Y = outer(); //outer() invoked the second time
         
    

outer() ကို ပထမဆုံး invoked လုပ်လိုက်တဲ့ အခါ variable b ကို create လုပ်လိုက်ပြီး outer() ထဲမှာ ပဲထားပြီး value ကို 10 ပေးထားပါတယ်။ နောက်တစ်ကြောင်းက function တစ်ခုကို declaration ပဲ လုပ်တဲ့အတွက် execute မလုပ်သေးပါဘူး ။ နောက်ဆုံး တစ်ကြောင်းမှာတော့ inner ဆိုတဲ့ variable ကို return ပြန်ထားပါတယ် ။ ဒါပေမဲ့ inner က function တစ်ခုပါ ။ ဒါကြောင့် return inner ဆိုတာက inner function တစ်ခုလုံးကို return ပြန်ထားတယ်လို့ဆိုလိုတာပါ။ Note: ဒီမှာ သတိပြုရမဲ့အချက် က inner function ကို return ပြန်တဲ့ အခါ inner လို့ပဲ ပြန်ထားပါတယ် ။ ဘာကြောင့်လဲဆိုတော့ function ကို execute လုပ်ချင်တဲ့ အခါမှသာ နောက်က () လိုက်ပေးရပါတယ်။ နောက်တစ်ချက်အနေနဲ့ ‌return ပြန်တဲ့ statement ကို x variable ထဲမှာ store လုပ်လိုက်ပါတယ် ။ x က အောက်ပါအတိုင်း store လုပ်လိုက်ပါတယ်။

         
function inner() {
    var a=20;
    console.log(a+b);
}
    
    

outer() function execute ဖြစ်သွားတဲ့အခါမှာ outer() function အတွင်းမှာ ရှိတဲ့ variable တွေ အကုန် မရှိတော့ပါဘူး။ variable တစ်ခုရဲ့ သက်တမ်းက function execution ဖြစ်သွားတဲ့အချိန်ထိရှိပါတယ်။ ပြီးရင် သက်တမ်းကုန် ပျောက်သွားပါတယ် ။ သ‌ဘောက console.log(a+b) မှာဆိုရင် variable b က outer() function execute လုပ်နေစဉ်အတောအတွင်းပဲရှိပါတယ် ။ outer() function execution ဖြစ်သွားတဲ့အခါ variable b လည်းမရှိတော့ ပါဘူး ။ function ကို ဒုတိယ အကြိမ် ခေါ်တဲ့အခါမှာ function ထဲက variables တွေကို create ပြန်လုပ်ပြီး function execution မဖြစ်ခင်အထိ ပြန်တည်ရှိနေပါတယ်။ နောက်တစ်ခါ outer() function ကို invoke လုပ်တဲ့အခါ အပေါ် ၅ ချက်လုံး ပြန်ဖစ်သွားပါတယ်။ အဲ့ဒီလို outer() function ကို ဒုတိယအကြိမ် invoke လုပ်တဲအခါ သတိထားရမည့်အချက်က variable b ကို အသစ်ဖန်တီးလိုက်ပါတယ်။ outer() function ကို ဒုတိယအကြိမ် execution ဖြစ်တဲ့အခါ vairable b အသစ်ကလည်း ပြန်ပျောက်သွားပါတယ် ။ outer() function က function ကိုပဲ return ပြန်ထားလို့ variable တွေ ဖြစ်တဲ့ x နဲ့ y ကလည်း function တွေဖြစ်ပါတယ် ။ function ဖြစ်မဖြစ်ကို ဒီလို အလွယ်တစ်ကူစမ်းလို့ရပါတယ်။

console.log(typeof(X)); //X is of type function
console.log(typeof(Y)); //Y is of type function

    

variable x နဲ့ y က function တွေဖြစ်တဲ့အတွက်ကြောင့် သူတို့ကို execute လုပ်လို့ရပါတယ် ။ JavaScript မှာ ဆိုရင် function တစ်ခု execute ဖြစ်ချင်တဲ့အခါ function name ပေးပြီး နောက်ကနေ () လိုက်ရပါတယ် ။ဥပမာ x() နဲ့ y()

        function outer(){

            var b = 10;
                function inner(){
                
                    var a = 20;
                    console.log(a+b);
                }
                return inner;
            }
            
            var X = outer();
            var Y = outer();
            //end of outer() function executions
            
            X(); // X() invoked the first time
            X(); // X() invoked the second time
            x(); // X() invoked the third time
            
            Y(); // Y() invoked the first time 
            
    

ဒီမှာဆိုရင် x() နဲ့ y() ကို execution လုပ်လိုက်တဲ့အခါ inner() function ပါ execute ဖြစ်သွားတယ်ဆိုတာကို သိရပါမယ် ။ x() function execution ဖြစ်ပုံကို step by step ကြည့်မယ်ဆိုရင် variable a ကို create လုပ်ပြီး value 20 လို့ထားပါတယ် ။ ဒုတိယအချက်အနေနဲ့ JavaScript က a + b လုပ်နေပါပြီ။ ဒီမှာ စိတ်ဝင်စားဖို့ကောင်းတာက variable b ရှိရှိ မရှိရှိ variable a ကို create လုပ်ပြီးကြောင်းသိပါတယ် ။ variable b ရှိရှိ မရှိရှိဆိုတာက varible b က x() လို့ invoked မလုပ်မှီ outer() function executing ဖြစ်နေစဥ်အတောအတွင်းပဲရှိပြီး outer() function execution ဖြစ်သွားတဲ့အခါ variable b မရှိတော့ပါဘူး။ အဲဒီမှာ Jav‌aScript က closures ကို ဘယ်လို handle လုပ်သလဲ ။