Giới thiệu

Optional chaining là một tính năng mới được giới thiệu trong JavaScript (JS) từ phiên bản ES2020. Tính năng này giúp đơn giản hóa việc truy cập các thuộc tính hoặc phương thức của một đối tượng mà có thể không tồn tại hoặc bị trống.

Trước khi có optional chaining, khi ta muốn truy cập một thuộc tính hay phương thức của một đối tượng, ta thường phải kiểm tra xem đối tượng đó có tồn tại hay không. Nếu không tồn tại, ta phải sử dụng các điều kiện để tránh lỗi. Điều này dẫn đến việc viết mã dài, khó đọc và phức tạp.

Optional chaining giúp ta giải quyết vấn đề này bằng cách cho phép ta truy cập các thuộc tính hoặc phương thức theo chuỗi mà không cần phải kiểm tra từng bước. Nếu một bước trong chuỗi không tồn tại hoặc bị trống, optional chaining sẽ trả về giá trị undefined thay vì gây lỗi.

Cú pháp của Optional chaining là .?

Ví dụ

Dưới đây là một ví dụ minh họa về cách sử dụng optional chaining trong JS:

const user = {
  name: 'John',
  address: {
    city: 'New York',
    street: '123 Main Street'
  },
  hobbies: ['reading', 'painting']
};

// Truy cập thuộc tính name của đối tượng user
console.log(user?.name); // Output: 'John'

// Truy cập thuộc tính không tồn tại
console.log(user?.age); // Output: undefined

// Truy cập thuộc tính của đối tượng con
console.log(user?.address?.city); // Output: 'New York'

// Truy cập phương thức của đối tượng
console.log(user?.hobbies?.join(', ')); // Output: 'reading, painting'

// Truy cập phương thức không tồn tại
console.log(user?.getFullName?.()); // Output: undefined

Như bạn có thể thấy trong ví dụ trên, ta sử dụng toán tử ?. để truy cập các thuộc tính hoặc phương thức của đối tượng user. Nếu một bước trong chuỗi không tồn tại, kết quả trả về là undefined.

Optional chaining giúp ta viết mã ngắn gọn hơn và dễ đọc hơn. Nó cũng làm giảm khả năng xảy ra lỗi khi truy cập các thuộc tính hay phương thức của một đối tượng.