วิธีออกจาก Switch Case ใน JavaScript

ใน switch statement ใช้คำสั่ง break เพื่อ ออกจาก Switch Block ทันที หลังจบ Case ที่ Match หากไม่มี break จะเกิด Fall-through (ทำ Case ถัดไปต่อเนื่อง)

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

<html>
<body>
  <script>
    var grade = 'A';
    document.write("Entering switch block<br>");
    switch (grade) {
      case 'A': document.write("Excellent<br />"); break;
      case 'B': document.write("Very good<br />"); break;
      case 'C': document.write("Passed<br />"); break;
      case 'D': document.write("Not so good<br />"); break;
      case 'F': document.write("Failed<br />"); break;
      default: document.write("Unknown grade<br />")
    }
    document.write("Exiting switch block");
  </script>
</body>
</html>

Fall-through Behavior (เมื่อไม่มี break)

var grade = 'B';
switch (grade) {
  case 'A': console.log('A');  // ไม่มี break
  case 'B': console.log('B');  // ไม่มี break
  case 'C': console.log('C');
  default: console.log('Default');
}
// Output: B, C, Default (Fall-through!)

Fall-through ขึ้นใจ (Intentional)

บางครั้งต้องการให้หลาย Case รันโค้ดเดียวกัน:

switch (fruit) {
  case 'apple':
  case 'mango':
  case 'banana':
    console.log('ผลไม้ טרอปิคัล');
    break; // Break ที่นี่ครอบหลาย Case
  case 'carrot':
    console.log('ผัก');
    break;
  default:
    console.log('ไม่รู้จัก');
}

Switch แบบ Strict Equality (===)

switch ใช้ Strict Equality (===) เปรียบเทียب:

var x = "10";
switch (x) {
  case 10:   // Number - ไม่ Match!
    console.log("Number 10");
    break;
  case "10": // String - Match!
    console.log("String '10'");
    break;
}

Best Practices

• ใส่ break ทุก Case (ยกเว้น Fall-through ขึ้นใจ)
• มี default เสมอ เพื่อจับกรณีไม่ Match
• จัดกลุ่ม Case ที่ Share Logic (Fall-through ขึ้นใจ)
• พิจารณา Object/Map Lookup แทน Switch สำหรับ Key-Value Mapping

ตัวเลือกแทน Switch (Modern)

// Object Lookup (Key-Value Mapping)
const gradeMessages = {
  'A': 'Excellent',
  'B': 'Very good',
  'C': 'Passed',
  'D': 'Not so good',
  'F': 'Failed'
};
const message = gradeMessages[grade] || 'Unknown grade';

// Map (สำหรับ Key ที่ไม่ใช่ String)
const handlers = new Map([
  [EventType.CLICK, handleClick],
  [EventType.HOVER, handleHover]
]);
const handler = handlers.get(event.type) || defaultHandler;

ข้อควรระวัง

• ลืม break → บั๊ก Fall-through ที่หายาก
• Duplicate Case: ใช้ตัวแรกที่เจอ
• Case Expression ต้องเป็น Constant (ไม่ใช่ Variable/Expression)
• switch(true) Pattern สำหรับ Range/Complex Condition (ใช้ระมัดระวัง)