Toán tử so sánh bằng trong JavaScript: == và === và Object.is

Hai cách hỏi "hai thứ này có bằng nhau không?"

JavaScript có hai toán tử so sánh bằng: === (nghiêm ngặt) và == (lỏng lẻo). Trông chúng gần như giống hệt nhau. Nhưng hành vi thì rất khác.

console.log(1 === 1);      // true
console.log(1 === "1");    // false

console.log(1 == 1);       // true
console.log(1 == "1");     // true

=== kiểm tra xem hai toán hạng có cùng kiểu và cùng giá trị không. == chuyển hai toán hạng về một kiểu chung trước, rồi mới so sánh. Việc chuyển đổi đó, gọi là ép kiểu (type coercion), chính là nguồn gốc của phần lớn tiếng xấu về phép so sánh bằng trong JavaScript.

Bản ngắn gọn: mặc định hãy dùng ===. Bản đầy đủ đáng đọc một lần để bạn biết mình đang tránh được những gì.

So sánh nghiêm ngặt: thứ bạn thường cần

=== chỉ trả về true khi hai vế khớp cả kiểu lẫn giá trị. Không ép kiểu, không bất ngờ:

console.log(42 === 42);           // true
console.log("hi" === "hi");       // true
console.log(true === true);       // true

console.log(42 === "42");         // false - different types
console.log(0 === false);         // false - different types
console.log(null === undefined);  // false - different types

Nếu kiểu khác nhau, kết quả là false ngay lập tức. Nếu cùng kiểu, JavaScript so sánh giá trị. Với kiểu nguyên thủy, đó là so sánh giá trị; với đối tượng, đó là so sánh tham chiếu (sẽ nói rõ hơn ngay sau đây).

!== là toán tử khác nghiêm ngặt và tuân theo cùng quy tắc theo chiều ngược lại.

So sánh lỏng lẻo: ép kiểu trá hình

== cho phép hai vế khác kiểu. Trước khi so sánh, nó chạy một màn ép kiểu để cố làm chúng khớp nhau:

console.log(1 == "1");        // true - string becomes number
console.log(0 == false);      // true - boolean becomes number
console.log("" == 0);         // true - string becomes number
console.log(null == undefined); // true - special-cased
console.log("0" == false);    // true - both become 0

Quy tắc chính xác nằm trong đặc tả, và chúng không quá tệ, nhưng nhớ được chúng giữa lúc đang debug lại là chuyện khác. "0" == false là true khiến cả lập trình viên nhiều kinh nghiệm cũng vấp. [] == false cũng vậy (cũng là true, vì mảng bị ép thành "", rồi "" bị ép thành 0).

Đó là lý do hầu hết các hướng dẫn phong cách code, và quy tắc eqeqeq của ESLint, khuyên bạn mặc định dùng ===. Bạn gõ thêm một ký tự để đổi lấy những quy tắc thật sự nhớ được.

Mẫu == duy nhất hữu ích

Chỉ có một cách viết so sánh lỏng lẻo đáng biết: x == null trả về true khi x là null hoặc undefined, và false với mọi giá trị khác.

function greet(name) {
    if (name == null) {
        return "Hello, stranger";
    }
    return `Hello, ${name}`;
}

console.log(greet());           // Hello, stranger
console.log(greet(null));       // Hello, stranger
console.log(greet("Rosa"));     // Hello, Rosa
console.log(greet(0));          // Hello, 0 - not treated as missing

Cách viết nghiêm ngặt tương đương là x === null || x === undefined, chạy đúng nhưng đọc rườm rà hơn. Nhiều codebase cho phép == null như ngoại lệ duy nhất được chấp nhận. Hãy chọn một quy tắc và áp dụng nhất quán.

Đối tượng được so sánh theo tham chiếu

Với đối tượng, mảng và hàm, cả === và == đều hỏi cùng một câu: "Hai vế có trỏ tới cùng một đối tượng trong bộ nhớ không?" Không phải "chúng có cùng nội dung không?"

const a = { name: "Ada" };
const b = { name: "Ada" };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true - same reference
console.log(a == b);   // false - still different objects

