null и undefined

• Что такое undefined
• Что такое null
• Разница между null и undefined
• undefined в переменных
• undefined в объектах и массивах
• null на практике
• typeof null и undefined
• null и undefined в условиях
• Частые ошибки

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

Если совсем коротко:

• undefined - значение не задано;
• null - значение специально сделали пустым.

let userName;
let selectedUser = null;

console.log(userName);
console.log(selectedUser);

В консоли будет:

undefined
null

Что такое undefined

undefined означает, что значение не определено. Чаще всего оно появляется, когда переменная создана, но значение в нее еще не записали.

let message;

console.log(message);

Результат:

undefined

Переменная message существует, но внутри нее ничего нет. Поэтому JavaScript возвращает undefined.

Другими словами, undefined часто можно читать так: “значение пока не задано”.

Что такое null

null - это специальное значение, которое обычно используют, когда хотят явно показать пустоту.

let selectedProduct = null;

Такой код можно прочитать так: выбранного товара пока нет.

Главное отличие от undefined в том, что null обычно ставит сам разработчик. Мы как бы говорим JavaScript: здесь сейчас специально ничего нет.

Например, пользователь еще не выбран:

let currentUser = null;

Позже в эту переменную можно записать настоящее значение:

let currentUser = null;

currentUser = 'Алексей';

console.log(currentUser);

Результат:

Алексей

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

Разницу удобно запомнить через намерение.

undefined часто появляется само:

let age;

console.log(age);

Мы не задали значение, поэтому получили undefined.

null мы обычно задаем сами:

let age = null;

console.log(age);

Здесь мы явно записали пустое значение.

В простых учебных примерах можно думать так:

• undefined - JavaScript не нашел значения;
• null - разработчик сам указал, что значения нет.

undefined в переменных

Если объявить переменную без значения, она получит undefined.

let city;

console.log(city);

В консоли будет:

undefined

После присваивания значение изменится:

let city;

city = 'Москва';

console.log(city);

Результат:

Москва

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

let city = 'Москва';

undefined в объектах и массивах

undefined можно получить, если обратиться к свойству объекта, которого нет.

let user = {
  name: 'Алексей'
};

console.log(user.age);

Результат:

undefined

У объекта user есть свойство name, но свойства age нет. Поэтому JavaScript возвращает undefined.

Похожая ситуация может быть с массивом:

let courses = ['HTML', 'CSS', 'JavaScript'];

console.log(courses[5]);

Результат:

undefined

Элемента с индексом 5 в массиве нет, поэтому значение не определено.

Объекты и массивы мы будем подробно разбирать позже. Сейчас важно понять сам принцип: если JavaScript не находит значение, часто результатом будет undefined.

null на практике

null часто используют как явный признак пустого результата.

Например, метод querySelector() возвращает null, если элемент на странице не найден:

let button = document.querySelector('.send-button');

console.log(button);

Если элемента с классом send-button нет, в переменной button будет null.

Это удобно: мы понимаем, что поиск выполнен, но результата нет.

В своих переменных null тоже можно использовать, когда значение появится позже:

let activeModal = null;

// позже сюда можно записать найденное окно

Такой код показывает намерение: переменная нужна, но сейчас в ней нет выбранного значения.

typeof null и undefined

Проверим тип undefined:

console.log(typeof undefined);

Результат:

undefined

Здесь все ожидаемо.

А теперь проверим null:

console.log(typeof null);

Результат:

object

Это известная особенность JavaScript. На самом деле null - отдельное значение, но typeof null возвращает object.

На первых уроках достаточно просто запомнить этот момент. Если увидели typeof null и результат object, это не ошибка в вашем коде.

null и undefined в условиях

В условиях null и undefined ведут себя как ложные значения.

let user = null;

if (user) {
  console.log('Пользователь найден');
}

Сообщение не появится, потому что null в условии дает ложный результат.

С undefined будет похоже:

let userName;

if (userName) {
  console.log('Имя задано');
}

Сообщение тоже не появится, потому что значение не задано.

Подробно условия мы разберем дальше. Сейчас важно понимать, что null и undefined часто проверяют перед использованием значения.

Частые ошибки

Первая ошибка - думать, что null и undefined это одно и то же. Оба значения говорят об отсутствии данных, но null обычно задается явно, а undefined чаще появляется, когда значение не было задано.

Вторая ошибка - вызывать методы у null или undefined.

let message = null;

console.log(message.toUpperCase());

Такой код вызовет ошибку, потому что у null нет строковых методов.

Третья ошибка - удивляться typeof null.

console.log(typeof null);

Результат будет object. Это старая особенность языка, которую нужно просто учитывать.

Четвертая ошибка - путать переменную без значения и несуществующую переменную.

let name;

console.log(name);

Здесь переменная существует, поэтому будет undefined.

console.log(name);

А если переменная вообще не была объявлена, JavaScript выдаст ошибку ReferenceError.

Что дальше

Мы разобрали значения null и undefined, посмотрели, когда они появляются и чем отличаются друг от друга.

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