Mấy mẹo JavaScript hiện đại giúp code sạch hơn — mà dễ xài lắm!

Phong Hy

Mấy mẹo JavaScript hiện đại giúp code sạch hơn — mà dễ xài lắm!

Hồi mới học JavaScript, mình hay viết kiểu:

let name = user.name !== null && user.name !== undefined ? user.name : "Khách";

Nhìn cũng được, nhưng mà code hơi dài, với đọc hơi rối. Rồi một ngày đẹp trời mình phát hiện ra ?? với ?. — 2 thằng này thay đổi cuộc đời mình luôn 😂


1. Optional Chaining (?.) — "hỏi thử coi có không?"

Hồi xưa, muốn lấy user.address.city mà sợ address undefined là crash liền. Phải viết:

let city = user.address && user.address.city ? user.address.city : "Không rõ";

Giờ thì:

let city = user.address?.city ?? "Không rõ";

Cái ?. nó tự động kiểm tra: nếu addressnull hay undefined thì ngưng, đừng chạy tiếp — khỏi crash. Xài với object lồng nhau (nested) là ngon nhất trần đời.

2. Nullish Coalescing (??) — "nếu không có thì lấy cái này"

?? khác || ở chỗ: || nó nhảy qua cái khác nếu giá trị là falsy (kể cả 0, "", false), còn ?? chỉ nhảy khi giá trị là null hoặc undefined thôi.

Ví dụ:

let soLuong = 0;
let display = soLuong || 10;  // = 10 (tại 0 là falsy) — sai bét!
let display2 = soLuong ?? 10; // = 0 (đúng rồi, vì 0 không phải null/undefined)

Cái này mình ưng nhất. Gặp 0, "", false mình muốn giữ nguyên, chứ đâu phải "không có" đâu.

code screen

Ảnh: Lukas Blazek — Pexels


3. Kết hợp ?. với ?? — combo bất bại

Đây là cái mình xài hoài trong dự án thực tế:

const userName = response?.data?.user?.profile?.name ?? "Người dùng";

Một dòng — xử lý hết mọi trường hợp thiếu dữ liệu. Không try-catch, không if-else dài dòng. Đọc vô là hiểu liền: "lấy name từ profile, nếu thiếu bất kỳ cấp nào thì về mặc định".

office work

Ảnh: Marvin — Pexels


Mấy cái này có sẵn trong ES2020 rồi, xài được luôn với Node.js 14+ và đa số trình duyệt hiện tại. Nếu bạn dùng TypeScript thì còn được warning tận răng nữa.

Túm lại: code sạch hơn, ít bug hơn, đọc nhanh hơn. Ai chưa xài thì thử ngay đi, mình guarantee không nghiện thì thôi 😎