Nullish Coalescing Operator (??) và Optional Chaining (?.) trong JavaScript

Trong lập trình JavaScript, việc xử lý các giá trị null và undefined luôn là một thách thức. Để giải quyết vấn đề này, ECMAScript 2020 đã giới thiệu hai toán tử mới: Nullish Coalescing Operator (??) và Optional Chaining (?.). Hai toán tử này giúp các nhà phát triển viết mã ngắn gọn và an toàn hơn khi làm việc với các giá trị có thể không được định nghĩa.

Nullish Coalescing Operator (??)

Định nghĩa

Nullish Coalescing Operator là một toán tử logic điều kiện, trả về giá trị bên phải của phép toán nếu giá trị bên trái là null hoặc undefined. Nếu không, toán tử sẽ trả về giá trị bên trái. Cú pháp của nó rất đơn giản:

javascript Copy

result = value1 ?? value2;

Ví dụ Sử Dụng

Giả sử bạn có một biến userInput có thể nhận giá trị null hoặc undefined nếu người dùng không nhập gì. Bạn muốn đảm bảo rằng biến output sẽ có giá trị mặc định là "No input" nếu userInput không được định nghĩa:

javascript Copy

let userInput = null;
let output = userInput ?? "No input";
console.log(output); // "No input"

Trong trường hợp này, output sẽ nhận giá trị "No input" vì userInput là null. Nếu userInput có giá trị khác null hoặc undefined, giá trị đó sẽ được gán cho output.

So sánh với Toán tử OR (||)

Toán tử OR (||) cũng thường được sử dụng để cung cấp giá trị mặc định cho biến. Tuy nhiên, nó coi bất kỳ giá trị "falsy" nào như 0, false, hoặc chuỗi rỗng "" là không hợp lệ và sẽ trả về giá trị bên phải. Điều này có thể dẫn đến lỗi logic nếu các giá trị falsy là hợp lệ trong ứng dụng của bạn. Ví dụ:

javascript Copy

let count = 0;
let total = count || 10;
console.log(total); // 10

Ở đây, dù count được định nghĩa là 0, toán tử OR vẫn trả về 10 vì 0 là một giá trị falsy.

Optional Chaining (?.)

Định nghĩa

Optional Chaining là một tính năng cho phép bạn truy cập an toàn vào các thuộc tính của một đối tượng mà không cần kiểm tra từng bước một xem đối tượng đó có tồn tại hay không. Nếu bất kỳ phần nào của chuỗi truy cập bị null hoặc undefined, toàn bộ chuỗi truy cập sẽ trả về undefined.

Ví dụ Sử Dụng

Giả sử bạn có một đối tượng user mà có thể không có thuộc tính address hoặc zipCode. Để tránh lỗi khi truy cập user.address.zipCode, bạn có thể sử dụng Optional Chaining:

javascript Copy

let user = {
    name: "Alice",
    address: null
};

let zipCode = user?.address?.zipCode;
console.log(zipCode); // undefined

Trong ví dụ này, zipCode sẽ là undefined vì user.address là null. Không có lỗi nào được sinh ra khi truy cập zipCode.

Kết hợp Nullish Coalescing và Optional Chaining

Bạn có thể kết hợp hai toán tử này để xử lý các trường hợp phức tạp hơn:

javascript Copy

let user = {
    name: "Alice",
    address: null
};

let zipCode = user?.address?.zipCode ?? "No zip code";
console.log(zipCode); // "No zip code"

Ở đây, zipCode sẽ nhận giá trị "No zip code" vì user.address là null và do đó user?.address?.zipCode trả về undefined.

Kết luận

Nullish Coalescing và Optional Chaining là hai tính năng hữu ích trong JavaScript giúp bạn xử lý các giá trị null và undefined một cách an toàn và hiệu quả. Chúng giúp làm sạch mã nguồn và giảm thiểu rủi ro của các lỗi runtime do truy cập vào các thuộc tính không tồn tại. Sử dụng chúng một cách phù hợp sẽ giúp bạn tạo ra các ứng dụng web robust hơn.

Nullish Coalescing Operator (??) và Optional Chaining (?.) trong JavaScript