Category: JavaScript/ES6

Destructuring assignment syntax

By Set Kyar Wa Lar 10 months ago
post image

ကျွန်တော်တို့ဒီနေ့ရေးသားမယ့် အကြောင်းအရာကတော့ Destructing assignment ဘဲဖြစ်ပါတယ်။ Destructuring assignment syntax က arrays value တွေ object property တွေကို distinct variables ဖြစ်အောင်ပြုလုပ်ပေးတဲ့ JavaScript expression တစ်ခုဖြစ်ပါတယ်။ ဘယ်လိုမျိုးလဲဆိုတာသိအောင် အောက်ဖော်ပြပါ codeblock ကိုတစ်ချက်ကြည့်လိုက်ရအောင်…

Destructuring Objects

const me = {
    name: 'Set Kyar Wa Lar',
    twitter: '@setkyarwalar',
    github: '@setkyar',
}

//Old way
// const name = me.name;
// const twitter = me.twitter;
// const github = me.github;

const { name, twitter, github } = me;

အထက်ဖော်ပြပါ code မှာ me ဆိုတဲ့ object ထဲမှာ name, twitter, github ဆိုတဲ့ project property တွေကို distinct variables ဖြစ်အောင် Old way ဆိုတဲ့ comment ပေးထားတဲ့ code လိုကျွန်တော်တို့အရင်က ရေးကပါတယ်။ ES6 Destructuring assignment syntax နဲ့ဆိုရင် const { name, twitter, github } = me; ဆိုပြီးရေးလိုက်တာနဲ့ name, twitter, github ဆိုတဲ့ distinct variables သုံးခုရသွားပါတယ်။

အထက်မှာဖော်ပြခဲ့တဲ့ object ကနမူနာပြမှာဖြစ်တဲ့အတွက် object property တွေကို ကျွန်တော်ကြိုက်တဲ့ အမည်ပေးခဲ့လို့ ပြဿနာမရှိပေမယ့် ကျွန်တော်တို့ကိုယ်တိုင် စိတ်တိုင်းကျရေးသားထားတဲ့ api တွေမဟုတ်တဲ့ api လိုမျိုးမှာဆိုရင် ကျွန်တော်တို့ name ကို writer_name ဆိုပြီးပြောင်းချင်ခဲ့မယ်ဆိုရင် အောက်ဖော်ပြပါ code block နမူနာလိုပြောင်းလို့ရပါတယ်…

const { name: writer_name } = me;

အခုဆို ကျွန်တော်တို့ writer_name ဆိုပြီး 'Set Kyar Wa Lar' ကို access လုပ်လို့ရပါပြီ။

နောက်တစ်ခုက nested data တွေဆို ဘယ်လို destructuring လုပ်မလဲဆိုတာ တစ်ချက်ပြောပြမှာဖြစ်ပါတယ်။ အောက်ဖော်ပြပါ နမူနာ nested object code block ကိုကြည့်လိုက်အောင်…

const profile = {
    name: 'Set Kyar Wa Lar',
    age: 23,
    links: {
        'blogs': {
            phpmm: 'https://www.phpmyanmar.org',
            setkyar: 'http://setkyar.com'
        }
    }
}

const { phpmm } = profile.links.blogs

အထက်ဖော်ပြပါ code မှာဆိုရင် ကျွန်တော်တို့ profile ထဲက links ထဲက blogs ထဲက phpmmကို destructuring လုပ်ဖို့ဆိုရင် profile.links.blogs ဆိုပြီး destructuring လုပ်ရပါတယ်။

နောက်ဆုံးတစ်ခုအနေနဲ့ destructuring လုပ်တဲ့အချိန်မှာ value မပါတာတွေအတွက် default value/fallback value ဘယ်လိုပေးမလိုဆိုတာကို အောက်ဖော်ပြပါ code block မှာတစ်ချက်လေ့လာလိုက်ကြရအောင်…

const average_boy_measurement = { weight: 120, height: "5' 8\"" };
const { weight=120, height="5' 8\"", age=18} = average_boy_measurement;

ပထမဆုံး line မှာ average_boy_measurement code block မှာ weight, height ဆိုပြီး property နှစ်ခုဘဲပါတယ်။ ကျွန်တော်တို့ average_boy_measurement ကို Destructuring လုပ်တဲ့အချိန်မှာ age ပါထည့်ထားပါတယ်။ ပြီးရင် age=18 ဆိုပြီးလည်း assign လုပ်ထားပါတယ်။ ဒါကဘာကိုပြောတာလဲဆိုတော့ average_boy_measurement ကို destructuring လုပ်တဲ့အချိန်မှာ age မပါလာဘူးဆိုရင် default value ဖြစ်တဲ့ 18 ကို age အဖြစ် set လိုက်မယ်ဆိုတာပါဘဲ။ အလားတူဘဲ weight, height တို့မပါလာဘူးဆိုရင် ကျွန်တော်တို့ default set လုပ်ထားတဲ့ values တွေရမှာဖြစ်ပါတယ်။

ဒီနေ့ article ကတော့ ဒီလောက်ပါပဲ။ နောက် article တွေမှာဆက်လတ်လေ့လာလိုက်ကြရအောင်။

I am Set Kyar Wa Lar
Follow me on Github or Twitter

Set Kyar Wa Lar
Set Kyar Wa Lar

About Author Section! Coming soon :)