JavaScript - Optional Chaining

Xin chào các bạn lập trình tương lai! ? Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của Optional Chaining. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người bạn thân thiện dẫn đường, và chúng ta sẽ cùng nhau bước từng bước. Cuối bài học này, bạn sẽ chaining như một chuyên gia! Hãy cùng bắt đầu!

Vấn đề thuộc tính không tồn tại

Hãy tưởng tượng bạn đang cố tìm một cuốn sách trong một thư viện khổng lồ. Bạn biết nó nên ở phần "Khoa học viễn tưởng", tầng ba, góc sau. Nhưng nếu thư viện không có tầng ba? Hoặc nếu không có phần "Khoa học viễn tưởng"? Đó là loại vấn đề chúng ta thường gặp trong JavaScript khi làm việc với các đối tượng嵌套.

Hãy xem một ví dụ:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

Nếu bạn chạy đoạn mã này, bạn sẽ gặp lỗi: "Cannot read property 'books' of undefined". Tại sao? Bởi vì library.fiction.sciFi không tồn tại! Đây là nơi Optional Chaining đến để cứu nguy.

Optional Chaining là gì trong JavaScript?

Optional Chaining giống như một mạng an toàn cho mã của bạn. Nó cho phép bạn truy cập vào các thuộc tính đối tượng嵌套 mà không cần lo lắng nếu các thuộc tính trung gian tồn tại. Nó được biểu thị bằng toán tử ?..

Hãy viết lại ví dụ trước với Optional Chaining:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

Bây giờ, thay vì ném lỗi, đoạn mã này sẽ trả về undefined. Giống như hỏi, "Nếu sciFi tồn tại, bạn có thể cho tôi books của nó không? Nếu không, không sao!"

Optional Chaining với các cuộc gọi hàm

Optional Chaining không chỉ dành cho thuộc tính đối tượng. Bạn có thể sử dụng nó với các cuộc gọi hàm nữa! Hãy tưởng tượng chúng ta có một hệ thống thư viện nơi các sách có thể được mượn:

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Checking out ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

Trong ví dụ này, 'The Hobbit' sẽ được mượn, nhưng không có gì sẽ xảy ra với 'Dune' vì sciFi không tồn tại. Không lỗi, chỉ có cuộc hành trình mượt mà!

Optional Chaining với biểu thức

Bạn cũng có thể sử dụng Optional Chaining với ký hiệu vuông. Điều này rất hữu ích khi các tên thuộc tính của bạn là động hoặc chứa các ký tự đặc biệt:

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

Điều này sẽ trả về undefined vì không có người dùng với ID '789', nhưng nó sẽ không ném lỗi.

Optional Chaining với toán tử "delete"

Toán tử delete cũng có thể được sử dụng với Optional Chaining. Điều này rất tiện dụng khi bạn muốn xóa một thuộc tính có thể không tồn tại:

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

Lệnh delete đầu tiên sẽ hoạt động như mong đợi, xóa innerProp. Lệnh thứ hai sẽ không làm gì, nhưng không ném lỗi.

Short-circuiting với Optional Chaining

Optional Chaining có một tính năng thú vị叫做 short-circuiting. Nếu phần trái của ?. là null hoặc undefined, việc đánh giá sẽ dừng lại và trả về undefined:

const obj = null;
console.log(obj?.prop?.subProp);  // Trả về undefined

Điều này rất hữu ích để tránh những lỗi "Cannot read property of null"!

Toán tử Nullish Coalescing với Optional Chaining

Toán tử Nullish Coalescing (??) hoạt động rất tốt với Optional Chaining. Nó cho phép bạn cung cấp một giá trị mặc định nếu kết quả của Optional Chaining là null hoặc undefined:

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'unemployed');  // Trả về 'unemployed'
console.log(user.details?.age ?? 'unknown');     // Trả về 30

Điều này rất tuyệt vời để cung cấp các giá trị mặc định khi các thuộc tính có thể không tồn tại.

Dưới đây là bảng tóm tắt các phương pháp chúng ta đã xem xét:

Phương pháp	Cú pháp	Mô tả
Truy cập thuộc tính	obj?.prop	An toàn truy cập thuộc tính đối tượng嵌套
Cuộc gọi hàm	func?.()	An toàn gọi hàm có thể không tồn tại
Biểu thức	obj?.[expr]	An toàn truy cập thuộc tính với tên động hoặc ký tự đặc biệt
Toán tử "delete"	delete obj?.prop	An toàn xóa thuộc tính có thể không tồn tại
Short-circuiting	obj?.prop?.subProp	Dừng đánh giá nếu bất kỳ phần nào là null hoặc undefined
Với Nullish Coalescing	obj?.prop ?? defaultValue	Cung cấp giá trị mặc định cho kết quả null hoặc undefined

Và thế là bạn đã nâng cấp kỹ năng JavaScript của mình với Optional Chaining. Nhớ rằng, lập trình giống như xây dựng với LEGO - bắt đầu từ cơ bản, và trước khi bạn biết điều đó, bạn sẽ tạo ra những kiệt tác. Hãy tiếp tục luyện tập, 保持好奇心, và chúc mừng lập trình! ??‍??‍?

Credits: Image by storyset