Làm rõ sự khác biệt giữa toán tử ?? và || trong JavaScript

JavaScript cung cấp 2 công cụ vô cùng mạnh mẽ hỗ trợ trong việc viết code, đó là toán tử OR (||) và toán tử hợp nhất nullish (??). Tuy nhiên không có nhiều người hiểu được ý nghĩa và sự khác biệt của hai loại toán tử này. Hãy cùng đi sâu vào tìm hiểu trong bài viết này nhé.

Hiểu rõ về toán tử OR (||)

1. Cách hoạt động

Toán tử logic OR (||) được sử dụng để kết hợp hai giá trị boolean. Nó trả về giá trị true nếu ít nhất một trong các giá trị là true. Tuy nhiên, trong JavaScript, nó có công dụng rộng hơn, đó là nó có thể sử dụng với bất kỳ kiểu dữ liệu nào.

Khi được sử dụng trong các biểu thức có giá trị không phải boolean, toán tử OR sẽ trả về giá trị đúng đầu tiên mà nó gặp phải. Nếu tất cả các giá trị đều là false, nó sẽ trả về giá trị cuối cùng được ghi nhận.

2. Các dạng kết quả trả về

Toán tử logic OR (||) sẽ trả về các kết quả ở vế bên phải tùy thuộc vào vế bên trái như sau:

• Vế bên trái là false
• Vế bên trái là null
• Vế bên trái là undefined
• Vế bên trái là 0
• Vế bên trái là một chuỗi trống (" ")
• Vế bên trái là NaN (Not a Number)

Ví dụ:

let x = 0;
let y = "hello";
let z = null;
 
console.log(x || "default"); // Output: "default" (x is falsy)
console.log(y || "default"); // Output: "hello" (y is truthy)
console.log(z || "default"); // Output: "default" (z is null, which is falsy)

Hiểu rõ về toán tử nullish (??)

1. Cách hoạt động

Toán tử hợp nhất (??) là một bổ sung mới mẻ cho JavaScript. Nó cung cấp một cách để kiểm tra xem giá trị có phải là null hoặc undefined hay không. Nếu đúng, nó trả về kết quả vế bên phải. Nếu không, nó trả về kết quả vế bên trái.

2. Các dạng kết quả trả về

Toán tử hợp nhất nullish sẽ chỉ trả về kết quả vế bên phải nếu vế bên trái là:

• null
• undefined

Ví dụ:

let x = 0;
let y = null;
let z = "hello";
 
console.log(x ?? "default"); // Output: 0 (x is not null or undefined)
console.log(y ?? "default"); // Output: "default" (y is null)
console.log(z ?? "default"); // Output: "hello" (z is not null or undefined)

Trong khi toán tử OR (||) coi nhiều giá trị là false, thì toán tử hợp nhất nullish (??) chỉ kiểm tra null hoặc undefined mà thôi. Điều này làm cho nó cụ thể hơn trong hành vi của nó.

Vậy thì sự khác biệt lớn nhất giữa || và ?? là gì?

1. Khi nào nên sử dụng toán tử OR (||)

Sử dụng toán tử này khi bạn muốn cung cấp giá trị mặc định cho bất kỳ giá trị false nào (bao gồm 0, '', false).

Ví dụ:

let age = 0;
let defaultAge = 18;
let finalAge = age || defaultAge; // finalAge will be 18

2. Khi nào nên sử dụng toán tử nullish (??)

Sử dụng toán tử này khi bạn chỉ muốn xử lý các giá trị null hoặc undefined.

Ví dụ:

let user = null;
let defaultUser = { name: 'Guest' };
let finalUser = user ?? defaultUser; // finalUser will be { name: 'Guest' }

Một số ví dụ sử dụng (||) và (??) thực tế

1. Ví dụ về sử dụng (||)

Ví dụ 1: Giá trị mặc định cho các tham số tùy chọn

function greet(name) {
  console.log(`Hello, ${name || 'stranger'}!`);
}
 
greet('Alice'); // Output: Hello, Alice!
greet(); // Output: Hello, stranger!

Ví dụ 2: Đoản mạch cho hàm logic có điều kiện

const user = { name: 'Bob' };
const greeting = user && user.name ? `Hello, ${user.name}!` : 'Hello!';
console.log(greeting); // Output: Hello,Scenario: Short-circuiting for conditional logicBob!

2. Ví dụ về sử dụng (??)

Ví dụ 1: Xử lý các thuộc tính tùy chọn

const user = { name: 'Charlie' };
const fullName = user?.name ?? 'Unknown';
console.log(fullName); // Output: Charlie
 
const emptyUser = {};
const emptyUserName = emptyUser?.name ?? 'Unknown';
console.log(emptyUserName); // Output: Unknown

Ví dụ 2: Giá trị mặc định cho chuỗi tùy chọn

const address = { street: '123 Main St' };
const street = address?.street ?? 'No street information';
console.log(street); // Output: 123 Main St
 
const noAddress = null;
const noStreet = noAddress?.street ?? 'No address';
console.log(noStreet); // Output: No address

Kết luận

Các toán tử logic OR (||) và nullish (??) là những công cụ hữu ích trong kho vũ khí của nhà phát triển JavaScript để cung cấp các giá trị mặc định. Mặc dù chúng có vẻ giống nhau, nhưng việc hiểu các hành vi riêng biệt của chúng là rất quan trọng để viết ra các đoạn code rõ ràng, hiệu quả và có thể dự đoán được.

Toán tử OR rất linh hoạt và có thể xử lý nhiều giá trị false khác nhau, khiến nó phù hợp để cung cấp giá trị mặc định trong nhiều tình huống khác nhau. Tuy nhiên, hành vi của nó với các giá trị false khác ngoài null hoặc undefined đôi khi có thể dẫn đến kết quả không mong muốn.

Mặt khác, toán tử hợp nhất nullish cụ thể hơn, chỉ tập trung vào các giá trị null hoặc undefined. Điều này làm cho nó lý tưởng để xử lý các thuộc tính tùy chọn và tránh hậu quả không mong muốn với các giá trị false khác.

Cảm ơn các bạn đã theo dõi bài viết vừa rồi!