Что произойдет при сравнении null и undefined?

Что произойдет при сравнении null и undefined?

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

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

При нестрогом сравнении null и undefined считаются равными:

undefined == null; // true
null == undefined; // true

if (undefined == null) {
  console.log('Они равны при нестрогом сравнении'); // Выполнится
}

Это одно из немногих исключений в JavaScript, где нестрогое сравнение работает как ожидается.

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

При строгом сравнении null и undefined считаются не равными, потому что это разные типы:

undefined === null;     // false
null === undefined;     // false

if (undefined === null) {
  console.log('Они равны'); // НЕ выполнится
} else {
  console.log('Они не равны'); // Выполнится
}

Разница между null и undefined

Хотя они выглядят похоже, это разные вещи:

undefined — это значение переменной, которая объявлена, но не инициализирована:

let x;
console.log(x); // undefined

function test() {
  // Нет явного return
}
console.log(test()); // undefined

const obj = {};
console.log(obj.property); // undefined (свойство не существует)

null — это явное значение "ничего", которое разработчик присваивает сам:

let y = null; // Явно установлено
console.log(y); // null

function getData() {
  if (!hasData) {
    return null; // Явный return null
  }
  return data;
}

Типы данных

typeof undefined; // "undefined"
typeof null;      // "object" (это ошибка в JavaScript, но так исторически сложилось)

// Проверка типов
if (typeof x === 'undefined') {
  console.log('x не определена');
}

if (x === null) {
  console.log('x явно установлена в null');
}

Примеры сравнений

// Нестрогие сравнения (==)
undefined == null;        // true
undefined == undefined;   // true
null == null;             // true
undefined == false;       // false
null == false;            // false
undefined == 0;           // false
null == 0;                // false
undefined == '';          // false
null == '';               // false

// Строгие сравнения (===)
undefined === null;       // false
undefined === undefined;  // true
null === null;            // true
undefined === false;      // false
null === false;           // false

Практическое использование

Проверка на пусто (null или undefined)

// Способ 1: Нестрогое сравнение (проверяет оба)
if (value == null) {
  console.log('Значение null или undefined');
}

// Способ 2: Строгое сравнение (проверяет оба явно)
if (value === null || value === undefined) {
  console.log('Значение null или undefined');
}

// Способ 3: Используя nullish coalescing (??)
const result = value ?? 'default';
// ?? работает только с null и undefined
// Даже 0, false, '' не заменяются на 'default'

Различие между ?? и ||

const a = 0;
const b = '';
const c = null;
const d = undefined;

// Оператор || заменяет любые falsy значения
console.log(a || 'default');     // 'default' (0 — falsy)
console.log(b || 'default');     // 'default' ('' — falsy)
console.log(c || 'default');     // 'default' (null)
console.log(d || 'default');     // 'default' (undefined)

// Оператор ?? заменяет только null и undefined
console.log(a ?? 'default');     // 0 (не заменяется)
console.log(b ?? 'default');     // '' (не заменяется)
console.log(c ?? 'default');     // 'default' (заменяется)
console.log(d ?? 'default');     // 'default' (заменяется)

Optional Chaining (?.) и null/undefined

const user = null;

// Без optional chaining — будет ошибка
console.log(user.name); // TypeError: Cannot read property 'name' of null

// С optional chaining — вернёт undefined
console.log(user?.name); // undefined

// Применимо и для undefined
const data = undefined;
console.log(data?.value); // undefined

// Цепочка optional chaining
const obj = null;
console.log(obj?.user?.profile?.name); // undefined (безопасно)

Когда JavaScript присваивает undefined

// 1. Переменная объявлена, но не инициализирована
let x;
console.log(x); // undefined

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

// 3. Функция ничего не возвращает
function noReturn() {
  // Нет return
}
console.log(noReturn()); // undefined

// 4. Попытка доступа к несуществующему свойству
const obj = { a: 1 };
console.log(obj.b); // undefined

// 5. Массив с пробелами
const arr = [1, , 3];
console.log(arr[1]); // undefined

Когда JavaScript использует null

// null почти никогда не присваивается автоматически
// Исключение: некоторые методы DOM
const element = document.querySelector('.non-existent');
console.log(element); // null (не undefined!)

// Обычно null присваивают разработчики явно
let result = null; // Инициализация перед получением значения

if (data.status === 'error') {
  result = null;
}

Best Practices

// ХОРОШО: Явная проверка на null/undefined
if (value == null) {
  console.log('Нет значения');
}

// ХОРОШО: Использование nullish coalescing (??)
const name = user?.name ?? 'Anonymous';

// ХОРОШО: Optional chaining
const email = user?.profile?.email;

// ПЛОХО: Проверка typeof для undefined
if (typeof x === 'undefined') { // Неудобно
}

// ПЛОХО: Нестрогое сравнение в большом коде
if (x == null) { // Менее явно, чем ===
}

Сравнение с другими значениями

// null и undefined НЕ равны другим falsy значениям
Null:
- null == false;    // false
- null == 0;        // false
- null == '';       // false

Undefined:
- undefined == false;  // false
- undefined == 0;      // false
- undefined == '';     // false

// Только друг другу (при ==)
- null == undefined;   // true

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

Вывод

При сравнении null и undefined:

• С == они равны (true) — это одно из исключений JavaScript
• С === они не равны (false) — это разные типы
• undefined — это автоматически присваиваемое значение (переменная не инициализирована)
• null — это явное значение, которое присваивает разработчик
• Для современного кода используй ?? (nullish coalescing) и ?. (optional chaining)