Khác nhau giữa toán tử nullish coalescing (??) và logical OR (||) trong JS

Khi học JS mình chắc chắn các bạn sẽ có câu hỏi làm thế nào để gán giá trị default nếu như giá trị mong muốn bị "null" hoặc "undefined". Cách đây vài năm, tìm hiểu thì hẳn các bạn sẽ thấy người ta dùng toán tử logical "OR" (||) để làm điều đó, hoặc chuối hơn là dùng "if/else" phải không nào.

Chú ếch ngốc nghếch

Tao thấy mày hay dùng cái ?? với cái ||. Nó là gì thế mày?

Jos Hoàng Tiên

Nó là Nullish Coalescing và Logical OR. Nếu không biết thì hãy xem chi tiết sau đây...

Khi học JS mình chắc chắn các bạn sẽ có câu hỏi làm thế nào để gán giá trị default nếu như giá trị mong muốn bị null hoặc undefined. Cách đây vài năm, tìm hiểu thì hẳn các bạn sẽ thấy người ta dùng toán tử logical OR (||) để làm điều đó, hoặc chuối hơn là dùng if/else phải không nào. Ví dụ dùng logical OR (||):

var defaultValue = 'Javascript Program';

function getProgramName() {
  var value;

  return value || defaultValue;
}

console.log(getProgramName()); // 'Javascript Program'
  

Hoặc cách cực kỳ chuối, check if/else:

var defaultValue = 'Javascript Program';

// ví dụ thôi nhá, đừng dùng cách này
function getProgramName() {
  var value;

  // nếu value không có gía trị thì lấy default
  if (value === null || value === undefined) {
    return defaultValue;
  }

  return value;
}

console.log(getProgramName()); // 'Javascript Program'
  

Còn ở thời nay, xịn xò hơn bạn đã có toán tử nullish coalescing (??). Ví dụ:

var defaultValue = 'Javascript Program';

function getProgramName() {
  var value;

  return value ?? defaultValue;
}

console.log(getProgramName()); // 'Javascript Program'
  

Vậy câu hỏi đặt ra, cả hai toán tử || và ?? như nhau vậy cần gì JS hỗ trợ thêm cái ?? làm chi.

Định nghĩa ??

Theo như MDN docs viết:

"The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand."

Nghĩa là toán tử sẽ trả về giá trị phía bên phải nếu giá trị phía bên trái là null hoặc undefined, ngược lại sẽ trả về phía bên trái.

Khác biệt ?? và ||

Về cơ bản ?? và || mục đích như nhau, nhưng với || sẽ "thêm thắt" đôi chút.

Toán tử || sẽ trả về giá trị phía bên phải nếu giá trị phía bên trái là falsy, không chỉ có null/undefined như ??.

Về falsy chỉ cần nhớ, có 8 giá trị mà khi biên dịch JS sẽ cho đó là false:

• false
• undefined
• null
• NaN
• 0
• -0
• 0n
• '' (empty string)

Vì vậy khi dùng toán tử || nó sẽ trả về giá trị bên phải trong trường hợp vế trái rơi vào 8 trường hợp trên (toán tử ?? chỉ có 2 trường hợp). Ví dụ:

var defaultValue = 10;
var value = 0;

console.log(value || defaultValue); // in ra 10

console.log(value ?? defaultValue); // in ra 0

// ...các bạn ví dụ thêm với các giá trị trên sẽ thấy
  

Vì vậy JS hỗ trợ toán tử mới ?? để tránh những case này, làm cho code work theo ý muốn hơn.

Bonus

Bạn có thể sử dụng kết hợp toán tử optional chaining (?.) và nullish coalescing (??) cùng nhau. Ví dụ:

var defaultValue = 'Javascript Program';
var obj = {
  program: null
};

console.log(obj.program?.name ?? defaultValue); // 'Javascript Program'
  

Như vậy sẽ trông pro hơn hẳn.

Kết luận

Thực ra nếu bạn là C# developer bạn sẽ thấy ôi, C# cũng có ?? vậy không lẽ mấy bác Microsoft mượn idea? Không đâu, thực ra ngược lại mới đúng, JS mượn idea ?? từ C# đó.

Tóm lại:

• ?? chỉ check 2 trường hợp duy nhất null và undefined
• Còn || sẽ check falsy (8 trường hợp)
• Sử dụng ?? sẽ tránh check nhiều điều kiện không mong đợi, tránh lỗi trên trời rơi xuống, recommend hơn.