Thuta Learning
ရှာဖွေရန်
ExercisesProgrammingbeginner

Practice: Advanced JS Challenges

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Practice: Advanced JS Challenges ကို ကိုယ်တိုင် လေ့ကျင့်ကြည့်မယ်
  • သင်ခဲ့ပြီးသား skill တွေကို practice လုပ်ပြီး ခိုင်မာအောင်လုပ်မယ်
  • အမှားရှာ၊ ပြင်တတ်၊ ကိုယ်တိုင် check လုပ်တတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ practice set က Advanced Concepts, OOP နဲ့ Async JavaScript chapter တွေက closures, arrow functions, destructuring, classes, promises/async-await concept တွေကို ပေါင်းစပ်ပြီး ပိုမိုခက်ခဲတဲ့ real-world-like scenario တွေနဲ့ လေ့ကျင့်ပေးပါတယ်။ Exercise ၁ ထက် တစ်ဆင့်တက် ခက်ခဲပြီး, concept တစ်ခုတည်းမဟုတ်ဘဲ concept နှစ်ခု (ဥပမာ - closures + higher-order function) ကို တွဲသုံးရတဲ့ task တွေ ပါဝင်ပါတယ်။ Solution ကို ကြည့်ခင် ကိုယ့်ဘာသာ 10-15 မိနစ်လောက် စဉ်းစားကြည့်ဖို့ အကြံပြုပါတယ်။ ဒီလို challenge harder task တွေက interview preparation အတွက်လည်း အသုံးဝင်ပါတယ်။

လေ့ကျင့်ခန်းများ

Task 1: Closure သုံးပြီး `createCounter()` factory function ရေးပါ - `increment()`, `decrement()`, `reset()` methods ပါတဲ့ object ပြန်ပေးရမယ်၊ internal count variable ကို outside ကနေ တိုက်ရိုက် access မလုပ်နိုင်စေရပါ။ Task 2: `Person` class ဆောက်ပြီး constructor မှာ name, age လက်ခံပါ၊ static method `compareAge(p1, p2)` ထည့်ပြီး age ကြီးတဲ့သူကို ပြန်ပေးအောင် ရေးပါ။ Task 3: `fetchUserData(id)` ဆိုတဲ့ async function တစ်ခု (setTimeout နဲ့ promise simulate လုပ်ထားတာ) ရေးပြီး, async/await သုံးပြီး error ကို try/catch နဲ့ handle လုပ်ပါ။ Task 4: array of objects ကနေ destructuring နဲ့ spread operator သုံးပြီး, `map()` + `filter()` ကို chain လုပ်ပြီး price 1000 အောက် item တွေရဲ့ name array တစ်ခုပဲ ထုတ်ယူပါ။

Code နမူနာ

javascript
// Task 1: Closure counter factory
function createCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    reset: () => (count = 0)
  };
}

// Task 2: Person class with static method
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static compareAge(p1, p2) {
    // TODO: age ကြီးတဲ့ Person object ကို ပြန်ပေးပါ
  }
}

// Task 3: Async/await with error handling
function fetchUserData(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id <= 0) reject(new Error("Invalid user id"));
      else resolve({ id, name: "User " + id });
    }, 500);
  });
}

async function loadUser(id) {
  try {
    const user = await fetchUserData(id);
    console.log(user);
  } catch (err) {
    // TODO: error ကို handle လုပ်ပါ
  }
}

// Task 4: destructuring + map/filter chain
const products = [
  { name: "Pen", price: 500 },
  { name: "Bag", price: 15000 },
  { name: "Book", price: 800 }
];
const cheapNames = products
  .filter(({ price }) => price < 1000)
  .map(({ name }) => name);
console.log(cheapNames);
You should see
Counter object ကနေ increment/decrement/reset ရလဒ်များ, compareAge ကနေ age ကြီးသူ Person object, loadUser(id) ကနေ user data (သို့) caught error message, နဲ့ cheapNames မှာ ["Pen", "Book"] array ပေါ်လာမှာ ဖြစ်ပါတယ်။

၅ မိနစ် စမ်းကြည့်

အချိန် 5 မိနစ်ယူပြီး Task 3 ကို loadUser(-1) နဲ့ ခေါ်ကြည့်ပါ - error path က ကောင်းကောင်း handle ဖြစ်လားဆိုတာ စစ်ဆေးပါ။

သတိလေးတစ်ချက်

Task 3 ကို async/await မသုံးဘဲ .then().catch() နဲ့လည်း ရေးကြည့်ပြီး နှစ်မျိုးရဲ့ readability ကို ကိုယ်တိုင် နှိုင်းယှဉ်ကြည့်ပါ - real project တွေမှာ ဒါက အသုံးဝင်တဲ့ debugging skill တစ်ခု ဖြစ်ပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Closure ထဲက private variable ကို object property အနေနဲ့ တိုက်ရိုက် expose လုပ်မိပြီး encapsulation ပျက်တတ်ပါတယ်
  • async function ထဲမှာ await ကို မမေ့ဘဲ Promise object ကိုတိုက်ရိုက် သုံးမိလို့ [object Promise] ဆိုတဲ့ output ရတတ်ပါတယ်

အခု ကိုယ်တိုင် စမ်းကြည့်

အချိန် 5 မိနစ်ယူပြီး Task 3 ကို loadUser(-1) နဲ့ ခေါ်ကြည့်ပါ - error path က ကောင်းကောင်း handle ဖြစ်လားဆိုတာ စစ်ဆေးပါ။

You'll know it worked when: Counter object ကနေ increment/decrement/reset ရလဒ်များ, compareAge ကနေ age ကြီးသူ Person object, loadUser(id) ကနေ user data (သို့) caught error message, နဲ့ cheapNames မှာ ["Pen", "Book"] array ပေါ်လာမှာ ဖြစ်ပါတယ်။

Practice: Advanced JS Challenges | Thuta Learning