Giá trị truthy và falsy trong JavaScript: danh sách đầy đủ

Mọi giá trị đều mang một "tâm trạng" boolean

JavaScript cho phép bạn đặt bất kỳ giá trị nào vào chỗ cần một boolean: trong if, làm điều kiện của while, cạnh && hoặc ||. Khi đó, giá trị bị chuyển đổi thành true hoặc false. Những giá trị chuyển thành false được gọi là falsy. Mọi thứ còn lại là truthy.

if ("hello") console.log("strings are truthy");
if (42) console.log("nonzero numbers are truthy");
if ([]) console.log("empty arrays are truthy");
if ({}) console.log("empty objects are truthy");

if (!0) console.log("zero is falsy");
if (!"") console.log("empty string is falsy");

Không cần hàm chuyển đổi, không cần ép kiểu tường minh: JavaScript tự làm việc đó. Các quy tắc cố định và ít ỏi, nên một khi đã biết danh sách falsy, mọi trường hợp khác đều suy ra được.

Danh sách falsy đầy đủ

Có đúng tám giá trị falsy. Mọi thứ khác trong ngôn ngữ đều là truthy.

const falsyValues = [false, 0, -0, 0n, "", null, undefined, NaN];

for (const v of falsyValues) {
    console.log(v, "->", Boolean(v));
}

Chỉ vậy thôi. Danh sách gồm:

• false: chính giá trị boolean đó.
• 0 và -0: cả hai số 0.
• 0n: số 0 kiểu BigInt.
• "": chuỗi rỗng (dùng nháy đơn, nháy kép hay backtick đều như nhau).
• null: giá trị "cố ý không có gì".
• undefined: giá trị "chưa được gán".
• NaN: kết quả của phép toán không hợp lệ như 0 / 0.

Hãy thuộc lòng tám giá trị này. Sau đó, với bất kỳ giá trị nào bạn không chắc, chỉ cần hỏi: "nó có nằm trong tám giá trị đó không?" Nếu không, nó là truthy.

Những điều bất ngờ: "0", [] và {}

Đây là chỗ người mới hay vấp. Có rất nhiều giá trị trông như rỗng nhưng lại là truthy:

console.log(Boolean("0"));       // true - it's a non-empty string
console.log(Boolean("false"));   // true - still a non-empty string
console.log(Boolean(" "));       // true - a space counts
console.log(Boolean([]));        // true - empty array is an object
console.log(Boolean({}));        // true - empty object is an object
console.log(Boolean(new Date()));// true

Chuỗi chỉ falsy khi không có ký tự nào. "0" có một ký tự, nên nó là truthy. Mảng và đối tượng luôn luôn là truthy, kể cả khi rỗng, vì JavaScript coi chúng là đối tượng, và mọi đối tượng đều truthy bất kể bên trong chứa gì.

Nếu bạn đến từ Python, đây là thay đổi tư duy lớn nhất. Trong Python, [] và {} là falsy. Trong JavaScript thì không.

Kiểm tra "rỗng" cho đúng cách

Vì [] và {} là truthy, bạn không thể dùng trực tiếp chúng trong if để kiểm tra rỗng. Hãy viết tường minh:

const items = [];
const user = {};

// Wrong - always runs:
if (items) console.log("items has stuff");

// Right:
if (items.length === 0) console.log("items is empty");
if (Object.keys(user).length === 0) console.log("user has no fields");

Với chuỗi cũng vậy, nếu bạn muốn coi chuỗi chỉ có khoảng trắng là rỗng:

const input = "   ";
if (input) console.log("truthy, but not really useful");
if (input.trim() === "") console.log("actually empty");

Truthy/falsy là một cách viết tắt tiện lợi, chứ không thay thế được việc suy nghĩ "rỗng" nghĩa là gì với dữ liệu của bạn.

Chuyển sang một boolean thật sự

Đôi khi bạn cần một giá trị true hoặc false thật sự, chứ không chỉ một giá trị kiểu truthy. Có hai cách viết quen thuộc:

const name = "Rosa";

console.log(Boolean(name));  // true
console.log(!!name);         // true

const empty = "";
console.log(Boolean(empty)); // false
console.log(!!empty);        // false

Boolean(x) là phép chuyển đổi tường minh. !!x là cách viết tắt của cùng việc đó: dấu ! đầu tiên chuyển sang boolean và lật nó, dấu ! thứ hai lật lại. Cả hai đều phổ biến. !! ngắn hơn; Boolean() dễ đọc hơn.

Bạn sẽ thường thấy !! trong câu lệnh return khi một hàm cần trả về một boolean gọn gàng:

function hasItems(arr) {
    return !!arr && arr.length > 0;
}

console.log(hasItems([1, 2]));   // true
console.log(hasItems([]));        // false
console.log(hasItems(null));      // false

Truthy/falsy với && và ||

Các toán tử logic không trả về true hay false: chúng trả về một trong các toán hạng. Toán hạng nào được trả về phụ thuộc vào tính truthy:

console.log("a" && "b");       // "b"  - both truthy, returns the last
console.log(0 && "b");         // 0    - short-circuits on the falsy one
console.log("" || "fallback"); // "fallback" - first is falsy, returns the second
console.log("hi" || "fallback");// "hi" - first is truthy, returns it

Đó là lý do value || defaultValue là mẫu rất phổ biến để đặt giá trị mặc định. Nhưng nó có một cái bẫy: nó đối xử với mọi giá trị falsy như nhau, kể cả 0 và "", vốn thường là đầu vào hợp lệ:

function greet(name) {
    const who = name || "stranger";
    console.log("Hello, " + who);
}

greet("Ada");   // Hello, Ada
greet("");      // Hello, stranger - but maybe "" was intentional?
greet(0);       // Hello, stranger - and 0 might be a valid id

Nếu bạn chỉ muốn dùng giá trị dự phòng khi gặp null hoặc undefined, hãy dùng toán tử nullish coalescing ?? thay thế. Toán tử này được trình bày trong một bài riêng.

Bảng tra nhanh

// Falsy - all eight:
Boolean(false);     // false
Boolean(0);         // false
Boolean(-0);        // false
Boolean(0n);        // false
Boolean("");        // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false

// Truthy - everything else:
Boolean("0");       // true
Boolean("false");   // true
Boolean([]);        // true
Boolean({});        // true
Boolean(() => {});  // true
Boolean(Infinity);  // true
Boolean(-Infinity); // true

In nó ra, dán lên màn hình, rồi cứ thế mà tiếp tục.

Tiếp theo: iterator và generator

Khi đã nắm vững câu lệnh điều kiện và vòng lặp, chương tiếp theo sẽ xem JavaScript cho phép các giá trị tự tạo ra theo yêu cầu như thế nào. Iterator và generator là bộ máy đứng sau for...of, toán tử spread và rất nhiều API hiện đại, và đó là nội dung tiếp theo.