Giới Thiệu về Toán Tử Nullish Coalescing trong JavaScript

Toán tử Nullish Coalescing, được giới thiệu trong tiêu chuẩn ES 2020 của JavaScript, là một phần quan trọng trong việc xử lý các giá trị null và undefined. Bài viết này sẽ giúp bạn hiểu rõ về cách hoạt động của toán tử này và cách ứng dụng nó trong lập trình.

Toán Tử Logic trong JavaScript

JavaScript có nhiều toán tử logic, trong đó có bốn toán tử chính: AND (&&), OR (||), NOT (!), và Nullish Coalescing (??). Tuy những toán tử này đều dùng để thực hiện các phép toán logic nhưng cách chúng xử lý giá trị đầu vào lại khác nhau.

Khái Niệm Giá Trị Nullish

Giá trị nullish trong JavaScript chỉ bao gồm hai giá trị: null và undefined. Những giá trị này đều thuộc nhóm giá trị falsy, nhưng không phải tất cả các giá trị falsy đều là nullish. Việc hiểu rõ về giá trị null và undefined là rất quan trọng khi làm việc với toán tử Nullish Coalescing.

Coalescing và Short-Circuiting

1. Coalescing là gì?
   Coalescing có nghĩa là hợp nhất các giá trị lại với nhau để tạo ra một giá trị duy nhất. Trong lập trình, điều này đồng nghĩa với việc lựa chọn một giá trị hợp lệ từ số nhiều giá trị được cung cấp.

2. Short-Circuiting là gì?
   Short-circuiting xảy ra khi trình thông dịch thực thi một biểu thức boolean và bỏ qua phần không liên quan của biểu thức đó. Điều này giúp tối ưu hóa hiệu suất xử lý.

Cách Thức Hoạt Động của Toán Tử Nullish Coalescing

Toán tử Nullish Coalescing hoạt động bằng cách kiểm tra toán hạng đầu tiên (bên trái):

operand1 ?? operand2

• Nếu operand1 không phải là null hoặc undefined, toán tử sẽ trả về giá trị của nó.
• Nếu operand1 là null hoặc undefined, toán tử sẽ trả về operand2.

Ví Dụ Cụ Thể

Hãy cùng xem xét một ví dụ:

function getValue1() {
  return null;
}

const value2 = 4 * 5;
const result = getValue1() ?? value2;
console.log(result); // 20

Trong ví dụ trên, getValue1() trả về null, nên result sẽ nhận giá trị của value2, tức là 20.

Một ví dụ khác để làm rõ:

function getValue1() {
  console.log("getValue1");
  return false;
}

function getValue2() {
  console.log("getValue2");
  return "Dillion";
}

const result = getValue1() ?? getValue2();
console.log(result); // false

Tại đây, getValue1() không trả về null hay undefined, mà là false, vì vậy result nhận giá trị của getValue1(), trong khi getValue2() không hề được thực thi.

So Sánh Giữa Toán Tử Nullish và Toán Tử OR

Toán tử Nullish Coalescing và toán tử OR (||) có sự khác nhau lớn trong cách xử lý giá trị:

• Toán tử OR trả về giá trị truthy đầu tiên, trong khi toán tử Nullish Coalescing chỉ kiểm tra các giá trị null hoặc undefined.

Ví Dụ Với Toán Tử OR

const val1 = "";
const val2 = "Dillion";
const result = val1 || val2;
console.log(result); // "Dillion"

Ví Dụ Với Toán Tử Nullish

const val1 = undefined;
const val2 = "Dillion";
const result = val1 ?? val2;
console.log(result); // "Dillion"

Kết Hợp Toán Tử Nullish với AND / OR

Bạn không thể trực tiếp kết hợp toán tử Nullish với toán tử AND và OR mà không sử dụng dấu ngoặc đơn. Điều này có thể dẫn đến lỗi cú pháp. Chúng ta cần phải nhóm các biểu thức để tránh gặp phải lỗi này.

Kết Luận

Toán tử Nullish Coalescing là một công cụ mạnh mẽ giúp bạn dễ dàng xử lý các giá trị mặc định trong JavaScript. Việc hiểu rõ và ứng dụng toán tử này sẽ giúp bạn viết code sạch hơn, rõ ràng hơn và hiệu quả hơn trong các dự án của mình. Cảm ơn bạn đã theo dõi bài viết này.
source: viblo