Fat Arrow vs Concise Arrow Functions ใน JavaScript

Arrow Functions มี 2 รูปแบบหลัก: Fat Arrow (Block Body) และ Concise Arrow (Expression Body) ความแตกต่างคือการใช้ {} และ return

Syntax Comparison

// Fat Arrow Function (Block Body) - ต้องมี return
const addFat = (a, b) => {
  return a + b;
};

// Concise Arrow Function (Expression Body) - Implicit Return
const addConcise = (a, b) => a + b;

// พารามิเตอร์เดียว - ไม่ต้องวงเล็บ
const double = x => x * 2;

// ไม่มีพารามิเตอร์ - ต้องมีวงเล็บ
const random = () => Math.random();

// คืนค่าอ็อบเจกต์ - ต้องห่อด้วย ()
const createUser = (name, age) => ({ name, age });

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Fat vs Concise Arrow</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style>
</head>
<body>
  <h1>Fat vs Concise Arrow Functions</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>กดปุ่มเพื่อทดสอบ Fat และ Concise Arrow Functions</h3>
  <script>
    const resEle = document.querySelector(".result");
    // Concise (Implicit return)
    const add = (a, b) => a + b;
    // Fat (Explicit return)
    const multiply = (a, b) => {
      return a * b;
    };
    document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "บวก (Concise): 32 + 19 = " + add(32, 19) + "<br>";
      resEle.innerHTML += "คูณ (Fat): 32 × 19 = " + multiply(32, 19) + "<br>";
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม "คลิกที่นี่":

ตารางเปรียบเทียบ

เมื่อไหร่ใช้แบบไหน?

• Concise: One-liner, pure functions, callbacks สั้น (arr.map(x => x*2))
• Fat: หลายบรรทัด, มี side effects, try/catch, loops, complex logic
• Consistency: ทีมควรกำหนด style guide ให้เหมือนกัน (เช่น ใช้ concise สำหรับทุกอย่างที่เป็น one-liner)

Common Mistakes

// ❌ ผิด: คืนค่า object ไม่ได้โดยตรง
const bad = () => { name: "John" }; // คืน undefined (block ไม่มี return)

// ✅ ถูก: ห่อด้วย ()
const good = () => ({ name: "John" });

// ❌ ผิด: ใช้ concise แต่วาง statement หลายบรรทัด
const bad2 = (a, b) => 
  const sum = a + b; // SyntaxError
  return sum;

// ✅ ถูก: ใช้ fat arrow
const good2 = (a, b) => {
  const sum = a + b;
  return sum;
};

Implicit Return กับ Void Functions

// ถ้าไม่ต้องการคืนค่า ใช้ fat arrow หรือ void
const log = (msg) => { console.log(msg); }; // ✅
const logConcise = (msg) => void console.log(msg); // ✅ คืน undefined โดยเจตนา