Avatar ·

Чем отличаются null и undefined в JavaScript и когда их использовать?

Всем привет! Я только начал изучать JavaScript и никак не могу понять разницу между null и undefined. Вроде бы и то, и другое означает "ничего", но почему тогда в языке существует два разных значения? Смотрю примеры кода: ```javascript let a; console.log(a); // undefined let b = null; console.log(b); // null ``` В первом случае переменная объявлена, но не инициализирована — получаем undefined. Во втором я сам присваиваю null. Но в чем принципиальная разница? Когда нужно использовать null, а когда undefined? Еще я заметил, что при сравнении через == они равны, а через === — нет: ```javascript console.log(null == undefined); // true console.log(null === undefined); // false ``` Это меня окончательно запутало. Объясните, пожалуйста, как новичку: что есть что, и как не ошибаться в коде? Заранее спасибо! <<>>

Главное отличие: undefined — "ещё нет значения", null — "значение намеренно отсутствует"

В JavaScript undefined и null — это два разных примитивных типа данных, которые обозначают отсутствие значения, но с разной семантикой.

Когда возникает undefined

undefined — это значение по умолчанию, которое JavaScript присваивает автоматически в следующих ситуациях:

  • Переменная объявлена, но ей не присвоено значение
  • Функция не возвращает явно значение
  • Обращение к несуществующему свойству объекта
  • Аргумент функции не передан при вызове
// 1. Неинициализированная переменная
let name;
console.log(name); // undefined

// 2. Функция без return
function doNothing() {}
console.log(doNothing()); // undefined

// 3. Несуществующее свойство
const user = { age: 25 };
console.log(user.name); // undefined

// 4. Пропущенный аргумент
function greet(name) {
  console.log(`Hello, ${name}`);
}
greet(); // Hello, undefined

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

null — это значение, которое разработчик присваивает намеренно, чтобы показать: "здесь должно быть значение, но сейчас его нет". Это осознанный выбор программиста.

// Явное указание на отсутствие значения
let selectedUser = null; // Пользователь не выбран

// Сброс значения
let data = fetchData();
data = null; // Явно очищаем данные

// Проверка на null после получения данных
function findUser(id) {
  // Если пользователь не найден, возвращаем null
  return userExists ? user : null;
}

Сравнение null и undefined

Нестрогое сравнение (==) считает их равными из-за исторических причин (специальное правило в спецификации). Строгое сравнение (===) показывает их различие, так как это разные типы:

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

console.log(null == undefined);  // true (нестрогое сравнение)
console.log(null === undefined); // false (разные типы)

Практические рекомендации

  • Никогда не присваивайте undefined вручную — используйте null для явного указания отсутствия значения
  • Проверяйте наличие значения с помощью строгого сравнения: if (value === null) или if (value === undefined)
  • Для проверки на "пустое значение" используйте if (value == null) — это поймает и null, и undefined
  • В функциях возвращайте null для обозначения "ничего не найдено", а не undefined
// Хорошая практика
function getConfig(key) {
  const config = loadConfig();
  return config[key] ?? null; // Если ключа нет — вернём null
}

// Плохая практика
function getConfig(key) {
  const config = loadConfig();
  return config[key]; // Может вернуть undefined
}

Итог

undefined — это "значение ещё не определено" (системное). null — это "значение намеренно отсутствует" (программистское). Используйте null в своём коде, а undefined оставьте JavaScript для автоматических ситуаций.

<<>>

Практический подход: используйте оператор нулевого слияния (??)

В современном JavaScript (ES2020+) есть удобный способ работать с null и undefined — оператор ??. Он возвращает правый операнд, только если левый равен null или undefined (в отличие от ||, который отсекает все falsy-значения).

// Оператор ?? работает только с null/undefined
const value = null ?? 'default';
console.log(value); // "default"

const value2 = 0 ?? 'default';
console.log(value2); // 0 (0 — не null и не undefined)

// Сравните с ||
const value3 = 0 || 'default';
console.log(value3); // "default" (0 — falsy)

Этот оператор помогает избежать ошибок, когда нужно отличить "намеренное отсутствие значения" (null) от "нормального falsy-значения" (0, '', false). Рекомендую использовать ?? для установки значений по умолчанию и ?. (опциональная цепочка) для безопасного доступа к свойствам:

const user = { profile: null };
console.log(user?.profile?.name ?? 'Аноним'); // "Аноним"