Будут ли равны Null и Undefined при строгом сравнении

Null vs Undefined: строгое сравнение в JavaScript

Хотя null и undefined часто путают, при строгом сравнении (===) они НЕ равны. Это важное различие, которое нужно понимать.

Строгое сравнение

// ❌ НЕ равны при строгом сравнении
null === undefined; // false
undefined === null; // false

// ✅ Равны только при нестрогом сравнении
null == undefined; // true
undefined == null; // true

Различия между null и undefined

Проверка типов

typeof null; // "object" (историческая ошибка JavaScript)
typeof undefined; // "undefined"

// Правильный способ проверки
null === null; // true
undefined === undefined; // true

// Проверка на "отсутствие значения" (любого)
value == null; // true если null ИЛИ undefined
value === null; // true только если null
value === undefined; // true только если undefined

Когда появляется undefined

// 1. Неинициализированная переменная
let x;
console.log(x); // undefined

// 2. Функция без return
function noReturn() {
  console.log("Hi");
}
const result = noReturn();
console.log(result); // undefined

// 3. Параметр функции не передан
function greet(name) {
  console.log(name); // undefined если не передан
}
greet(); // undefined

// 4. Свойство объекта не существует
const obj = {};
console.log(obj.missing); // undefined

// 5. Деструктуризация несуществующего свойства
const { missing } = {};
console.log(missing); // undefined

Когда явно присваивается null

// 1. Явное присваивание "нет значения"
let user = null; // явно указываем, что нет пользователя

// 2. После удаления значения
let data = { name: "John" };
data = null; // явно очищаем

// 3. Результат функции, которая ничего не нашла
function findUser(id) {
  const user = users.find(u => u.id === id);
  return user || null; // null если не найден
}

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

Проверка на наличие значения

// ❌ Плохо: разные проверки
if (value !== null && value !== undefined) {
  // ...
}

// ✅ Хорошо: единая проверка
if (value != null) {
  // работаем с значением
}

// ✅ Или более явно
if (value !== null && value !== undefined) {
  // работаем с значением
}

Дефолтные значения

// ❌ Плохо: не работает корректно для 0, false, 
const count = userCount || 10; // Если userCount = 0, будет 10

// ✅ Хорошо: используем ??
const count = userCount ?? 10; // Дефолт только для null/undefined
const active = userActive ?? true; // Если false, остаётся false

// ✅ Или используем ||  
const count = userCount !== null ? userCount : 10;

Опциональная цепочка

// ❌ Плохо: может быть ошибка если user = null
const age = user.profile.age;

// ✅ Хорошо: безопасная цепочка
const age = user?.profile?.age; // undefined если user = null

// Работает с массивами и функциями
const firstItem = items?.[0]; // undefined если items = null
const result = callback?.(); // undefined если callback = null

Фильтрация null/undefined

// ❌ Плохо: оставляет falsy значения
const items = [1, 2, null, undefined, 0, "", 5];
const filtered = items.filter(item => item); // [1, 2, 5]

// ✅ Хорошо: удаляет только null/undefined
const filtered = items.filter(item => item != null); // [1, 2, 0, "", 5]

// ✅ Или с типизацией (TypeScript)
const filtered: number[] = items.filter((item): item is number => item != null);

Строгое сравнение в разных контекстах

// Массивы
const arr = [null, undefined, 0, false, ""];

arr.includes(null); // true
arr.includes(undefined); // true
arr.find(x => x === null); // null
arr.find(x => x === undefined); // undefined

// Объекты
const obj = { a: null, b: undefined };
obj.a === null; // true
obj.b === undefined; // true

// Деструктуризация с дефолтами
const { a = "default", b = "default" } = { a: null, b: undefined };
console.log(a); // null (дефолт НЕ используется)
console.log(b); // "default" (дефолт используется!)

// Это потому, что === для null работает по-другому
null === undefined; // false — разные значения
undefined === undefined; // true

JSON и null/undefined

// undefined не сохраняется в JSON
JSON.stringify({ a: 1, b: undefined, c: null });
// Result: "{\"a\":1,\"c\":null}"

// При парсинге можно получить undefined
const json = "{\"a\":1,\"b\":null}";
const obj = JSON.parse(json);
console.log(obj.b === null); // true
console.log(obj.c === undefined); // true (свойство не существует)

API и null

// Во многих API используется null, а не undefined
fetch("/api/user")
  .then(r => r.json())
  .then(user => {
    // user может быть null, если не найден
    if (user === null) {
      console.log("User not found");
    }
  });

// GraphQL обычно возвращает null для отсутствующих данных
const response = await graphqlQuery(`
  query {
    user(id: \"123\") {
      name
      profile { avatar }
    }
  }
`);
// profile может быть null

Практический чеклист

// ✅ Правильно для разных проверок:

// 1. Проверка на "любое отсутствие значения"
if (value != null) { /* есть значение */ }

// 2. Проверка только на null
if (value === null) { /* именно null */ }

// 3. Проверка только на undefined
if (value === undefined) { /* именно undefined */ }

// 4. Дефолтное значение (null/undefined -> дефолт)
const x = value ?? defaultValue;

// 5. Дефолтное значение (любое falsy -> дефолт)
const x = value || defaultValue;

// 6. Безопасная цепочка
const x = obj?.prop?.nested;

// 7. Фильтрация null/undefined
const filtered = array.filter(item => item != null);

Заключение

• null === undefined возвращает false (разные значения)
• null == undefined возвращает true (оба обозначают отсутствие)
• Используй === для точного сравнения
• Используй ?? для дефолтов (только null/undefined)
• Используй ?. для безопасного доступа
• Используй != null для проверки обоих значений одновременно