Разница между null и undefined: зачем это знать

Если вы не понимаете, в чем разница между null и undefined, эта статья для вас. Мы разберемся с этими двумя «пустыми» значениями раз и навсегда, используя простую аналогию с котом в коробке.

В конце статьи вы сможете пройти тест и узнать, насколько хорошо усвоили тему.

Что такое undefined

Представьте, что ваш друг поставил на стол картонную коробку с надписью «Котик» и ушёл. Коробка закрыта плотной лентой, а вскрывать её пока нельзя — друг попросил дождаться его возвращения.

Сидит ли внутри настоящий котик, лежат игрушки, корм или что-то совсем другое? Это классический пример состояния undefined.

Когда мы создаём переменную в JavaScript без значения, система автоматически наполняет её «неопределённостью»:

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

Здесь box существует в памяти, занимает место, но содержимое коробки неопределено.

Важно понимать разницу между undefined и ошибкой при обращении к необъявленной переменной:

• Если коробка (box) существует, но содержимое не определено — это undefined. 
• Если же мы пытаемся заглянуть в коробку, которой вообще нет (nonExistentBox), JavaScript вернет ошибку.

			let box;
console.log(box); // undefined - коробка есть, но пуста
console.log(nonExistentBox); // ReferenceError - коробки вообще нет в природе
		

Неопределённость возникает, например, когда мы пытаемся заглянуть в несуществующее свойство объекта:

			const petBox = {
  name: "Мурзик",
  color: "рыжий"
};

console.log(petBox.age); // undefined
		

Мы спрашиваем: «Какой возраст у питомца в коробке?», а JavaScript отвечает: «Не определено». Не «ноль лет» и не «питомец бессмертный» — именно «информации об этом нет».

Функции в JavaScript тоже связаны с понятием неопределённости. Если функция не возвращает явное значение через return, она автоматически возвращает undefined — как будто мы отправили кого-то принести кота, но он вернулся с пустыми руками и пожал плечами:

			function tryToFindCat() {
  // Ищем, ищем, но ничего не возвращаем
}

const searchResult = tryToFindCat();
console.log(searchResult); // undefined
		

Особенно интересно поведение параметров функций. Когда мы объявляем функцию с параметрами, но при вызове не передаем для них значения, они получают значение undefined:

			function putCatInBox(cat, box) {
  console.log(`Кладём ${cat} в ${box}`);
}

putCatInBox("Мурзика"); // "Кладём Мурзика в undefined"
		

Мы пытались положить кота в коробку, но забыли уточнить, в какую именно. JavaScript не стал ломать программу, а просто обозначил коробку как «неопределённую».

Еще один пример, но с массивом — когда мы обращаемся к несуществующему элементу, JavaScript не ломается с ошибкой, а возвращает undefined:

			const cats = ["Мурзик", "Барсик", "Васька"];
console.log(cats[10]); // undefined - кота с индексом 10 не существует
		

Что такое null

Помните нашу коробку с надписью «Котик»? Ваш друг вернулся, открыл коробку, а она пустая. Ни котика, ни игрушек — ничего.

В JavaScript это состояние называется null — значение, которое означает «здесь ничего нет». В отличие от undefined, где значение существует, но нам недоступно, null явно указывает на отсутствие значения.

Когда мы говорим о null, важно понимать: переменная (или коробка) существует, но в неё намеренно ничего не положили. Это не ошибка — это осознанное решение.

			// Создаём коробку для котика
let catBox = null;

console.log(catBox); // null
console.log(typeof catBox); // "object" - одна из особенностей JavaScript!
		

Обратите внимание на интересную деталь: typeof null возвращает "object", хотя null не является объектом. Это исторический баг JavaScript, который так и не исправили ради обратной совместимости.

null vs undefined: в чём разница?

Вернёмся к нашей аналогии:

• undefined — коробки нет или она закрыта, поэтому вы не знаете, что внутри.
• null — коробка открыта, но она пуста.

