Video học lập trình mỗi ngày

Nullish coalescing Operator chính là toán tử ?? được giới thiệu trong ES2020 cách đây không lâu. Nhưng sự hiện diện của ?? làm cho toán tử || đặt ra nhiều nghi vấn. Và có nhiều lập trình viên cho rằng đáng lẽ ra chức năng này phải ra sớm hơn chứ không phải chờ đến ES2020. Và bài viết này cũng nằm trong series - Mẹo viết javascript.

Xem thêm: ES2020 javascript hoàn thiện, code của chúng ta đã thay đổi như thế nào?

So sánh với || và toán tử ??

Đầu tiên chúng ta ở đây không tập trung giải thích toàn tử ?? là toán tử gì? Toán tử ?? hay còn gọi là Nullish coalescing Operator mà ở bài trước chúng ta đã nói về cú pháp và cách sử dụng. Còn ở đây chúng ta sẽ phân tích và so sánh với toán tử ||. 

Đầu tiên chúng ta xem qua một ví dụ: 

# toán tử ??

let firstName = null;
let lastName = null;
let nickName = "anonystick.com";

// Sử dụng toán tử ??
console.log(firstName ?? lastName ?? nickName ?? "Anonymous"); // anonystick.com

# toán tử ||

let firstName = null;
let lastName = null;
let nickName = "anonystick.com";

//  Sử dụng toán tử ||
console.log(firstName || lastName || nickName || "Anonymous"); // anonystick.com

Cả hai phương án cũng cho một kết quả giống nhau, như vậy tại sao hầu hết những developers không hài lòng về việc sử dụng toán tử || như thế nào? Hãy đọc kỹ những điều chúng ta nhìn thấy dưới đây.

Sự khác biệt quan trọng giữa toán tử || và toán tử ??

• || Nó trả về một giá trị thực.
• ?? Trả về giá trị được xác định đầu tiên.

Nói cách khác, || toán tử này không thể được phân biệt false, 0, "", và null/undefined. Nếu một khi dùng || thì chắc chắn rằng chúng ta sẽ nhận được một giá trị thứ hai. Và nếu như vậy thì có thể code của chúng ta đã sai. Bởi vì trong thực tế, chúng ta có thể chỉ muốn giá trị của biến null/undefined bằng các giá trị mặc định. 

Ví dụ, hãy xem xét tình huống sau:

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

Trước tiên, height || 100 nó sẽ kiểm tra xem height đó có phải là giá trị sai hay không, nhận thấy rằng nó thực sự là như vậy. Do đó, kết quả cho tham số thứ hai 100. Đậu xanh!!! 

Đầu tiên height ?? 100 kiểm tra height xem null/undefined và tìm thấy nó không. Vì vậy, kết quả là giá trị height ban đầu 0. Giá trị 0 là một giá trị hợp lệ do đó chúng ta nên sử dung toán tử ?? cho những trường hợp "default parameters in javascript". 

Operator precedence - Sự ưu tiên khi dùng toán tử ??

Toán tử ?? có mức ưu tiên khá thấp: bảng MDN ta thấy rõ. Nghĩa là mức đô ưu tiên của các toán tử như chúng ta học ở cấp 1 là ( nhân chia trước, công trừ sau) chúng ta phải bỏ các hạng toán tử trong dấu ngoặc sao cho đúng. Vì vậy, nếu chúng ta cần sử dụng các toán tử khác của biểu thức ?? thì các giá trị cần được xem xét trong dấu ngoặc đơn: Ví dụ:

 let height = null;
let width = null;

let area = (height ?? 100) * (width ?? 50);

alert(area); // 5000

Ngược lại, nếu chúng ta bỏ qua các dấu ngoặc, vì * ưu tiên cao hơn ?? , nó sẽ thực hiện trước, dẫn đến kết quả sai.

let area = height ?? 100 * width ?? 50; // 0

Một bài viết đơn giản nhưng rất có giá trị cho những developer chưa từng thực hiện toán tử ??. Và bây giờ việc thay đổi thói quen check giá trị default trong javascript tuỳ thuộc vào bạn.