JavaScript in Nutshell: The Core

Spread Operator

JavaScript မှာ လူသုံးများတဲ့ Operator ပါ။ တော်တော်လေးလည်းမိုက်တယ်။ သူက Iterable Interface ထုတ်ပေးထားတဲ့ကောင်တွေကို Spread ချင်တဲ့အခါမျိုးမှာသုံးလို့ရတယ်။ လူသိများတာက Array လို Object လိုကောင်တွေပေါ့။

const user = {
    name: "Mg Mg",
    age: 18,
}

User ကို Job ထပ်ထည့်ချင်တယ်။ ဒါပေမဲ့ Indexer နဲ့မသွားချင်ဘူး၊ မူရင်း State ကို Mutate မလုပ်ချင်ရင်ဒီလိုသုံးလို့ရတယ်။

const profile = {
    job: "Full Stack Developer",
    ...user
}

ဒါဆိုရင် profile ကို job Append လုပ်ပြီးသားဖြစ်သလို Original object ကို Mutate တာကနေလည်းရှောင်လို့ရတယ်။ Side Effect တွေကိုပြောတာ။ State ကို Update ချင်ရင်လည်းသုံးလို့ရတယ်။

const updatedProfile = {
    ...profile,
    age: 19
}

ဒါဆိုရင် updatedProfile မှာရှိတဲ့ age က 19 ဖြစ်သွားမှာပါ။ List of Argument အနေနဲ့ပေးချင်တဲ့အခါကြရင်လည်း Spread Operator ကိုသူံးလို့ရတယ်။

const numbers = [1, 2, 3, 4, 5]
const max = Math.max(...numbers) // 5

Reference Type တွေက Side effect တွေကိုဖြစ်တတ်တယ်။ State တွေ Mutate သွားတာမျိုးဖြစ်တယ်။ Array တစ်ခုကို Descending Order နဲ့ဆီချင်တဲ့အခါမျိုး။

const numbers = [1, 2, 3, 4, 5]
numbers.sort((a, b) => b - a)
console.log(numbers) // [5, 4, 3, 2, 1]

Array က Reference Type တာမို့လို့ မူရင်း State ကို Mutate သွားလိမ့်မယ်။ ဒါကိုရှောင်ချင်ရင် Spread အကူအညီနဲ့ဒီလိုမျိုးသွားလို့ရတယ်။

const descendingNumbers = [...numbers].sort((a, b) => b - a)

ဒါဆိုရင် Array အသစ်ကို Sort တာဖြစ်လို့ မူရင်း Array ကို Effect မဖြစ်တော့ဘူးပေါ့။

Destructing

Array ဒါမှမဟုတ် Object ရဲ့ Property Value တွေကိုဆွဲထုတ်ပြီးယူချင်ရင် Destructing ကိုသုံးလို့ရတယ်။

const [a, b] = [1, 2] // 1 1

Object တွေမှာဆိုရင် Original Object ရဲ့ Key နဲ့ Name တူမှ Destruct လို့ရမယ်။

const {name, age} = {
    name: "Mg Mg",
    age: 18
}
console.log(`${name} is ${age} years old`)

Object တွေမှာ Destructing လုပ်ရင်းနဲ့ Rename လို့ရတယ်။

const {data: user} = fetch("https://...")

API ကပြန်လာမဲ့ Object မှာ data Field ပါလာတယ်ဆိုပါစို့။ ဒီကောင်ကို user အနေနဲ့ Rename လုပ်ပြီးသုံးလို့ရတယ်။ Removing Unwanted Object Fields user Object ကနေ age Field ကိုဖယ်ချင်ရင်ဒီလိုသုံးလို့ရတယ်။

const user = {
    name: "Mg Mg",
    age: 18
}
const removeAgeField = (obj) => {
    const {age, ...rest} = obj
    return rest
}
const userWithoutAge = removeAgeField(user)
console.log(userWithoutAge) // {name: "Mg Mg"}