1. Mở đầu
Làm việc với javascript thì chắc hẳn các bạn không còn lạ gì với kiểu object
, nhất là khi bạn xử lý dữ liệu nhận được từ api
. Và cách thông dụng nhất để lấy dữ liệu từ object
là thông qua property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | { data: { school: { class: { student: { name: 'pikachu' } } } } } const name = data.school.class.name; |
Cách xử lý trên sẽ dễ dàng cho bạn 1 cái bug nếu data trả về null
1 2 3 4 5 6 7 8 | { data: null } const name = data.school.class.name; Uncaught TypeError: Cannot read property 'school' of null |
Để handle case trên thì cách truyền thống là
1 2 3 4 5 6 | const name = data && data.school && data.school.class && data.school.class.student && data.school.class.student.name; |
Khá là rườm rà…
2. Optional chaining
Optional chaining
là tính năng giúp bạn truy cập property của object nhanh và dễ dàng hơn
1 2 3 4 5 6 7 8 | { data: null } const name = data?.school?.class?.student?.name; name = undefined |
Optional chaining
sẽ trả ra null nếu phần đứng trước ?.
là null
hoặc undefined
.
Tương tự như truy cập object
qua property
, chúng ta cũng có thể dùng optional chaining
cho việc truy cập object
qua key
1 2 | name = data?.['school']?.['class']?.['student']?.['name']; |
3. Chú ý
Optional chaining
rất tiện nhưng không nên quá lạm dụng nó. Chúng ta chỉ nên dùng nó cho các property
là optional
.
1 2 3 4 5 6 7 8 9 10 11 12 | { data: { school: { class: { student: { name: 'pikachu' } } } } } |
Với ví dụ trên, school
là bắt buộc phải có còn class
không có cũng được thì chúng ta nên viết
1 2 | const name = data.school?.class?.student?.name; |
Nếu chúng ta dùng optional chaining
cho school
thì trong trường hợp school
là null
hoặc undefined
thì code vẫn pass và chúng ta sẽ mất thời gian hơn để debug.