Nullish coalescing operator là gì?

Trong Javascript, toán tử nullish coalescing (nullish coalescing operator) "??" trả về (return) giá trị bên phải khi giá trị bên trái của nó là null hoặc không undefined, nếu không, nó trả về giá trị bên trái.

let a = null;
let b = undefined;
let c = 10;

let d = a ?? b ?? c;
console.log(d); // 10 

Chúng ta có thể viết lại a ?? b là:

(a !== null && a !== undefined) ? a : b;

Nếu giá trị bên trái chứa bất kỳ thứ gì khác ngoài null hoặc undefined, thì ?? trả về giá trị bên trái. Nếu giá trị bên trái là 0, NaN hoặc chuỗi rỗng (empty string), nó được coi là giá trị hợp lệ (valid value) và ?? trả về giá trị bên trái 0.

Ví dụ:

let zero = 0;
console.log( zero ?? 1) ; // 0

let emptyString='';
console.log( emptyString ?? "non-empty") ; // ''

let nan = NaN;
console.log( nan ?? 0) ; // NaN

Từ ví dụ trên, chúng ta có thể thấy rằng ?? chỉ trả về giá trị bên phải nếu giá trị bên trái là null hoặc undefined.

Độ ưu tiên toán tử (operator precedence)

Vì mức độ ưu tiên của toán tử +, *, /, **, v.v., cao hơn ??, nên toán tử ?? được đánh giá (evaluate) sau các phép toán như +, *, / và, ** `. Điều này được hiển thị bên dưới:

let a; let b;
let c = a ?? 10 * b ?? 10; 

Chúng ta muốn đặt 10 làm giá trị mặc định của a và b trong biểu thức (expression) trên nếu a và b là undefined. Tuy nhiên, đoạn mã trên trước tiên sẽ đánh giá thành 10 * b và sau đó ?? bởi vì * có nhiều độ ưu tiên hơn ??.

Để tránh trường hợp trên, chúng ta nên thêm dấu ngoặc đơn (parentheses) vào dấu ?? Thay vào đó, biểu thức trên phải được viết thành:

let a; let b;
let c = (a ?? 10) * (b ?? 10);
c; // 100

Kết hợp AND / OR với ??

SyntaxError sẽ được tạo ra (throw) khi chúng ta kết hợp cả hai toán tử AND (&&) và OR (||) với ?? và không có dấu ngoặc đơn.

// correct way
let a = (0 || undefined) ?? 10; // 10
// incorrect way 

let a = 0 || undefined ?? 10; // this will throw error

Kết luận

• Toán tử ?? trả về giá trị bên phải khi giá trị bên trái của nó là null hoặc undefined, nếu không nó trả về giá trị bên trái.
• Độ ưu tiên của dấu ?? thấp hơn một số toán tử, vì vậy chúng ta nên sử dụng dấu ngoặc đơn khi sử dụng ?? trong một biểu thức có các toán tử có độ ưu tiên cao hơn của ??.
• Chúng ta không thể sử dụng ?? với && và || trực tiếp. Tuy nhiên, bằng cách bao gồm dấu ?? bên trong dấu ngoặc, chúng ta có thể kết hợp ?? với && và ||.