Articles
Giới thiệu về JavaScript
Toán tử hợp nhất null trong JavaScript

Toán tử hợp nhất null trong JavaScript

Bài viết này giải thích về toán tử hợp nhất null trong JavaScript.

YouTube Video

Toán tử hợp nhất null trong JavaScript

Trong JavaScript, toán tử hợp nhất null (??) kiểm tra xem một giá trị có phải là null hoặc undefined và trả về giá trị mặc định khác nếu đúng như vậy. Nó tương tự với toán tử logic HOẶC (||) thường dùng, nhưng khác biệt ở chỗ nó chuyên xử lý null và undefined.

Toán tử OR logic trả về giá trị bên phải nếu giá trị bên trái là falsy, trong khi toán tử kết hợp nullish chỉ trả về giá trị bên phải khi giá trị bên trái là null hoặc undefined. Tính năng này cho phép xử lý chính xác các giá trị như 0 và chuỗi trống ("").

Cú pháp Cơ bản 

1let result = value ?? defaultValue;
  • value là giá trị đang được kiểm tra.
  • defaultValue là giá trị được trả về khi value là null hoặc undefined.

Ví dụ sử dụng toán tử hợp nhất null

Ví dụ dưới đây triển khai một quy trình để trả về giá trị mặc định trong trường hợp null hoặc undefined.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

Trong đoạn mã này, vì name là null, giá trị của defaultName, là "Anonymous", được trả về. Nếu name là giá trị khác null hoặc undefined, giá trị đó sẽ được trả về.

Sự khác biệt với toán tử logic HOẶC

Toán tử kết hợp nullish tương tự như toán tử OR logic nhưng có sự khác biệt quan trọng. Toán tử OR logic kiểm tra các giá trị 'falsy' (false, 0, NaN, "", null, undefined, v.v.), trong khi toán tử kết hợp nullish chỉ kiểm tra null và undefined.

Ví dụ về toán tử logic HOẶC: 

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Ví dụ về toán tử hợp nhất null: 

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Bằng cách này, toán tử kết hợp nullish giữ lại các giá trị hợp lệ như 0 và chuỗi rỗng ("") và chỉ trả về giá trị mặc định khi cần thiết. Vì toán tử OR logic coi các giá trị này là falsy và trả về giá trị mặc định, nên việc chọn toán tử phù hợp tùy thuộc vào trường hợp sử dụng là rất quan trọng.

Ví dụ khi sử dụng kết hợp:

Toán tử kết hợp nullish cũng có thể được kết hợp với các toán tử logic khác, nhưng cần cẩn thận khi thực hiện như vậy.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;
  • Ví dụ, khi sử dụng nó cùng với toán tử OR logic (||) hoặc toán tử AND logic (&&), nên sử dụng dấu ngoặc để làm rõ thứ tự của các phép toán.
1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false
  • Trong ví dụ này, a ?? b được đánh giá trước, và vì a là null, b được trả về. Sau đó, b || c được đánh giá, và vì b là giá trị falsy, nên c sẽ được trả về cuối cùng.

Các trường hợp mà toán tử kết hợp nullish hữu ích

Dưới đây là các trường hợp mà toán tử kết hợp nullish hữu ích.

  • Giá trị mặc định cho các biểu mẫu Điều này có thể được sử dụng trong các trường hợp đặt giá trị mặc định cho các trường nhập liệu của biểu mẫu khi người dùng không nhập bất kỳ điều gì.
1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18
  • Xử lý phản hồi từ API Xử lý dự phòng có thể được thực hiện khi giá trị là null hoặc undefined trong các phản hồi từ API.
1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Tóm tắt

Toán tử kết hợp nullish (??) rất hữu ích để khởi tạo dữ liệu và xử lý các phản hồi API, vì nó trả về một giá trị mặc định khi gặp null hoặc undefined. Cụ thể, nó là một lựa chọn tốt hơn so với toán tử OR logic truyền thống (||) khi bạn muốn xử lý đúng các giá trị falsy như 0 hoặc chuỗi rỗng.

Về toán tử gán hợp nhất nullish (??=)

Tổng quan

Trong JavaScript, toán tử gán hợp nhất nullish ??= đã được giới thiệu để gán giá trị mới cho các biến có giá trị là null hoặc undefined một cách hiệu quả. Toán tử này là một phím tắt tiện lợi để gán giá trị vào một biến chỉ khi giá trị đó là null hoặc undefined.

Cách sử dụng cơ bản

Toán tử gán nullish hoạt động như sau:.

  • Nếu một biến là null hoặc undefined, nó sẽ gán giá trị ở phía bên phải.
  • Nếu biến không phải là null hoặc undefined, nó sẽ không làm gì và giữ nguyên giá trị hiện tại.

Cú pháp

Cú pháp cơ bản của toán tử gán nullish như sau:.

1x ??= y;
  • y sẽ được gán vào x nếu x là null hoặc undefined.
  • Nếu x đã có giá trị (không phải null hoặc undefined), giá trị của x sẽ không bị thay đổi.

Ví dụ

Hãy xem một ví dụ cơ bản về toán tử gán đồng kết nullish.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"
  • Trong đoạn mã này, vì userName là null, nên giá trị của defaultName được gán.

Tiếp theo, đây là một ví dụ khi giá trị không phải là null và cũng không phải là undefined.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"
  • Trong trường hợp này, vì "Alice" đã được đặt cho userName, nên không có gán nào được thực hiện.

So sánh với các toán tử gán khác

JavaScript cũng có một số toán tử gán khác. Đặc biệt, sự khác biệt so với toán tử gán OR logic (||=) là rất quan trọng.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

Toán tử gán OR logic gán giá trị ngay cả khi gặp các giá trị falsy như false, 0 hoặc chuỗi rỗng (""), trong khi toán tử gán nullish chỉ hoạt động khi giá trị là null hoặc undefined.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Vì toán tử gán nullish chỉ hoạt động với null hoặc undefined, nó rất hữu ích khi bạn muốn giữ lại các giá trị như 0 hoặc false.

Các trường hợp sử dụng trong thế giới thực

Một trường hợp sử dụng thực tế của toán tử gán hợp nhất null có thể như sau:.

  1. Thiết lập giá trị mặc định

    Nó hữu ích để thiết lập giá trị mặc định khi đầu vào của người dùng hoặc phản hồi từ API có thể là null hoặc undefined.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

  1. Xử lý tham số tùy chọn

    Nó cũng có thể được sử dụng để thực hiện các hành động mặc định khi không có tham số hàm được chỉ định.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Tóm tắt

Toán tử gán nullish (??=) chỉ gán giá trị khi giá trị bên trái là null hoặc undefined, giúp mã ngắn gọn hơn và tránh các gán giá trị không mong muốn. Đặc biệt khi làm việc với các giá trị "falsy" như 0 hoặc false, nó có thể phù hợp hơn so với toán tử OR logic truyền thống (||=).

Bằng cách sử dụng toán tử này, bạn có thể tạo ra mã mạnh mẽ hơn và dễ đọc hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

`truthy` và `falsy` trong JavaScript