Object Literals

Object

Object တစ်ခုဆိုတာ properties တွေကိုစုထားတဲ့ collection တစ်ခုဖြစ်ပါတယ်။ အဲ့ဒီ property တစ်ခုခြင်းစီမှာ name (or key) နဲ့ value ဆိုပြီး ရှိပါတယ် ။ အဲ့ဒီ value က number,string, array , function ( object ထဲက function ကို method လို့ခေါ်ပါတယ်) တွေဖြစ်နိုင်ပါတယ်။ လက်တွေ့ ဥပမာတစ်ခုနဲ့ နှိုင်းယှဥ်ကြည့်ကြပါစို့ ။ car တစ်စီးရှိတယ်ဆိုပါစို့။ car က object တစ်ခုဆိုပါစို့ ။ သူ့ရဲ့ color ၊ သူ့ရဲ့model ၊ သူရဲ့ price ဒါတွေဟာသူ့ရဲ့ properties တွေပါ။

Object တစ်ခုတည်ဆောက်ခြင်း

myLaptop ဆိုတဲ့ object တစ်ခုတည်ဆောက်ပါမယ်။ သူရဲ့ properties name တွေကို color ရယ် model ရယ် os ရယ်ရှိတယ်ဆိုပါစို့။

    Example

    let myLaptop = new Object();
   myLaptop.color = 'black';
   myLaptop.model= 'dell';
   myLaptop.os = "windows";
    
   console.log(myLaptop.model);//dell 
      

ဒီလိုဆို myLaptop ဆိုတဲ့ object တစ်ခုတည်ဆောက်ပြီးပါပြီ။ သူ့ရဲ့ properties တွေကို dot notation ရဲ့ရေးထားပါတယ်။ အရင်ဆုံး object name နောက် ၎င်းရဲ့ property name ပြီးတော့ properties ရဲ့ value ပါ။ အဲ့ဒီ object ရဲ properties တွေကို ပြန်ခေါ်သုံးချင်တယ်ဆိုရင် Objectname ပြီးတော့ သူ့နောက်မှာ ပြန်ခေါ်သုံးချင်တဲ့ property name (or key) လိုက်ပါတယ်။ အဲ့ဒါကြောင့် myLaptop.model လို့ပြန်ခေါ်လိုက်တဲ့အခါ black ဆိုပြီးထွက်လာပါတယ်။ ဒါကအရင်တုန်းက JavaScript Object ဆောက်ရင်သုံးတဲ့ပုံစံပါ။ object ကိုနောက်တစ်မျိုးဆောက်လို့ရပါတယ်။

    Example

    let myLaptop = new Object();
    myLaptop['color'] = 'black';
    myLaptop['model']= 'dell';
    myLaptop['os'] = "windows";
     
    console.log(myLaptop.os); // windows    

ဒါက square bracket notation နဲ့ object တည်ဆောက်ခြင်းဖြစ်ပါတယ်။ objectname နောက်မှာ square bracket လိုက်ပြီးသူ့ထဲမှာ properties name တွေကို string ပုံစံနဲ့ single quotes or double quotes နဲ့ရေးပါတယ်။ user ရဲ့ property တွေကို ပြန်သုံးချင်တဲ့အခါ အပေါ် က လိုပဲ object name ပြီးတော့ ခေါ်သုံးချင်တဲ့ property’s name ပါ။အဲ့ဒါဆို properties ရဲ့ value တွေရပါပြီ။ Object ကို ယခုအခါမှာ object literals ပုံစံနဲ့အသုံးများလာပါတယ်။ object literals ဆိုတာ names(keys) values အတွဲလိုက် ထည့်သွင်းထာတဲ့ပုံစံကိုဆိုလိုတာပါ။

    Example 

    let user = {
        name :"mg mg",
        email : "mgmg123@gmail.com",
        age :21,
        married:false,
        location: "yangon",
        family:["U Ba","Daw Mya","Hla Hla"]
    }
    console.log(user.name,user.age);// mgmg , 21    

ဒီမှာဆိုရင် user ဆိုတဲ့ object လေးတစ်ခုရှိပါတယ်။ user ရဲ့ properties တွေကို curly braces( {} ) ထဲမှာရေးပါတယ်။ properties(property name and value) တစ်ခုပြီးတိုင်းမှာ ‘,’ ခံ ပါတယ်။ နောက်ဆုံး property နောက်မှာတော့ comma ‘,’ မခံရပါဘူး။ user ရဲ့ property တွေကို ပြန်သုံးချင်ရင် အပေါ် က လိုပဲ object name ပြီးတော့ ခေါ်သုံးချင်တဲ့ property’s name ပါ။အဲ့ဒါဆို properties ရဲ့ value တွေရပါပြီ။

Object Method

object တစ်ခုအတွင်းမှာ function တွေလည်း ထည့်လို့ရပါတယ်။ object ထဲမှာရှိတဲ့ function ကို အဲ့ဒီ object ရဲ့ method တွေဖြစ်ပါတယ် ။

    Example 

    // ES5 code
    var operator = {
      sum:  function(a, b) { return a + b; },
      mult: function(a, b) { return a * b; }
    };
    
    console.log( operator.sum(2, 5) );  //7 
    console.log( operator.mult(2, 5) ); //10

ဒီမှာဆိုရင် operator ဆိုတဲ့ object တစ်ခုရှိမယ်။ အဲ့ဒီ object မှာ sum()နဲ့ mult() ဆိုတဲ့ methods တွေရှိပါတယ်။ အဲ့ဒီ method တွေကိုပြန်ခေါ်သုံးချင်ရင် ပုံမှန်တိုင်း objectname ပြီးတော့သုံချင်တဲ့methodကို function statement အတိုင်း name ပြီးတော့ parenthesis ()လိုက်ပါတယ် ။ sum method မှာကော mult method မှာကော parameter နှစ်ခုတောင်းထားလို့ method တွေကိုပြန်သုံးတဲ့အခါ parameter တွေထည့်လိုက်ပါတယ်။ အဲ့ဒါကြောင့် sum method ကိုသုံးတဲ့အခါ 7 ရပြီး mult method ကိုသုံးတဲ့အခါ 10 ရပါတယ်။ ဒါကကျနော်တို့ အရင် ES5 တုန်းက‌ရေးတဲ့ပုံစံပါ။ ES6 နဲ့ရေးရင် ပိုတိုသွားပါတယ်။ပိုရှင်းသွားပါတယ်။

    Example 

    // ES6 code
    const operator = {
      sum(a, b) { return a + b; },
      mult(a, b) { return a * b; }
    };
    
    console.log( operator.sum(2, 5) );  //7 
    console.log( operator.mult(2, 5) ); //10

ဒီမှာဆို function ဆိုတဲ့ keyword မလိုတော့ဘူး။ sum နဲ့ mult က method ပုံစံ ကျပါတယ်။ output ကလည်းအတူတူပါပဲ။ ဒါကို fat arrow function(=>) syntax နဲ့ ပြန်ပြင်ရေးကြည့်ပါမယ်။

    // ES6 code
    const operator = {
      sum: (a, b) => a + b,
      mult:(a, b) => a * b
    };
    
    console.log( operator.sum(2, 5) );  //7 
    console.log( operator.mult(2, 5) ); //10    

ဒီလိုဆိုရင် ရေးရတာလည်းနည်းပါတယ်။ code လည်း ပိုရှင်းသွားပါတယ်။