Mục đích của toán tử Nullish Coalescing là gì?

Question

Trần Trưởng · Accepted Answer

Toán tử Nullish Coalescing (??) trong TypeScript được giới thiệu để xử lý các giá trị null và undefined một cách an toàn và rõ ràng. Toán tử này giúp cung cấp một giá trị mặc định trong trường hợp biến có giá trị là null hoặc undefined, đồng thời cho phép giữ nguyên các giá trị khác (ví dụ: 0, false, "", v.v.), vốn có thể bị coi là &#8220;falsy&#8221; trong một số ngữ cảnh.
1. Định Nghĩa Toán Tử Nullish Coalescing
Toán tử Nullish Coalescing có cú pháp là ??. Nó hoạt động tương tự như toán tử OR (||), nhưng chỉ kiểm tra hai trường hợp cụ thể là null và undefined. Điều này có nghĩa là nếu biểu thức bên trái của toán tử là null hoặc undefined, thì giá trị mặc định (biểu thức bên phải) sẽ được trả về. Nếu không, giá trị bên trái sẽ được giữ nguyên.
Cú pháp:
const result = value ?? defaultValue;
Nếu value là null hoặc undefined, defaultValue sẽ được trả về.
Nếu value không phải là null hay undefined (bao gồm cả 0, false, "",&#8230;), value sẽ được giữ nguyên.
2. Tại Sao Nên Sử Dụng Nullish Coalescing?
2.1. Tránh Nhầm Lẫn Với Giá Trị &#8220;Falsy&#8221;
Trong JavaScript và TypeScript, các giá trị như 0, false, NaN, "" (chuỗi rỗng) đều được coi là &#8220;falsy&#8221; khi sử dụng với toán tử OR (||). Điều này có thể dẫn đến các tình huống không mong muốn khi các giá trị hợp lệ như 0 hoặc false bị thay thế bằng giá trị mặc định.
Toán tử Nullish Coalescing giúp bạn giải quyết vấn đề này, bằng cách chỉ kiểm tra null và undefined.
Ví dụ với toán tử OR (||):
const value = 0;
const result = value || 42;
console.log(result); // Kết quả: 42
Trong ví dụ trên, giá trị 0 bị coi là &#8220;falsy&#8221;, nên kết quả trả về là 42, mặc dù 0 là một giá trị hợp lệ.
Ví dụ với toán tử Nullish Coalescing (??):
const value = 0;
const result = value ?? 42;
console.log(result); // Kết quả: 0
Với toán tử ??, giá trị 0 được giữ nguyên vì nó không phải là null hoặc undefined.
2.2. Xử Lý An Toàn Các Giá Trị null và undefined
Nullish Coalescing được thiết kế đặc biệt để xử lý các giá trị null và undefined một cách hiệu quả, giúp bạn tránh lỗi khi làm việc với các biến chưa được khởi tạo hoặc nhận giá trị từ các nguồn không xác định.
Ví dụ:
function getUserName(user?: { name?: string }): string {
    return user?.name ?? "Guest";
}
console.log(getUserName()); // Kết quả: Guest
console.log(getUserName({})); // Kết quả: Guest
console.log(getUserName({ name: "Alice" })); // Kết quả: Alice
Trong ví dụ này, nếu thuộc tính name của user là undefined hoặc nếu user không tồn tại, hàm sẽ trả về "Guest". Điều này giúp đảm bảo rằng hàm luôn trả về một giá trị hợp lệ.
3. Sử Dụng Nullish Coalescing Kết Hợp Với Optional Chaining
Nullish Coalescing thường được sử dụng kết hợp với Optional Chaining (?.) để xử lý các đối tượng hoặc thuộc tính có thể không tồn tại. Optional Chaining giúp bạn tránh lỗi khi truy cập các thuộc tính của đối tượng có thể là null hoặc undefined, còn Nullish Coalescing cung cấp giá trị mặc định nếu kết quả là null hoặc undefined.
Ví dụ kết hợp:
const user = {
    name: "Alice",
    age: 30
};
const displayName = user?.name ?? "Anonymous";
console.log(displayName); // Kết quả: Alice
const userWithoutName = {
    age: 25
};
const displayName2 = userWithoutName?.name ?? "Anonymous";
console.log(displayName2); // Kết quả: Anonymous
Trong ví dụ trên, nếu thuộc tính name không tồn tại trong đối tượng user, giá trị "Anonymous" sẽ được sử dụng thay thế.
4. Kết Luận
Toán tử Nullish Coalescing (??) trong TypeScript là một công cụ hữu ích để xử lý các giá trị null và undefined một cách an toàn và chính xác. Nó cho phép bạn cung cấp giá trị mặc định trong các trường hợp cần thiết, mà không làm ảnh hưởng đến các giá trị hợp lệ khác như 0, false, hoặc "". Khi được kết hợp với Optional Chaining, Nullish Coalescing giúp tạo ra mã dễ đọc và ít lỗi hơn khi xử lý các đối tượng phức tạp.