Ternary Operator (?:) ใน JavaScript คืออะไร

Ternary Operator (Conditional Operator) เป็นออเปอเรเตอร์ที่รับ 3 operand (ตัวถูกกระทำ) เพื่อตัดสินใจเลือกค่าระหว่าง 2 ทางเลือก ตามเงื่อนไข

ไวยากรณ์

condition ? valueIfTrue : valueIfFalse

ตัวอย่างพื้นฐาน

<html>
  <body>
    <script>
      var a = 10;
      var b = 20;
      var linebreak = "<br />";
      
      document.write("((a > b) ? 100 : 200) => ");
      result = (a > b) ? 100 : 200;
      document.write(result); // 200
      document.write(linebreak);
      
      document.write("((a < b) ? 100 : 200) => ");
      result = (a < b) ? 100 : 200;
      document.write(result); // 100
      document.write(linebreak);
    </script>
  </body>
</html>

ตัวอย่างการใช้งานจริง

1. กำหนดค่าเริ่มต้น (Default Value)

var name = userName || 'Guest';
// หรือชัดเจนกว่า:
var name = userName !== undefined ? userName : 'Guest';

2. Conditional Rendering (React style)

var isLoggedIn = true;
var message = isLoggedIn ? 'Welcome back!' : 'Please login';

3. กำหนด CSS Class

var className = isActive ? 'btn-active' : 'btn-inactive';

4. Nested Ternary (ควรหลีกเลี่ยงถ้าซับซ้อน)

var grade = score >= 90 ? 'A' : 
            score >= 80 ? 'B' : 
            score >= 70 ? 'C' : 'F';

5. ใช้กับ Function Return

function getStatus(age) {
  return age >= 18 ? 'Adult' : 'Minor';
}

เทียบกับ if-else

if (condition) {
  return a;
} else {
  return b;
}

return condition ? a : b;

ข้อควรระวัง

• อ่านยากถ้า nested หลายชั้น → ใช้ if-else แทน
• ไม่ใช่ statement ไม่สามารถใส่ statement หลายบรรทัดได้โดยตรง
• Precedence ต่ำกว่าออเปอเรเตอร์ส่วนใหญ่ → ใช้วงเล็บครอบเงื่อนไข

Nullish Coalescing (??) vs Ternary

// ES2020 - สำหรับ null/undefined เท่านั้น
var value = input ?? 'default';

// Ternary - สำหรับ falsy ทุกอย่าง (0, '', false, null, undefined)
var value = input !== null && input !== undefined ? input : 'default';