0
0
Posts
Techmely
Techmely techmely

Optional Chaining trong JavaScript

Đăng vào 3 months ago

• 2 phút đọc

Chủ đề:

Javascript

Optional Chaining là một tính năng hữu ích trong JavaScript, giúp việc truy cập vào các thuộc tính của đối tượng trở nên an toàn hơn bằng cách tự động kiểm tra giá trị null hoặc undefined trước khi truy cập vào thuộc tính tiếp theo. Điều này giúp giảm thiểu rủi ro gặp phải lỗi khi truy cập vào thuộc tính của một đối tượng không tồn tại.

Giới thiệu

Trong quá trình phát triển ứng dụng JavaScript, việc truy cập vào các thuộc tính của đối tượng mà không chắc chắn rằng đối tượng đó hoặc các thuộc tính trung gian có tồn tại hay không thường xuyên dẫn đến lỗi. Để giải quyết vấn đề này, Optional Chaining được đề xuất và đã trở thành một phần của tiêu chuẩn ECMAScript 2020 (ES11)

Cú pháp

Cú pháp của Optional Chaining là sử dụng dấu ?. thay vì chỉ dùng dấu . để truy cập thuộc tính. Nếu phần trước của ?.null hoặc undefined, biểu thức sẽ trả về undefined ngay lập tức mà không gây ra lỗi

Ví dụ:

let user = { name: "John", details: { age: 30 } };

let userAge = user.details?.age; // 30
let userLocation = user.details?.location; // undefined

Ưu điểm

  • Giảm thiểu lỗi: Giảm thiểu rủi ro gặp phải lỗi khi truy cập vào thuộc tính của một đối tượng không tồn tại.
  • Code sạch và ngắn gọn: Giúp code trở nên sạch đẹp và ngắn gọn hơn, dễ đọc và bảo trì

Sử dụng trong thực tế

Optional Chaining rất hữu ích trong các tình huống như khi làm việc với dữ liệu API có cấu trúc phức tạp, hoặc khi truy cập vào các thuộc tính của đối tượng có thể không tồn tại trong một số trường hợp

So sánh với cách khác

Trước khi có Optional Chaining, để tránh lỗi khi truy cập vào thuộc tính không tồn tại, chúng ta thường phải sử dụng các cấu trúc kiểm tra điều kiện như if hoặc toán tử && để kiểm tra từng thuộc tính trung gian. Tuy nhiên, cách làm này khiến code trở nên rườm rà và khó đọc hơn

Optional Chaining giúp giải quyết vấn đề này một cách hiệu quả, giúp code gọn gàng và dễ hiểu hơn.

Gợi ý câu hỏi phỏng vấn
entry

So sánh ===== trong Javascript?

entry

Sự khác biệt của biến dùng var, letconst trong javascript là gì?

entry

Sự khác nhau giữa nullundefined trong Javascript?

entry

Javascript có các kiểu dữ liệu nào? Bạn biết gì về chúng

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào