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.

1. Falsy Values Trong JavaScript Là Gì?

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.

2. Truthy Values Trong JavaScript

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

JavaScript

// 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!");
}

3. Các Toán Tử Và Cách Chuyển Đổi Truthy / Falsy

3.1. Toán tử ép kiểu Boolean !! (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 !!:

JavaScript

console.log(!!"DCSOFT"); // true (String có nội dung)
console.log(!!0);        // false (Falsy value)
console.log(!![]);       // true (Object/Array luôn là Truthy)

3.2. Toán tử logic && (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.

JavaScript

const name = "" || "Default Name"; // "Default Name" (do "" là Falsy)
const user = { age: 20 } && "Valid User"; // "Valid User"

4. Cạm Bẫy Thường Gặp Về Truthy / Falsy Và Cách Tránh Bug

Cạm bẫy 1: Số 0 bị lầm tưởng là giá trị không tồn tại

Khi 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).

JavaScript

// 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 "".

JavaScript

// Code chuẩn:
const finalQty = qty ?? 10; // Nếu qty = 0 -> finalQty = 0

Cạm bẫy 2: Kiểm tra mảng rỗng hoặc Object rỗng

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.

JavaScript

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");
}

5. Tóm Tắt Kinh Nghiệm Viết Code Clean Tại DCSOFT

  1. Ghi nhớ chính xác 8 giá trị Falsy: false, 0, -0, 0n, "", null, undefined, NaN.

  2. 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).

  3. Ưu tiên Nullish Coalescing (??) thay vì || khi xử lý giá trị mặc định cho số hoặc chuỗi.

  4. 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.

Categories:

Leave Comment