Пошук уроків, статей та іншого контенту
Розберіть значення null, яке використовується для явного позначення відсутності значення. Дізнайтеся, чим воно відрізняється від undefined.
nullnull — це спеціальне значення JavaScript, яке означає навмисну відсутність значення.
Програміст використовує null, коли хоче явно показати: змінна існує, але зараз не містить жодного об’єкта або іншого значення.
let selectedUser = null;
console.log(selectedUser); // nullУ цьому прикладі змінна selectedUser створена, але користувача ще не вибрано.
null часто використовують у таких ситуаціях:
об’єкт ще не створено;
значення буде отримано пізніше;
користувач нічого не вибрав;
результат пошуку відсутній;
потрібно скинути попереднє значення.
let currentMessage = "Нове повідомлення";
currentMessage = null;
console.log(currentMessage); // nullПісля присвоєння null змінна більше не містить текст повідомлення.
undefinedundefined означає, що значення не визначене.
Найчастіше JavaScript повертає undefined автоматично.
Якщо змінну оголосити, але не присвоїти їй значення, її значенням буде undefined.
let userName;
console.log(userName); // undefinedТут змінна userName існує, але значення для неї ще не встановлено.
Якщо звернутися до властивості, якої немає в об’єкті, JavaScript також поверне undefined.
const user = {
name: "Олена"
};
console.log(user.email); // undefinedВластивість email не була створена, тому її значення не визначене.
returnЯкщо функція нічого не повертає, результатом її виклику буде undefined.
function sayHello() {
console.log("Привіт!");
}
const result = sayHello();
console.log(result); // undefinedФункція виводить повідомлення, але не повертає значення через return.
null та undefinedОбидва значення пов’язані з відсутністю даних, але мають різний зміст:
undefined — значення не було встановлено;
null — значення навмисно встановили як відсутнє.
Порівняймо:
let firstValue;
let secondValue = null;
console.log(firstValue); // undefined
console.log(secondValue); // nullУ першому випадку значення не вказали. У другому випадку програміст явно записав null.
Цю різницю можна побачити на прикладі профілю користувача:
const user = {
name: "Андрій",
avatar: null
};
console.log(user.name); // "Андрій"
console.log(user.avatar); // nullavatar: null може означати, що користувач ще не завантажив зображення профілю. Властивість avatar існує, але її значення навмисно порожнє.
Якщо властивість avatar взагалі не додати до об’єкта, результатом буде undefined:
const user = {
name: "Андрій"
};
console.log(user.avatar); // undefinedДля перевірки типу значення використовують оператор typeof.
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"Результат typeof null може здатися помилковим. Насправді це відома історична особливість JavaScript: для null оператор typeof повертає "object".
Тому так перевіряти null не варто:
const value = null;
console.log(typeof value === "object"); // trueТака перевірка не доводить, що значення є звичайним об’єктом. Для точної перевірки потрібно порівнювати значення безпосередньо:
const value = null;
console.log(value === null); // trueПеревірка на undefined виглядає так:
let value;
console.log(value === undefined); // trueJavaScript має два основні оператори порівняння:
== — нестроге порівняння;
=== — строге порівняння.
Нестроге порівняння вважає null та undefined рівними:
console.log(null == undefined); // trueАле строге порівняння враховує і значення, і тип:
console.log(null === undefined); // falseУ більшості випадків рекомендують використовувати === та !==, тому що вони не виконують неочікуване перетворення типів.
Окремо перевірити null та undefined можна так:
const value = null;
if (value === null) {
console.log("Значення дорівнює null");
}
if (value === undefined) {
console.log("Значення дорівнює undefined");
}null або undefinedІноді потрібно перевірити, чи є значення відсутнім — незалежно від того, це null чи undefined.
Для цього можна використати нестроге порівняння:
function showName(name) {
if (name == null) {
console.log("Ім'я не вказане");
return;
}
console.log(`Ім'я: ${name}`);
}
showName(null); // Ім'я не вказане
showName(undefined); // Ім'я не вказане
showName("Марія"); // Ім'я: МаріяУмова name == null спеціально перевіряє лише два значення: null та undefined. Водночас для початківців часто зрозуміліше записувати перевірку явно:
function showName(name) {
if (name === null || name === undefined) {
console.log("Ім'я не вказане");
return;
}
console.log(`Ім'я: ${name}`);
}Такий запис довший, але одразу показує, які саме значення перевіряються.
null та undefinedІ null, і undefined є хибними значеннями. У логічному контексті вони поводяться як false.
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // falseТому можна перевірити наявність значення за допомогою if:
const userName = null;
if (userName) {
console.log(`Ім'я: ${userName}`);
} else {
console.log("Ім'я відсутнє");
}Однак така перевірка вважає відсутніми не лише null та undefined, а й інші хибні значення:
false;
0;
порожній рядок "";
NaN.
const count = 0;
if (!count) {
console.log("Умова спрацювала");
}У цьому прикладі 0 не є null або undefined, але умова все одно спрацювала. Тому, якщо потрібно перевірити саме відсутність значення, використовуйте явне порівняння.
Оператор ?? повертає значення праворуч, якщо ліворуч знаходиться null або undefined.
const userName = null;
const displayName = userName ?? "Гість";
console.log(displayName); // ГістьЦе зручно для встановлення значення за замовчуванням.
Важлива відмінність від оператора ||: || вважає відсутніми всі хибні значення, зокрема 0, false та порожній рядок.
const count = 0;
console.log(count || 10); // 10
console.log(count ?? 10); // 0У першому випадку || замінив 0 на 10. У другому випадку ?? залишив 0, тому що 0 не є ні null, ні undefined.
Розглянемо функцію, яка формує повідомлення для користувача:
function getWelcomeMessage(user) {
if (user === null || user === undefined) {
return "Користувача не знайдено";
}
const name = user.name ?? "Гість";
return `Вітаємо, ${name}!`;
}
const firstUser = {
name: "Софія"
};
const secondUser = {
name: null
};
console.log(getWelcomeMessage(firstUser)); // Вітаємо, Софія!
console.log(getWelcomeMessage(secondUser)); // Вітаємо, Гість!
console.log(getWelcomeMessage(null)); // Користувача не знайденоУ цьому прикладі:
null для всього користувача означає, що користувача не знайдено.
name: null означає, що користувач існує, але його ім’я відсутнє.
Оператор ?? підставляє "Гість", якщо ім’я дорівнює null або undefined.
null і undefined повністю однаковимиВони обидва означають відсутність значення, але їхній зміст різний. undefined зазвичай з’являється автоматично, а null встановлюється навмисно.
null за допомогою typeofconst value = null;
if (typeof value === "object") {
console.log("Це точно об'єкт");
}Цей код некоректний для перевірки null, оскільки typeof null повертає "object".
Правильний варіант:
if (value === null) {
console.log("Це null");
}|| замість ??const price = 0;
const actualPrice = price || 100;
console.log(actualPrice); // 100Якщо 0 є коректним значенням, потрібно використовувати ??:
const price = 0;
const actualPrice = price ?? 100;
console.log(actualPrice); // 0undefinedЯкщо значення може бути як null, так і undefined, перевірка лише на undefined буде неповною:
const value = null;
if (value === undefined) {
console.log("Значення відсутнє");
}Ця умова не спрацює. Для перевірки обох значень використовуйте:
if (value === null || value === undefined) {
console.log("Значення відсутнє");
}null — явна відсутність значення.
undefined — значення не було встановлено або не визначене.
null та undefined — різні значення і мають різні типи.
typeof null повертає "object" через історичну особливість JavaScript.
Для точної перевірки використовуйте === null або === undefined.
Оператор ?? підставляє значення за замовчуванням лише для null та undefined.
Оператор || також замінює 0, false і порожній рядок, тому він не завжди підходить для таких перевірок.