null и undefined

Вернёмся в кладовку. Коробка может оказаться пустой по двум причинам. В одну ещё ничего не положили: до неё не дошли руки. В другую положили записку «здесь пусто»: кто-то проверил и решил, что так и должно быть. В JavaScript для этих двух случаев есть два разных значения.

Переменную можно объявить через let и не дать ей значения. Если прочитать такую переменную, программа не остановится с ошибкой:

let answer;
console.log(answer);  // undefined
answer = 42;
console.log(answer);  // 42

Давайте разберём пример по строкам:

1. let answer; объявляет переменную без значения.
2. console.log(answer); печатает undefined.
3. answer = 42; кладёт в переменную число.
4. Второй console.log(answer); печатает 42.

До присваивания в answer уже что-то лежит — значение undefined. В JavaScript «значения нет» означают два значения: undefined и null. Появляются они по-разному.

Здесь аналогия с пустой коробкой перестаёт работать. Настоящая пустая коробка ничего не содержит, а undefined и null — сами значения. Их можно прочитать, напечатать и положить в другую переменную.

Где появляется undefined

Значение undefined JavaScript подставляет сам, когда значения не дали. Таких случаев три.

Переменная без значения

Переменная, объявленная через let без =, хранит undefined, пока ей ничего не присвоили. Это answer из примера выше.

Отсутствующее свойство

Свойство — значение, которое хранится внутри другого значения под своим именем. Точка после имени читает свойство: Math.PI — число π, а Math.sqrt — функция, которая вычисляет квадратный корень. Если свойства с таким именем нет, точка даёт undefined, а не ошибку:

console.log(Math.PI);  // 3.141592653589793
console.log(Math.pi);  // undefined

Функция без return

Если в функции нет return, её вызов всё равно возвращает значение, и это undefined:

function show(x) {
    console.log(x);
}

const result = show(5);  // 5
console.log(result);  // undefined

Вызов show(5) печатает 5 внутри функции. Вернуть ей нечего, поэтому в result попадает undefined.

Необъявленное имя — это ошибка

Переменная, которую объявили без значения, существует и хранит undefined. С именем, которое нигде не объявлено, всё иначе: если программа читает такое имя, она останавливается с ReferenceError.

null записывает программа

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

Например, победитель игры ещё не известен, и программа пишет let winner = null;. Когда победитель определится, переменной присвоят строку с его именем. Читатель кода видит, что пустое значение здесь задумано, а не забыто.

Так undefined значит «значение не задали», а null — «значения нет, и это сделано намеренно». Даже typeof у них разный: "undefined" для undefined и "object" для null.

Этот вопрос часто задают на собеседовании: «Чем null отличается от undefined?» Ответ состоит из трёх частей:

• undefined JavaScript подставляет сам: у переменной без значения, у отсутствующего свойства, у функции без return;
• null сам не появляется — его намеренно записывает код;
• typeof undefined даёт "undefined", а typeof null — "object".

Частая ошибка

Имя свойства набрали не теми буквами, Math.pi вместо Math.PI:

const radius = 2;
const length = 2 * Math.pi * radius;  // ✗
console.log(length);  // NaN

Ошибки нет: Math.pi даёт undefined, а умножение на undefined даёт NaN. Программа не останавливается, и NaN уходит дальше в следующие вычисления, поэтому такую опечатку трудно заметить. JavaScript различает большие и маленькие буквы. Исправленная строка — const length = 2 * Math.PI * radius;.

Главное

• undefined JavaScript подставляет сам: у переменной без значения, у отсутствующего свойства и у функции без return.
• null записывает код, чтобы явно сказать «значения нет».
• typeof undefined — это "undefined", а typeof null — "object".
• Необъявленное имя при чтении останавливает программу с ReferenceError, а не даёт undefined.