aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
SAVED POSTS
aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
aedev.net
No Result
View All Result
Lập trình viên chuẩn bị phỏng vấn fresher React Native với laptop, điện thoại và thẻ câu hỏi

JavaScript: chọn giá trị mặc định mà không làm mất 0, false và chuỗi rỗng

Suong Nguyen by Suong Nguyen
25/10/2026
in Phỏng vấn
0
585
SHARES
3.2k
VIEWS
Summarize with ChatGPTShare to Facebook

Một cấu hình cho phép timeout bằng 0 hoặc tắt gợi ý bằng false, nhưng khi đọc lại thì code tự bật giá trị mặc định. Nếu đang dùng toán tử OR cho mọi fallback, bạn có thể đã đánh đồng “không có dữ liệu” với “có dữ liệu nhưng giá trị falsy”.

Bài này phù hợp để tự kiểm tra trước phỏng vấn hoặc review một đoạn xử lý cấu hình. Các snippet đã chạy bằng Node.js 24.18.1; nguồn MDN được đọc ngày 25/10/2026. Ví dụ tập trung ngữ nghĩa JavaScript, không đánh giá một thư viện hay framework cụ thể.

1. OR và nullish coalescing hỏi hai câu khác nhau

Theo MDN về nullish coalescing, ?? chỉ chọn vế phải khi vế trái là null hoặc undefined. || chọn vế phải khi vế trái là falsy, nên có thể thay cả 0, false và chuỗi rỗng.

Đây không phải lựa chọn toán tử nào “mới hơn thì tốt hơn”. Bạn cần xác định những giá trị nào hợp lệ theo nghiệp vụ. Nếu label rỗng phải hiển thị một tên thay thế, OR có thể đúng; nếu chuỗi rỗng có nghĩa cố ý ẩn label, nullish fallback thể hiện ý định khác.

2. Chạy ba trường hợp trước khi sửa code

Lưu thành defaults-demo.mjs rồi chạy bằng Node:

const config = {
  timeoutMs: 0,
  showHints: false,
  label: '',
};

console.log(config.timeoutMs || 1500, config.timeoutMs ?? 1500);
console.log(config.showHints || true, config.showHints ?? true);
console.log(
  JSON.stringify(config.label || 'Mặc định'),
  JSON.stringify(config.label ?? 'Mặc định'),
);

Output đã kiểm tra là 1500 0, true false, rồi "Mặc định" "", mỗi cặp trên một dòng. JSON.stringify làm chuỗi rỗng nhìn thấy được, tránh nhầm rằng terminal không in gì vì đoạn code chưa chạy.

Giá trị timeout 0 trong ví dụ chỉ là dữ liệu minh họa. Khi dùng với một API cụ thể, hãy đọc định nghĩa timeout của API đó; không suy ra mọi thư viện đều xem 0 là cùng một ý nghĩa. Toán tử chỉ chọn giá trị, không định nghĩa hợp đồng nghiệp vụ cho nó.

3. Optional chaining không thay thế fallback

MDN về optional chaining mô tả việc dừng truy cập khi điểm kiểm tra trong chuỗi là null hoặc undefined. Bạn thường kết hợp nó với ?? để vừa đọc đường dẫn có thể thiếu vừa chọn giá trị khi kết quả không có.

const profile = null;
console.log(profile?.settings?.theme ?? 'system');

try {
  console.log((profile?.settings).theme);
} catch (error) {
  console.log(error.name);
}

Kết quả đã chạy là system, rồi TypeError. Ở dòng trong try, phần được đặt trong ngoặc đã cho ra undefined; truy cập .theme phía sau không còn được bảo vệ bởi chuỗi optional ban đầu. Dấu ngoặc không chỉ là thay đổi cách viết cho đẹp trong trường hợp này.

Cũng cần đặt điểm kiểm tra đúng nơi có thể thiếu dữ liệu. Nếu settings có thể undefined, chỉ viết optional ở profile chưa đủ để mô tả mọi trường hợp. Hãy xem cấu trúc dữ liệu thực tế và đặt kiểm tra theo hợp đồng thay vì thêm dấu hỏi ngẫu nhiên đến khi lỗi biến mất.

4. Thứ tự toán tử cần được thể hiện rõ

JavaScript không cho trộn trực tiếp ?? với || hoặc && mà không có ngoặc. Ví dụ dưới dùng chuỗi cố định để thử parser, không thực thi mã nhận từ người dùng:

try {
  new Function("return null || undefined ?? 'fallback';");
} catch (error) {
  console.log(error.name);
}

console.log((null || undefined) ?? 'fallback');

Output đã kiểm tra là SyntaxError, rồi fallback. Trong code ứng dụng, hãy chọn ngoặc theo ý nghĩa cần xử lý trước, không chỉ thêm ngoặc để hết lỗi cú pháp. Nếu biểu thức quá dài, tách một biến trung gian thường giúp review dễ hơn.

