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
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
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
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
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
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.