Legacy Code Modernizer

hard 30-45 minutes

🎯 Learning Objectives

✅ How to convert .then() promise chains to async/await syntax
✅ When to add the async keyword to functions that use await
✅ How to convert callback error handling to try/catch blocks
✅ Why synchronous code should NOT be wrapped in try/catch

📖 Concept: Legacy Code Modernization

Legacy code คือโค้ดที่เขียนด้วย pattern เก่า — เหมือนนักสู้ที่ยังใช้ท่าโบราณ ใช้ได้แต่ไม่มีประสิทธิภาพ modernization คือการอัพเดท technique ให้ทันสมัยโดยไม่เปลี่ยนผลลัพธ์

ใน JavaScript โค้ดเก่ามักจะใช้ callback-based patterns (fs.readFile("f", callback)) หรือ .then() chains ซึ่งอ่านยากและจัดการ error ได้ซับซ้อน modernization เปลี่ยนเป็น async/await ซึ่งอ่านง่ายเหมือน synchronous code

แต่ ไม่ใช่ทุก code ต้อง modernize — synchronous code ที่ไม่มี async operation ไม่ควรถูก wrap ใน try/catch

Think of it like upgrading from wooden training swords to steel — same fighting techniques, but now you have better tools. The martial art hasn’t changed; only the equipment has been modernized.

⚙️ How It Works

The Modernization Workflow

Detect async patterns — .then(), callback, fs.readFile
Convert .then() → await — flatten the promise chain
Add async keyword — functions using await must be async
Convert error handling — callbacks → try/catch
Skip synchronous code — don’t modernize what doesn’t need it

Pattern 1: .then() → await

// ❌ Before: nested .then() chains
fetch(url)
  .then(r => r.json())
  .then(data => console.log(data));

// ✅ After: flat async/await
const r = await fetch(url);
const data = await r.json();
console.log(data);

Pattern 2: Add async keyword

// ❌ Before: function using .then() without async
function load() {
  return fetch(url).then(r => r.json());
}

// ✅ After: async function with await
async function load() {
  return await fetch(url).then(r => r.json());
}

Pattern 3: Callback → try/catch

// ❌ Before: callback error handling
fs.readFile("f", (err, data) => {
  if (err) throw err;
  cb(data);
});

// ✅ After: try/catch with await
try {
  const data = await fs.promises.readFile("f");
  cb(data);
} catch (err) {
  console.error(err);
}

The Critical Rule: Don’t Touch Synchronous Code

// ✅ This function is synchronous — leave it alone
function add(a, b) { return a + b; }
// Don't wrap it in try/catch!

// ✅ This function is async — modernize it
function load() { return fetch(url).then(r => r.json()); }
// Convert to async/await with try/catch

💡 Example: Walkthrough

// Input
const code = `function load() {
  return fetch(url).then(r => r.json());
}`;

// Analysis:
// - Function uses .then() → needs async/await
// - No callback error handling → no try/catch needed

// Output
const modernized = `async function load() {
  return await fetch(url).then(r => r.json());
}`;

⚠️ Common Mistakes

Mistake 1: Wrapping synchronous code in try/catch

“Modernize ทุก function → ใส่ try/catch ทุกที่” → Synchronous code (ไม่มี await, callback, .then()) ไม่ต้อง wrap

Mistake 2: Forgetting async keyword

“ใช้ await แล้วแต่ลืมใส่ async” → Function ที่ใช้ await ต้องมี async keyword

Mistake 3: Breaking non-async code

“String replace ทุก .then() โดยไม่เช็ค context” → ตรวจสอบว่า .then() อยู่ใน promise chain จริงๆ ไม่ใช่ string literal

Mistake 4: Empty input crashes

“ไม่ได้ handle code ว่าง” → Empty input → return empty string

📝 Knowledge Check

🏋️ Quest: Legacy Code Modernizer

Now it’s time to practice! Modernize callback-based code to async/await.

Download ไฟล์เริ่มต้นของ quest:

npx bluebeltdojo download quest-97-legacy-modernizer
cd quest-97-legacy-modernizer

เปิด problem.js ใน editor ของคุณพร้อมความช่วยเหลือของ AI
Implement solution ตาม instructions ใน problem.js
ตรวจสอบ solution ของคุณ:
Terminal window
```
node test.js
```
ส่งคำตอบ:
Terminal window
```
npx bluebeltdojo submit
```

💡 Tip: ทดสอบ edge case — synchronous code ไม่ควรถูก wrap ใน try/catch

คำใบ้

modernize(code) รับ JavaScript code string และ return modernized code string
แปลง .then() chains เป็น await syntax
เพิ่ม async keyword ใน function ที่ใช้ await
Callback error handling → try/catch, เฉพาะ async operations เท่านั้น
ถ้าติดขัด ดู _solution/solution.js