Kiểm tra theo hợp đồng dữ liệu

Với một trường cấu hình, tạo bảng các đầu vào: không có property, undefined, null, false, 0, chuỗi rỗng và một giá trị bình thường. Viết kết quả mong đợi trước khi thay OR bằng ??. Một thay đổi hàng loạt có thể làm hỏng những nơi vốn chủ ý dùng fallback cho chuỗi rỗng.

Với dữ liệu lồng nhau, thử từng cấp bị thiếu và cả trường hợp object tồn tại nhưng property là sai kiểu. Optional chaining không kiểm tra rằng một chuỗi là URL hợp lệ hay một con số nằm trong giới hạn. Đó vẫn là trách nhiệm của bước validation riêng.

Lỗi thường gặp

Lỗi đầu tiên là coi mọi giá trị falsy đều có nghĩa “chưa được nhập”. Lỗi thứ hai là nghĩ optional chaining sẽ nuốt mọi exception, kể cả lỗi từ logic bên trong một hàm được gọi. Lỗi thứ ba là dùng fallback làm lớp che cho một property bắt buộc, khiến lỗi dữ liệu bị biến thành giá trị mặc định khó phát hiện.

Khi trả lời phỏng vấn, hãy giải thích điều kiện kích hoạt vế phải, cho một phản ví dụ với 0 hoặc false, rồi nói rõ khác biệt giữa truy cập an toàn và kiểm tra dữ liệu. Bạn không cần một đoạn biểu thức dài để chứng minh đã hiểu toán tử.

Kết luận

Chọn fallback từ ý nghĩa dữ liệu, không từ thói quen dùng một toán tử ở mọi nơi. Những fixture nhỏ với null, undefined và các giá trị falsy giúp bạn phát hiện khác biệt trước khi một cấu hình hợp lệ bị thay âm thầm.

Nguồn tham khảo

  • MDN: nullish coalescing
  • MDN: optional chaining

Tags: JavaScriptNullish coalescingPhỏng vấn
SummarizeShare234
Suong Nguyen

Suong Nguyen

Related Stories

Lập trình viên chuẩn bị phỏng vấn fresher React Native với laptop, điện thoại và thẻ câu hỏi

JavaScript sort: vì sao số 10 đứng trước 2 và mảng gốc bị đổi?

by Suong Nguyen
26/10/2026
0

Kiểm tra thứ tự mặc định, hợp đồng comparator, tính ổn định và cách dùng toSorted để giữ mảng gốc khi sắp xếp.

Lập trình viên chuẩn bị phỏng vấn fresher React Native với laptop, điện thoại và thẻ câu hỏi

Promise.all và allSettled: chờ kết quả không có nghĩa là tự hủy tác vụ

by Suong Nguyen
24/10/2026
0

Chạy ví dụ nhỏ để phân biệt Promise.all, allSettled, thứ tự kết quả và việc hủy công việc khi một promise thất bại.

Lập trình viên chuẩn bị phỏng vấn fresher React Native với laptop, điện thoại và thẻ câu hỏi

Phỏng vấn JavaScript: vì sao spread vẫn có thể làm đổi object gốc?

by Suong Nguyen
23/10/2026
0

Luyện cách giải thích shallow copy, so sánh tham chiếu và cập nhật một nhánh dữ liệu mà vẫn giữ object ban đầu.

Lập trình viên chuẩn bị phỏng vấn fresher React Native với laptop, điện thoại và thẻ câu hỏi

Phỏng vấn JavaScript: giải thích event loop, microtask và async/await

by Suong Nguyen
22/10/2026
0

Luyện cách giải thích thứ tự chạy của Promise, timer và await thay vì chỉ học thuộc đáp án in ra màn hình.

Next Post
Minh họa các khái niệm AI, mạng nơ-ron và lập trình trên máy tính

Đánh giá truy hồi RAG bằng Recall@k và MRR trước khi sửa prompt

0 0 votes
Article Rating
Subscribe
Login
Notify of
guest
guest
0 Comments
Oldest
Newest Most Voted
AE Dev

AE Dev mang đến các bài viết về lập trình, mobile app, backend, frontend, WordPress và công nghệ, phù hợp cho developer muốn học hỏi và cập nhật kiến thức thực tế.

Recent Posts

  • React Native Image: cover và contain khác nhau trong cùng một khung ảnh
  • JavaScript sort: vì sao số 10 đứng trước 2 và mảng gốc bị đổi?
  • Android plurals: vì sao getQuantityString cần truyền count hai lần?

Categories

  • AI
  • Backend
  • Đánh giá
  • DevOps
  • Flutter
  • Hướng dẫn
  • Lập trình Mobile
  • Phỏng vấn
  • React Native
  • Uncategorized

Weekly Newsletter

  • Buy JNews
  • Support Forum
  • Pre-sale Question
  • Contact Us

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Trang chủ
  • AI
  • Mobile
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
  • Flutter

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply