Операторы сравнения в JavaScript: ==, === и Object.is

Два способа спросить «А эти значения равны?»

В JavaScript есть два оператора сравнения на равенство: === (строгое равенство) и == (нестрогое равенство). Выглядят они почти одинаково. А ведут себя - совершенно по-разному.

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

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

=== проверяет, что оба операнда имеют одинаковый тип и одинаковое значение. == сначала приводит операнды к общему типу, а потом уже сравнивает. Именно это приведение типов - то самое злополучное coercion - и породило большую часть мемов про равенство в JavaScript.

Если коротко: по умолчанию используйте ===. Но длинную версию стоит прочитать хотя бы раз - чтобы понимать, от чего именно вы отказываетесь.

Строгое равенство: то, что вам почти всегда нужно

Строгое равенство === возвращает true только если совпадают и тип, и значение. Никаких неявных преобразований, никаких сюрпризов:

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

console.log(42 === "42");         // false - разные типы
console.log(0 === false);         // false - разные типы
console.log(null === undefined);  // false - разные типы

Если типы не совпадают, ответ сразу false. Если совпадают - JavaScript сравнивает значения. Для примитивов это сравнение по значению, а для объектов - по ссылке (об этом чуть ниже).

!== - это оператор строгого неравенства, он работает по тем же правилам, только наоборот.

Нестрогое равенство: приведение типов под капотом

== допускает, что с обеих сторон стоят значения разных типов. Перед сравнением он запускает целый танец с приведением типов, чтобы привести их к общему знаменателю:

console.log(1 == "1");        // true - строка становится числом
console.log(0 == false);      // true - булево становится числом
console.log("" == 0);         // true - строка становится числом
console.log(null == undefined); // true - особый случай
console.log("0" == false);    // true - оба становятся 0

Точные правила расписаны в спецификации, и сами по себе они не то чтобы жуткие - проблема в том, чтобы удержать их в голове посреди отладки. На том, что "0" == false даёт true, спотыкаются даже матёрые разработчики. То же самое с [] == false (тоже true: массив приводится к "", а тот - к 0).

Именно поэтому большинство стайл-гайдов - и правило eqeqeq в ESLint - советуют по умолчанию писать ===. Лишний символ в обмен на правила, которые реально запомнить.

Единственный полезный паттерн с ==

Есть ровно одна идиома с нестрогим равенством, которую стоит держать в арсенале: x == null вернёт true, если x - это null или undefined, и false во всех остальных случаях.

function greet(name) {
    if (name == null) {
        return "Привет, незнакомец";
    }
    return `Привет, ${name}`;
}

console.log(greet());           // Привет, незнакомец
console.log(greet(null));       // Привет, незнакомец
console.log(greet("Rosa"));     // Привет, Rosa
console.log(greet(0));          // Привет, 0 - не считается отсутствующим

Строгий эквивалент - это x === null || x === undefined. Работает, но выглядит громоздко. Поэтому во многих кодовых базах == null оставляют как единственное узаконенное исключение. Главное - выбрать правило и придерживаться его.

Сравнение объектов в JavaScript идёт по ссылке

Когда речь о объектах, массивах и функциях, и ===, и == задают один и тот же вопрос: «Указывают ли обе стороны на один и тот же объект в памяти?» А вовсе не «одинаковое ли у них содержимое?»

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

console.log(a === b);  // false - разные объекты
console.log(a === c);  // true - одна и та же ссылка
console.log(a == b);   // false - всё равно разные объекты

Два объектных литерала с одинаковым содержимым - это всё равно два разных объекта. На этом хоть раз да спотыкается каждый.

Если нужно сравнивать объекты по значению, пишите свой хелпер, подключайте библиотеку (lodash.isequal) или, для простых plain-объектов, сериализуйте через JSON.stringify:

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

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

JSON.stringify годится только для простых данных - он игнорирует функции, undefined и символы, а порядок ключей в разных движках для некоторых структур не гарантируется. Это скорее быстрая проверка, чем универсальное решение.

Сравнение NaN в JavaScript

NaN (от «not a number») - это значение, которое JavaScript возвращает, когда у числовой операции нет осмысленного результата: 0/0, Number("abc"), Math.sqrt(-1). Оба оператора равенства возвращают false, если хотя бы с одной стороны стоит NaN - даже когда NaN с обеих сторон:

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

const result = Number("oops");
console.log(result);              // NaN
console.log(result === NaN);      // false - не работает
console.log(Number.isNaN(result)); // true - это и есть проверка

Чтобы понять, что перед нами NaN, используйте Number.isNaN(value). Старую глобальную функцию isNaN лучше не трогать - она сначала приводит аргумент к числу, поэтому isNaN("hello") вернёт true, а это почти наверняка не то, что вам нужно.

Object.is: почти ===, но с двумя поправками

Object.is(a, b) ведёт себя так же, как ===, за исключением двух пограничных случаев:

console.log(Object.is(NaN, NaN));   // true  (=== возвращает false)
console.log(Object.is(0, -0));      // false (=== возвращает true)

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

В большинстве случаев вам нужен именно ===. К Object.is стоит обращаться, когда нужно, чтобы NaN считался равным самому себе, либо чтобы отличить +0 от -0 - случаи редкие, но иногда критичные: в численных расчётах и во внутренностях фреймворков (React, например, использует Object.is для сравнения состояния).

Знак «не равно» в JavaScript работает по той же логике

!== - строгий, != - нестрогий, и рекомендация та же:

console.log(1 !== "1");  // true - разные типы
console.log(1 != "1");   // false - приведение типов, значения совпадают

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

По умолчанию используйте !==. Если в вашем стайл-гайде разрешён == null, то и его «близнец» != null для проверки «не null и не undefined» тоже допустим.

Чек-лист для сравнения значений

Когда нужно сравнить два значения, пройдитесь по этому списку:

• Примитивы одного типа? Берите ===.
• Проверка на null или undefined? x == null вполне подойдёт, если стайл-гайд не против; иначе пишите x === null || x === undefined.
• Проверка на NaN? Number.isNaN(x).
• Сравниваете объекты по ссылке? === делает ровно то, что нужно.
• Сравниваете объекты по содержимому? Напишите свою функцию, подключите библиотеку или сериализуйте значения. Встроенные операторы тут бессильны.

Держитесь ===, оставьте == как точечный инструмент для случая == null - и вы обойдёте стороной все те подводные камни равенства, которыми забиты FAQ по JavaScript.

Дальше: операторы

Операторы сравнения - это лишь одна грань операторов в JavaScript. В следующем материале разберём всё остальное: арифметические, логические, присваивания и сокращённые формы, которые пригодятся в повседневном коде.