Tìm Hiểu Object.is trong JavaScript: So Sánh Giá Trị Đúng Đắn

JavaScript cung cấp nhiều cách để so sánh giá trị: ==, ===, và Object.is. Trong phần lớn trường hợp, === là đủ, nhưng nó có một số trường hợp đặc biệt mà kết quả có thể gây bất ngờ.

Đó là lúc mà Object.is trở nên hữu ích.

📌 Object.is được giới thiệu khi nào?

• Được giới thiệu trong ES6 (ECMAScript 2015).
• Được thiết kế như một phương pháp so sánh đáng tin cậy hơn so với ===.

🤔 Tại sao chúng ta cần Object.is?

So sánh chặt chẽ (===) hoạt động tốt trong hầu hết các trường hợp, nhưng lại thất bại trong hai trường hợp phức tạp:

1. So sánh NaN

   javascript Copy

   NaN === NaN      // false ❌
   Object.is(NaN, NaN); // true ✅

2. +0 so với -0

   javascript Copy

   +0 === -0        // true ❌
   Object.is(+0, -0); // false ✅

Vì vậy, Object.is được giới thiệu để khắc phục những điểm kỳ quặc này và làm cho việc so sánh giá trị trở nên chính xác hơn.

🔑 So sánh ==, ===, và Object.is

✅ Khi nào nên sử dụng Object.is?

1. Phát hiện giá trị NaN

   javascript Copy

   const value = 0 / 0; // NaN
   console.log(Object.is(value, NaN)); // true

2. Phân biệt +0 và -0

   javascript Copy

   console.log(Object.is(+0, -0)); // false

3. So sánh bình diện nông: Các framework như React sử dụng Object.is để so sánh props/state và tránh cập nhật không cần thiết.

🌍 Ứng dụng thực tế

1. Cập nhật trạng thái trong React

React sử dụng Object.is bên trong khi kiểm tra xem giá trị trạng thái mới có khác với giá trị cũ hay không.

const [count, setCount] = useState(NaN);

// Điều này sẽ không kích hoạt lại render
setCount(NaN); // Object.is(NaN, NaN) === true

Nếu React chỉ sử dụng ===, điều này sẽ kích hoạt render không cần thiết.

2. So sánh props nông với React.memo

React.memo sử dụng so sánh nông với Object.is bên trong.

const MyComponent = React.memo(({ value }) => {
  console.log("Rendered");
  return <div>{value}</div>;
});

<MyComponent value={NaN} />  // Rendered
<MyComponent value={NaN} />  // Không render lại ✅

Điều này ngăn chặn việc render không cần thiết khi props thực sự "giống nhau".

📝 Kết luận

Object.is là một bổ sung nhỏ nhưng mạnh mẽ được giới thiệu trong ES6. Nó hoạt động giống như === trong hầu hết các trường hợp, nhưng có hai điểm khác biệt quan trọng:

• Nó coi NaN là bằng với NaN.
• Nó coi +0 và -0 là khác nhau.

Những khác biệt này khiến nó trở thành một lựa chọn đáng tin cậy cho những trường hợp đặc biệt mà so sánh chặt chẽ không đáp ứng được. Dù bạn có thể không sử dụng nó hàng ngày, nhưng nó đóng một vai trò quan trọng trong các thư viện như React, đảm bảo các so sánh chính xác và tránh công việc không cần thiết.

💡 Mẹo và Thực tiễn tốt nhất

• Sử dụng Object.is khi cần kiểm tra NaN hoặc phân biệt giữa +0 và -0.
• Tránh sử dụng == trừ khi bạn chắc chắn về sự ép kiểu.
• Luôn kiểm tra các edge case trong mã của bạn để đảm bảo tính chính xác của các phép so sánh.

❗ Những cạm bẫy thường gặp

• Không nhầm lẫn giữa Object.is và ===.
• Đảm bảo hiểu rõ cách thức hoạt động của Object.is trong các thư viện mà bạn đang sử dụng.

🤔 Câu hỏi thường gặp

• Object.is có giống như === không?
  Không hoàn toàn. Object.is coi NaN là bằng với NaN và phân biệt giữa +0 và -0.
• Khi nào nên sử dụng Object.is?
  Sử dụng Object.is khi bạn cần so sánh giá trị một cách chính xác trong các tình huống như trong React hoặc các thư viện khác.

📚 Tài nguyên tham khảo

• MDN Web Docs về Object.is
• Thông tin về ES6 trên MDN