Các toán tử Logic (Logical Operators) trong JavaScript

JavaScript cung cấp 3 toán tử logic cơ bản: && (AND), || (OR), ! (NOT). Chúng hoạt động trên giá trị truthy/falsy – không chỉ boolean.

Bảng chân trị (Truth Table)

Short-Circuit Evaluation (Đánh giá ngắn mạch)

Đặc trưng quan trọng: JS chỉ đánh giá operand thứ 2 khi cần thiết.

• &&: Nếu operand đầu falsy → trả về operand đầu (không đánh giá operand 2).
• ||: Nếu operand đầu truthy → trả về operand đầu (không đánh giá operand 2).

// && - Trả về giá trị falsy đầu tiên HOẶC giá trị cuối cùng
true && "hello";      // "hello" (cả 2 truthy → trả về cuối)
false && "hello";     // false (dừng ở false)
0 && alert("hi");     // 0 (alert KHÔNG chạy)
"" && "world";        // "" 

// || - Trả về giá trị truthy đầu tiên HOẶC giá trị cuối cùng
true || "hello";      // true (dừng ở true)
false || "hello";     // "hello"
0 || "default";       // "default"
"" || "fallback";     // "fallback"
null || undefined;    // undefined

Ứng dụng thực tế (Idioms)

1. Default value (Fallback) – dùng ||

function greet(name) {
  name = name || "Khách"; // Nếu name falsy → "Khách"
  console.log(`Xin chào ${name}`);
}
greet("An");    // "Xin chào An"
greet("");      // "Xin chào Khách"
greet(null);    // "Xin chào Khách"
// ⚠️ CẢNH BÁO: greet(0) → "Khách" (0 là falsy)
// Hiện nay dùng ?? (nullish coalescing) an toàn hơn

2. Guard clause / Optional chaining – dùng &&

// Cũ
if (user && user.profile && user.profile.avatar) {
  showAvatar(user.profile.avatar);
}

// Hiện đại: Optional chaining (ES2020)
user?.profile?.avatar && showAvatar(user.profile.avatar);

// Hoặc ngắn gọn
const avatar = user?.profile?.avatar;
avatar && showAvatar(avatar);

3. Điều kiện thực thi hàm

isLoggedIn && renderDashboard(); // Chạy renderDashboard nếu isLoggedIn truthy
isAdmin || showAccessDenied();   // Chạy showAccessDenied nếu isAdmin falsy

Toán tử NOT !

• Chuyển truthy → false, falsy → true.
• !!x ép kiểu sang boolean (true/false).

!true;        // false
!0;           // true
!!"hello";    // true
!!0;          // false
Boolean("x"); // true (tương đương !!)

Nullish Coalescing ?? (ES2020) – Thay thế || cho default

// || : falsy (0, "", false, null, undefined, NaN) đều fallback
// ?? : chỉ null/undefined mới fallback

const port = config.port || 3000;    // config.port = 0 → port = 3000 (BUG!)
const port = config.port ?? 3000;    // config.port = 0 → port = 0 (ĐÚNG!)

Ví dụ demo từ bài gốc

<script>
  var a = true;
  var b = false;
  var br = "<br />";
  
  document.write("(a && b) => " + (a && b) + br);  // false
  document.write("(a || b) => " + (a || b) + br);  // true
  document.write("!(a && b) => " + !(a && b) + br); // true
</script>

Tóm tắt

• &&: AND – trả về falsy đầu hoặc cuối cùng.
• ||: OR – trả về truthy đầu hoặc cuối cùng.
• !: NOT – đảo boolean.
• Short-circuit: Tận dụng cho default, guard, conditional execution.
• Ưu tiên ?? cho default value, ?. cho optional access.