JavaScript Truthy & Falsy: Tất Tần Tật Về Các Giá Trị Cần Biết Tránh Bug Logic
- Home
- JavaScript Truthy & Falsy: Tất Tần Tật Về Các Giá Trị Cần Biết Tránh Bug Logic
Trong lập trình JavaScript, khái niệm Truthy và Falsy là nền tảng cốt lõi điều khiển toàn bộ biểu thức điều kiện (if/else, toán tử ba ngôi, vòng lặp). Rất nhiều lỗi logic (bug) phổ biến xuất hiện chỉ vì lập trình viên ép kiểu ngầm định (Type Coercion) sai hoặc không nắm rõ danh sách các giá trị được JavaScript coi là false.
Bài viết này từ DCSOFT sẽ giúp bạn hệ thống hóa toàn bộ kiến thức về Truthy & Falsy, các bẫy ép kiểu thường gặp và cách viết code JavaScript tối ưu, chuẩn sạch.
Trong JavaScript, một giá trị được gọi là Falsy khi nó được ép kiểu về giá trị Boolean false trong một ngữ cảnh điều kiện (Boolean context).
Tính đến các phiên bản ECMAScript hiện tại, JavaScript chỉ có chính xác 8 giá trị Falsy sau đây:
| Giá trị | Kiểu dữ liệu | Ý nghĩa |
false |
Boolean | Giá trị sai nguyên bản |
0 |
Number | Số không |
-0 |
Number | Số âm không |
0n |
BigInt | Số không kiểu BigInt |
"" |
String | Chuỗi rỗng (độ dài = 0) |
null |
Null | Đại diện cho sự vắng mặt của giá trị |
undefined |
Undefined | Biến chưa được gán giá trị |
NaN |
Number | Not a Number (kết quả của phép toán không hợp lệ) |
Lưu ý quan trọng từ DCSOFT: Ngoài 8 giá trị được liệt kê trên, TẤT CẢ các giá trị còn lại trong JavaScript đều là Truthy.
Một giá trị được coi là Truthy khi nó chuyển đổi thành true trong ngữ cảnh Boolean.
Nhiều lập trình viên mới thường mắc sai lầm khi nghĩ một số giá trị “rỗng” là Falsy. Dưới đây là những giá trị Truthy rất dễ gây nhầm lẫn:
[] (Mảng rỗng – Array)
{} (Object rỗng)
"0" hoặc "false" (Chuỗi ký tự chứa số 0 hoặc chữ false)
function() {} (Hàm rỗng)
-1, 1 (Số nguyên khác 0)
Infinity và -Infinity
// Tất cả các câu lệnh sau đều thực thi block code bên trong!
if ([]) {
console.log("Mảng rỗng vẫn là Truthy!");
}
if ("0") {
console.log("Chuỗi '0' là Truthy, khác với số 0!");
}
!! (Double NOT)Để kiểm tra hoặc chuyển đổi nhanh một giá trị bất kỳ sang Boolean chuẩn, bạn có thể dùng hai dấu chấm cảm !!:
console.log(!!"DCSOFT"); // true (String có nội dung)
console.log(!!0); // false (Falsy value)
console.log(!![]); // true (Object/Array luôn là Truthy)
&& (AND) và || (OR)Các toán tử && và || trong JavaScript không trả về true/false mà trả về giá trị của operand:
Toán tử ||: Trả về giá trị Truthy đầu tiên gặp phải, hoặc giá trị cuối cùng nếu tất cả là Falsy.
Toán tử &&: Trả về giá trị Falsy đầu tiên gặp phải, hoặc giá trị cuối cùng nếu tất cả là Truthy.
const name = "" || "Default Name"; // "Default Name" (do "" là Falsy)
const user = { age: 20 } && "Valid User"; // "Valid User"
0 bị lầm tưởng là giá trị không tồn tạiKhi kiểm tra tham số hoặc biến số học, giá trị 0 có thể đại diện cho dữ liệu hợp lệ (ví dụ: số lượng sản phẩm = 0, điểm số = 0).
// Code lỗi logic:
function updateQuantity(qty) {
// Nếu qty = 0, biểu thức (qty || 10) sẽ lấy 10 vì 0 là Falsy!
const finalQty = qty || 10;
console.log(finalQty);
}
updateQuantity(0); // Kết quả: 10 (Sai kỳ vọng!)
Giải pháp (ES2020 Nullish Coalescing Operator ??):
Sử dụng toán tử ?? thay cho ||. Toán tử ?? chỉ coi null và undefined là giá trị vắng mặt (Nullish), giữ nguyên số 0 và chuỗi rỗng "".
// Code chuẩn:
const finalQty = qty ?? 10; // Nếu qty = 0 -> finalQty = 0
Do [] và {} đều là Truthy, câu lệnh if ([]) sẽ luôn chạy dù mảng không có phần tử nào.
const items = [];
// Cách sai:
if (items) {
// Vẫn nhảy vào đây dù mảng rỗng!
}
// Cách đúng:
if (items.length > 0) {
console.log("Mảng có dữ liệu");
}
if (Object.keys(myObj).length > 0) {
console.log("Object có thuộc tính");
}
Ghi nhớ chính xác 8 giá trị Falsy: false, 0, -0, 0n, "", null, undefined, NaN.
Luôn so sánh nghiêm ngặt (=== và !==): Tránh dùng so sánh bằng mờ nhạt (==), vì == thực hiện ép kiểu ngầm định rất phức tạp (ví dụ: 0 == "" trả về true).
Ưu tiên Nullish Coalescing (??) thay vì || khi xử lý giá trị mặc định cho số hoặc chuỗi.
Kiểm tra độ dài mảng/object thay vì truyền trực tiếp biến array/object vào câu lệnh if.