Hai đối tượng literal có nội dung giống hệt nhau vẫn là hai đối tượng khác nhau. Ai cũng từng vấp phải điều này ít nhất một lần.

Để so sánh theo giá trị, bạn tự viết hàm hỗ trợ, dùng thư viện (lodash.isequal), hoặc tuần tự hóa bằng JSON.stringify với các đối tượng đơn giản:

const a = { x: 1, y: 2 };
const b = { x: 1, y: 2 };

console.log(JSON.stringify(a) === JSON.stringify(b)); // true

JSON.stringify chỉ dùng được cho dữ liệu đơn giản: nó bỏ qua hàm, undefined, symbol, và không đảm bảo thứ tự khóa giữa các engine với mọi dạng dữ liệu. Đó là cách kiểm tra nhanh, không phải giải pháp tổng quát.

NaN không bằng bất cứ thứ gì

NaN ("not a number") là giá trị JavaScript trả về khi một phép toán số không có kết quả có nghĩa: 0/0, Number("abc"), Math.sqrt(-1). Cả hai toán tử so sánh bằng đều trả về false khi một vế là NaN, kể cả khi cả hai vế đều là NaN:

console.log(NaN === NaN);  // false
console.log(NaN == NaN);   // false

const result = Number("oops");
console.log(result);              // NaN
console.log(result === NaN);      // false - doesn't work
console.log(Number.isNaN(result)); // true - this is the check

Để phát hiện NaN, hãy dùng Number.isNaN(value). Đừng dùng hàm toàn cục cũ isNaN: nó ép kiểu đối số trước, nên isNaN("hello") trả về true, gần như không bao giờ là điều bạn muốn.

Object.is: gần như ===, với hai chỗ sửa

Object.is(a, b) hoạt động như ===, trừ hai trường hợp đặc biệt:

console.log(Object.is(NaN, NaN));   // true  (=== returns false)
console.log(Object.is(0, -0));      // false (=== returns true)

console.log(NaN === NaN);           // false
console.log(0 === -0);              // true

Phần lớn thời gian, === là thứ bạn cần. Hãy dùng Object.is khi bạn thật sự cần coi NaN bằng chính nó, hoặc phân biệt +0 với -0: cả hai đều hiếm, nhưng đôi khi quan trọng trong code tính toán số và bên trong các framework (React dùng Object.is để so sánh state).

Toán tử khác cũng chia làm hai

!== là nghiêm ngặt, != là lỏng lẻo, và lời khuyên vẫn như trên:

console.log(1 !== "1");  // true  - different types
console.log(1 != "1");   // false - coerced, values match

console.log(null !== undefined); // true
console.log(null != undefined);  // false

Mặc định dùng !==. Nếu bạn đã cho phép == null, bạn có thể cho phép luôn mẫu đối ứng != null để kiểm tra "không phải null và không phải undefined".

Danh sách kiểm tra khi so sánh

Khi cần so sánh hai giá trị, hãy đi qua các bước sau:

• Kiểu nguyên thủy, mong đợi cùng kiểu? Dùng ===.
• Kiểm tra null hoặc undefined? x == null được nếu hướng dẫn phong cách của bạn cho phép; nếu không thì dùng x === null || x === undefined.
• Kiểm tra NaN? Number.isNaN(x).
• So sánh đối tượng theo danh tính? === làm đúng điều bạn muốn.
• So sánh đối tượng theo nội dung? Tự viết hàm hỗ trợ, dùng thư viện, hoặc tuần tự hóa. Các toán tử có sẵn không giúp được.

Gắn bó với ===, coi == là công cụ đặc biệt cho trường hợp == null, và bạn sẽ tránh được những điểm kỳ quặc về so sánh bằng vốn lấp đầy các danh sách câu hỏi thường gặp về JavaScript.

Tiếp theo: toán tử

So sánh bằng chỉ là một phần trong bộ toán tử của JavaScript. Bài tiếp theo đi qua phần còn lại: toán tử số học, logic, gán, và các toán tử viết tắt bạn sẽ dùng hằng ngày.