В чем разница между строгим и нестрогим сравнением?

Разница между строгим и нестрогим сравнением

Строгое сравнение (===) и нестрогое сравнение (==) — это два способа проверки равенства значений в JavaScript. Главное отличие состоит в том, происходит ли преобразование типов перед сравнением.

Строгое сравнение (===)

=== сравнивает значения БЕЗ преобразования типов. Это означает, что сравниваются и значение, и тип данных. Если типы разные — результат всегда false.

// Строгое сравнение
5 === 5           // true (одинаковые значение и тип)
5 === "5"         // false (разные типы: число vs строка)
true === 1        // false (разные типы: boolean vs number)
null === null     // true (оба null)
undefined === undefined  // true (оба undefined)

// С переменными
const age = 25;
const ageString = "25";

if (age === ageString) {
  console.log("Равны");  // Не выведется!
}

Правило: используй ===, это безопаснее и быстрее.

Нестрогое сравнение (==)

== сравнивает значения С преобразованием типов. JavaScript пытается привести операнды к одному типу, а затем сравнить. Это часто приводит к неожиданным результатам.

// Нестрогое сравнение (с преобразованием типов)
5 == "5"          // true (строка преобразуется в число)
true == 1         // true (boolean преобразуется в число)
false == 0        // true (boolean преобразуется в число)
null == undefined // true (специальное правило)
"" == 0           // true (пустая строка преобразуется в 0)
"" == false       // true (пустая строка преобразуется в false)

// С переменными
const age = 25;
const ageString = "25";

if (age == ageString) {
  console.log("Равны");  // Выведется!
}

Таблица сравнений

Правила преобразования типов для ==

ЯваScript использует сложные правила преобразования типов:

Правило 1: Если типы одинаковые

5 == 5              // true (оба числа)
"hello" == "hello"  // true (обе строки)

Правило 2: null и undefined

null == undefined   // true (специальное правило)
null == 0           // false (не преобразуется в 0)
undefined == 0      // false (не преобразуется в 0)

Правило 3: Число и строка

5 == "5"            // true (строка преобразуется в число)
0 == "0"            // true
0 == ""             // true (пустая строка преобразуется в 0)

Правило 4: Boolean и что-либо

true == 1           // true (true преобразуется в 1)
false == 0          // true (false преобразуется в 0)
true == "1"         // true (true -> 1, "1" -> 1)
false == ""         // true (false -> 0, "" -> 0)

Практические примеры

Пример 1: Опасности нестрогого сравнения

// Неправильно (используем ==)
const user = { id: 0, name: "Guest" };

if (user.id == false) {  // true! (0 == false)
  console.log("User ID is falsy");
}

// Правильно (используем ===)
if (user.id === 0) {  // true (явно проверяем 0)
  console.log("User ID is 0");
}

Пример 2: Валидация формы

// Неправильно
function validateAge(age) {
  return age == 18;  // true и для "18", и для 18
}

validateAge("18");  // true (неожиданно!)

// Правильно
function validateAge(age) {
  return age === 18 && typeof age === "number";
}

validateAge("18");  // false (как ожидается)

Пример 3: Проверка на null/undefined

// С нестрогим сравнением (избегай!)
if (value == null) {  // true для null И undefined
  console.log("Value is null or undefined");
}

// Лучше использовать nullish coalescing (??)
if (value ?? false) {
  console.log("Value is not null/undefined");
}

// Или явно
if (value === null || value === undefined) {
  console.log("Value is null or undefined");
}

Пример 4: Сравнение ID из API

// API может вернуть строку
const userId = "12345";  // от API
const currentUserId = 12345;  // из базы данных

// Неправильно
if (userId == currentUserId) {
  console.log("Same user");  // true, но это случайность
}

// Правильно
if (Number(userId) === currentUserId) {
  console.log("Same user");  // Явное преобразование
}

// Или если оба строки
if (String(userId) === String(currentUserId)) {
  console.log("Same user");
}

Трудные случаи для ==

// Эти результаты часто удивляют
"" == false         // true
"0" == false        // true
" " == false        // true (пробел!)
0 == false          // true
null == undefined   // true
NaN == NaN          // false (уникальное поведение)

// Даже такое
[1] == [1]          // false (разные объекты)
[] == []            // false (разные объекты)
[] == false         // true (преобразование типов!)

Рекомендации лучших практик

1. ВСЕГДА используй строгое сравнение (===)

// ✓ Правильно
if (user.age === 18) { }
if (value === null) { }
if (isActive === true) { }

// ✗ Неправильно
if (user.age == 18) { }
if (value == null) { }
if (isActive == true) { }

1. Используй явное преобразование типов

// Если нужно преобразовать
const age = Number(ageString);
const isActive = Boolean(value);
const text = String(number);

// Проверяй после преобразования
if (age === 18) { }

1. Для null/undefined используй nullish coalescing

// Вместо
const value = userValue == null ? default : userValue;

// Лучше
const value = userValue ?? default;

1. ESLint поможет

// .eslintrc.json
{
  "rules": {
    "eqeqeq": ["error", "always"],  // Требует === везде
    "no-eq-null": "error"           // Запрещает == null
  }
}

Оператор !==

Аналогично === есть !== для строгого не-равенства:

5 !== "5"           // true (разные типы)
5 !== 5             // false (одинаковые значение и тип)

// Вместо
if (value != null) {  // Неправильно

// Пиши
if (value !== null && value !== undefined) {  // Правильно

Заключение

Строгое сравнение (===) всегда предпочтительнее нестрогого (==). Оно безопаснее, понятнее и быстрее. Избегай == в production коде, используй === и явное преобразование типов, когда это необходимо. Это одна из ключевых рекомендаций в современном JavaScript стиле кодирования.