Toán tử ba ngôi (Ternary Operator ?: ) trong JavaScript

Toán tử ba ngôi (Ternary Operator) ?: là toán tử duy nhất trong JavaScript nhận 3 toán hạng. Nó là cú pháp rút gọn cho câu lệnh if...else gán giá trị.

Cú pháp

condition ? expressionIfTrue : expressionIfFalse

• condition: Biểu thức đánh giá thành true hoặc false.
• expressionIfTrue: Giá trị/biểu thức trả về nếu condition là true.
• expressionIfFalse: Giá trị/biểu thức trả về nếu condition là false.

Ví dụ cơ bản

var a = 10, b = 20;

// Gán giá trị dựa trên điều kiện
var max = (a > b) ? a : b; // 20
var min = (a < b) ? a : b; // 10

// Trong chuỗi template (ES6)
var status = (age >= 18) ? "Trưởng thành" : "Thiếu niên";

// Lồng nhau (nested) - CẨN THẬN: khó đọc
var grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "F";

So sánh với if...else

Ví dụ thực tế hay dùng

1. Default value (Giá trị mặc định) - Thay cho || khi giá trị có thể là 0, "", false

function greet(name) {
    // Nếu name là "", 0, false -> vẫn dùng name, không fallback
    const displayName = (name !== undefined && name !== null) ? name : "Khách";
    return `Chào ${displayName}`;
}

2. Render điều kiện trong React/JSX

{isLoggedIn ?  : }

3. Return sớm (Early return) trong hàm

function getDiscount(price, isMember) {
    return isMember ? price * 0.9 : price;
}

4. Cấu hình object động

const config = {
    apiUrl: isProduction ? "https://api.prod.com" : "https://api.dev.com",
    timeout: isMobile ? 5000 : 10000
};

⚠️ LƯU Ý & CẤM KỴ

• KHÔNG lồng sâu (nested ternary): Rất khó đọc, dễ bug. Dùng if...else if...else hoặc switch.
• KHÔNG dùng cho side effect (gọi hàm, gán biến, DOM manipulation). Chỉ dùng để chọn giá trị.
• Dùng ngoặc đơn bao quanh điều kiện phức tạp: (a > b && c < d) ? x : y.
• Khác với Nullish Coalescing (??): a ?? b chỉ fallback khi a là null/undefined. Ternary kiểm tra truthy/falsy.

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