Значение null используют для явного указания «здесь ничего нет», а undefined чаще возникает, когда значение ещё не определено.

Типичные ошибки и как их избегать

Работая с «пустыми коробками» в JavaScript, очень легко ошибиться. Рассмотрим распространенные ошибки при работе с null и undefined, которые могут привести к неожиданному поведению программы.

Коварное равенство

Источник путаницы — различие между нестрогим (==) и строгим (===) сравнением. Представьте, что есть две коробки: одна пустая (null), а вторая даже не открыта (undefined).

			let emptyBox = null; // Пустая коробка
let unknownBox = undefined; // Коробка, о содержимом которой ничего не известно

// Нестрогое сравнение
console.log(emptyBox == unknownBox); // true - Подождите, что?!
		

Удивлены? При использовании нестрогого сравнения null и undefined считаются равными. По этой причине используют строгое сравнение:

			console.log(emptyBox === unknownBox); // false - Так-то лучше!
		

Ошибки в логике проверки значений

Ещё одна распространенная ошибка связана с проверкой наличия значений:

			let catBox = null;

// Неправильно:
if (!catBox) {
  console.log("Коробка пуста"); // Сработает для null, undefined, 0, "" и false
}

// Правильно:
if (catBox === null || catBox === undefined) {
  console.log("В коробке нет котика или мы не знаем");
}
		

Безопасный доступ к свойствам объектов

Ноль и пустая строка — это не то же самое, что отсутствие значения. Проверяйте значения правильно, чтобы избежать ошибок в логике программы. Для безопасного доступа к свойствам объектов используйте опциональную цепочку.

			function describeCat(box) {
  // Не вызовет ошибку, даже если box равен null
  console.log(`Имя котика: ${box?.cat?.name ?? "неизвестно"}`);
}
		

Undefined в логических операциях

В логических операциях JavaScript значение undefined всегда приводится к false. Это интуитивно понятно: если переменная не имеет определенного значения, то любые условия с ее участием не могут считаться выполненными.

Например, если мы проверяем if (переменная), то при значении undefined условие не сработает, что соответствует логике языка — нельзя утверждать наличие того, что не определено.

Особенности сравнения с undefined

И последнее, что стоит знать о неопределённости — она равна только самой себе при строгом сравнении. При нестрогом сравнении она также равна null:

			console.log(undefined === undefined); // true - неопределённость идентична сама себе
console.log(undefined === null); // false - это разные понятия
console.log(undefined == null); // true - но в нестрогом смысле они похожи
		

Как правильно использовать null и undefined

Когда стоит выбирать null

Представьте коробку, в которую намеренно не положили кота. Мы проверили, убедились, что кота там нет, и пометили коробку как «без кота». Именно так работает null — это осознанное указание на отсутствие значения:

			const petRegistry = {
  owner: "Мария",
  dog: {name: "Шарик", age: 3},
  cat: null  // Мария определенно не имеет кота
};
		

Использование null делает код самодокументируемым — любой разработчик поймет, что отсутствие кота здесь не случайность, а намерение.

Когда стоит выбирать undefined

В отличие от намеренной пустоты, undefined появляется естественным образом, когда JavaScript не знает, что должно находиться в «коробке».

Не стоит явно присваивать undefined переменным:

			// Не рекомендуется
let boxContents = undefined;

// Лучше просто:
let boxContents;
		

Это не вопрос стиля — использование undefined вместо null может запутать других разработчиков, заставляя их гадать: «это случайно неопределенное значение или преднамеренное указание на его отсутствие?»

Что запомнить

• Undefined возникает естественным образом, когда значение еще не определено: переменная объявлена, но не инициализирована.
• Null, напротив, намеренно указывает на отсутствие значения. 

При работе избегайте распространенные ошибки:

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

Используйте null для явного указания на отсутствие значения, а undefined пусть возникает естественным путём. Это делает код более понятным и снижает вероятность непредвиденных ошибок.