Avatar ·

Как определить, равна ли переменная undefined или null в JavaScript?

Всем привет! Я только начал изучать JavaScript и столкнулся с такой проблемой. В моём коде часто нужно проверять, существует ли переменная или нет, но я путаюсь между `undefined` и `null`. Например, у меня есть функция, которая принимает параметр `name`. Если пользователь не передал имя, я хочу вывести сообщение "Имя не указано". Но если он передал `null`, я тоже хочу обработать это как отсутствие имени. Вот так я пытался сделать: ```javascript function greet(name) { if (name == undefined) { console.log("Имя не указано"); } else { console.log("Привет, " + name); } } greet(); // выводит "Имя не указано" — работает greet(null); // выводит "Привет, null" — а должно быть "Имя не указано"! ``` Почему `name == undefined` не ловит `null`? Я читал, что есть операторы `==` и `===`, но не понимаю разницу. Также слышал про `typeof`, но он вроде для строк. Подскажите, как правильно проверять на `undefined` и `null` одновременно? И есть ли разница между этими двумя значениями в реальных проектах? Заранее спасибо! <<>>

Почему ваш код не работает с null

Дело в том, что undefined и null — это два разных типа данных в JavaScript, хотя оба обозначают "отсутствие значения". Оператор == (нестрогое равенство) выполняет приведение типов, и в спецификации языка есть специальное правило: null == undefined возвращает true. Однако в вашем коде вы сравниваете name == undefined, а не name == null. Когда вы передаёте null, JavaScript проверяет: "равно ли null значению undefined?" — и по правилам приведения это true. Но!

Проблема в том, что вы написали name == undefined — это работает для обоих случаев, но только если вы не используете строгий режим или не переопределили глобальную переменную undefined. На практике лучше избегать такого подхода. Вот исправленный вариант:

function greet(name) {
  // Проверяем на null или undefined с помощью строгого равенства
  if (name === null || name === undefined) {
    console.log("Имя не указано");
  } else {
    console.log("Привет, " + name);
  }
}

greet(); // "Имя не указано"
greet(null); // "Имя не указано"
greet("Анна"); // "Привет, Анна"

Лучший способ: оператор == null

Самый краткий и надёжный метод — использовать нестрогое равенство с null:

if (name == null) {
  // name === null или name === undefined
}

Это работает, потому что null == undefined даёт true, а с любым другим значением (0, false, пустая строка) — false. Так вы покрываете оба случая одной строкой.

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

  • undefined — значение по умолчанию для неинициализированных переменных, отсутствующих свойств объекта, возвращаемое значение функции без return. Это "ещё не назначено".
  • null — явное указание "значения нет". Разработчик сам присваивает null, чтобы обнулить переменную или показать, что объект отсутствует.

Дополнительные методы проверки

Иногда нужно различать эти два значения. Например:

// Строгая проверка на undefined
if (typeof name === 'undefined') { ... }

// Строгая проверка на null
if (name === null) { ... }

// Проверка, что переменная определена и не null
if (name != null) { ... } // то же самое, что name !== null && name !== undefined

Важно: Используйте === и !== для строгих сравнений, чтобы избежать неожиданных приведений типов. А для одновременной проверки на null и undefined — == null или === null || === undefined.

<<>>

Альтернативный подход: использование Optional Chaining и Nullish Coalescing

В современных проектах (ES2020+) можно обойтись без явных проверок. Вот два полезных оператора:

  • Optional Chaining (?.) — безопасный доступ к свойствам, если значение null или undefined.
  • Nullish Coalescing (??) — возвращает правый операнд, если левый равен null или undefined (но не false или 0).

Пример с вашей функцией:

function greet(name) {
  const displayName = name ?? "Имя не указано";
  console.log("Привет, " + displayName);
}

greet(); // "Привет, Имя не указано"
greet(null); // "Привет, Имя не указано"
greet("Анна"); // "Привет, Анна"

Этот код лаконичен и читаем. Оператор ?? специально создан для обработки null/undefined, в отличие от ||, который "ловит" все ложные значения (0, '', false).

Если вы работаете в среде, где поддерживается ES2020 (Node.js 14+, современные браузеры), рекомендую использовать именно этот подход.