So Sánh Toán Tử Hợp Nhất Nullish (??) và Toán Tử OR (||) Trong JavaScript
JavaScript cung cấp hai toán tử vô cùng hữu ích: toán tử hợp nhất nullish (??) và toán tử OR (||). Mặc dù chúng đều thường được sử dụng để cung cấp giá trị mặc định, nhưng lại có những khác biệt quan trọng mà nhiều lập trình viên chưa nắm rõ. Trong bài viết này, chúng ta sẽ khám phá cách hoạt động, ứng dụng và sự khác biệt giữa hai loại toán tử này để giúp bạn viết code hiệu quả hơn.
1. Hiểu Về Toán Tử OR (||)
1.1. Cách Hoạt Động
Toán tử OR (||) là một toán tử logic trong JavaScript, được sử dụng để kết hợp hai hoặc nhiều giá trị. Khi sử dụng trong các biểu thức không phải boolean, toán tử này sẽ trả về giá trị đầu tiên mà nó gặp phải là có giá trị đúng (truthy). Nếu không có giá trị nào đúng, nó sẽ trả về giá trị cuối cùng trong biểu thức.
1.2. Kết Quả Trả Về
Toán tử OR sẽ trả về các giá trị sau đây:
- Nếu vế bên trái là false
- Nếu vế bên trái là null
- Nếu vế bên trái là undefined
- Nếu vế bên trái là 0
- Nếu vế bên trái là chuỗi rỗng (" ")
- Nếu vế bên trái là NaN (Not a Number)
Ví dụ:
javascript
let x = 0;
let y = "hello";
let z = null;
console.log(x || "mặc định"); // Kết quả: "mặc định"
console.log(y || "mặc định"); // Kết quả: "hello"
console.log(z || "mặc định"); // Kết quả: "mặc định"2. Hiểu Về Toán Tử Nullish (??)
2.1. Cách Hoạt Động
Toán tử hợp nhất nullish (??) được giới thiệu trong ECMAScript 2020, cho phép bạn kiểm tra xem giá trị có phải là null hoặc undefined hay không. Nếu là null hoặc undefined, nó sẽ trả về giá trị ở vế bên phải, nếu không, giá trị ở vế bên trái sẽ được trả về.
2.2. Kết Quả Trả Về
Toán tử nullish chỉ trả về giá trị từ vế bên phải khi vế bên trái là:
- null
- undefined
Ví dụ:
javascript
let x = 0;
let y = null;
let z = "hello";
console.log(x ?? "mặc định"); // Kết quả: 0
console.log(y ?? "mặc định"); // Kết quả: "mặc định"
console.log(z ?? "mặc định"); // Kết quả: "hello"2.3. Sự Khác Biệt Giữa (||) và (??)
Khi toán tử OR (||) coi nhiều giá trị là false, toán tử hợp nhất nullish (??) chỉ tập trung vào việc kiểm tra các giá trị null và undefined, giúp bạn xử lý các tình huống một cách chính xác hơn.
3. Khi Nào Sử Dụng Toán Tử OR (||)
Sử dụng toán tử OR khi bạn muốn cung cấp giá trị mặc định cho bất kỳ giá trị nào là false, bao gồm cả 0, chuỗi rỗng, hoặc false.
Ví dụ:
javascript
let age = 0;
let defaultAge = 18;
let finalAge = age || defaultAge; // finalAge sẽ là 184. Khi Nào Sử Dụng Toán Tử Nullish (??)
Sử dụng toán tử nullish khi bạn chỉ cần xử lý giá trị null hoặc undefined mà không ảnh hưởng bởi các giá trị false khác.
Ví dụ:
javascript
let user = null;
let defaultUser = { name: 'Khách' };
let finalUser = user ?? defaultUser; // finalUser sẽ là { name: 'Khách' }5. Một Số Ví Dụ Thực Tế
5.1. Ví Dụ Sử Dụng (||)
- Giá Trị Mặc Định Cho Tham Số Tùy Chọn
javascript
function greet(name) {
console.log(`Xin chào, ${name || 'người lạ'}!`);
}
greet('Alice'); // Kết quả: Xin chào, Alice!
greet(); // Kết quả: Xin chào, người lạ!5.2. Ví Dụ Sử Dụng (??)
- Xử Lý Các Thuộc Tính Tùy Chọn
javascript
const user = { name: 'Charlie' };
const fullName = user?.name ?? 'Không có tên';
console.log(fullName); // Kết quả: Charlie
const emptyUser = {};
const emptyUserName = emptyUser?.name ?? 'Không có tên';
console.log(emptyUserName); // Kết quả: Không có tên6. Kết Luận
Toán tử OR (||) và toán tử hợp nhất nullish (??) mang lại sức mạnh cho nhà phát triển JavaScript trong việc cung cấp giá trị mặc định. Việc hiểu sâu về các hành vi khác nhau của chúng sẽ giúp bạn viết ra những đoạn mã rõ ràng và hiệu quả hơn. Hãy lựa chọn toán tử phù hợp theo ngữ cảnh sử dụng để tránh những lỗi không mong muốn trong quá trình lập trình.
Cảm ơn bạn đã đọc bài viết này!
source: viblo
