TÍNH NĂNG NỔI BẬT TRONG JAVASCIPT BẠN CẦN BIẾT
Nội dung chính
Optional chaining là một kỹ thuật giúp ta làm việc với Javascript dễ dàng hơn. Nó cũng cần thiết như Fat Arrow Functions hoặc ‘let’ và ‘const’. Thế Option Chaining hoạt động ra sao? nó giải quyết những vấn đề gì? Hãy cùng Hybrid Technologies nghiên cứu để hiểu rõ hơn nhé.
Đặt vấn đề
Hãy tưởng tượng: Bạn lấy data từ API, và object trả về dạng Deeply Nested Objects, lúc này ta cần phải thông qua rất nhiều object properties để lấy được properties trong cùng.
Với cách trên thì việc lấy firstName thật sự không tốt. Một giải pháp tốt hơn có thể như thế này:
Giải pháp
Optional chaining là giải pháp cho tất cả vấn đề đó.
1. Cách thức hoạt động
Optional chaining giới thiệu cú pháp mới mà thoạt nhìn sẽ lạ đối với bạn, nhưng chỉ sau vài phút bạn sẽ quen với nó.
Như ở ví dụ bên trên, ta thấy xuất hiện cú pháp ?. Nếu có một cú pháp ?. đặt trước person, tức là ta đang kiểm tra xem person đó có tồn tại hay không? Hoặc trong nhiều trường hợp person có giá trị null hoặc undefined thì sao? Lúc này sẽ không return về error mà chỉ trả về undefined. Vì thế, personFirstName sẽ có giá trị undefined. Câu hỏi cũng tương tự cho detail? và name? Nếu có bất kì thuộc tính cha nào có giá trị null hoặc undefined, thì personFirstName sẽ trả về undefined. Đây được gọi là Short-circuiting. Khi javascript tìm thấy null hoặc undefined, nó sẽ short circuit và ngừng đi sâu hơn.
2. Default values
Chúng ta cần tìm hiểu về Nullish coalescing operator . Nghe có vẻ khó học đây. Hi thật sự không khó lắm đâu. Hãy xem ví dụ bên dưới:
Cú pháp Nullish coalescing operator biểu diễn dưới dạng ?? Nó cũng khá dễ đọc. Nếu bên vế trái có giá trị undefined, khi đó personFirstName sẽ có giá trị bên phải ?? tức là ‘stranger’.
3. Dynamic properties
Đôi khi ta muốn truy cập đến một dynamic value. Nó có thể là array hoặc là dynamic property của một object.
Ở ví dụ bên trên có thể hiểu jobs?.[jobNumber] tức là jobs[jobNumber] nhưng nó sẽ không trả về error mà thay vào đó sẽ return về none.
4. Function or method call
Thỉnh thoảng ta làm việc với object mà không biết nó có phải là method hay không. Ở đây ta có thể sử dụng cú pháp ?.() hoặc với arguments ?.({ some: ‘args’}) . Nếu method này không tồn tại trên object, nó sẽ return undefined.
Nếu không có function getCurrentJob thì currentJob sẽ có giá trị none.
5. Bắt đầu sử dụng
Bây giờ chưa support cho các browser-nhưng Babel hỗ trợ. Plugin babel.js khác dễ tích hợp nếu bạn đã thiết lập Babel. Bạn có thể tham khảo babel-plugin-proposal-optional-chaining để cài đặt cũng như cách dùng.