Пошук уроків, статей та іншого контенту
Дізнайтеся, як JavaScript перетворює різні значення на true або false у логічному контексті. Запам'ятайте falsy-значення та навчіться використовувати truthy/falsy-перевірки без неочікуваних помилок.
У JavaScript будь-яке значення може використовуватися в логічному контексті — наприклад, в умові if, циклі while або після логічного оператора !.
У такому контексті JavaScript автоматично перетворює значення на true або false.
Truthy — значення, яке перетворюється на true.
Falsy — значення, яке перетворюється на false.
const value = "JavaScript";
if (value) {
console.log("Значення truthy");
} else {
console.log("Значення falsy");
}Рядок "JavaScript" є непорожнім, тому він truthy. У консоль буде виведено:
Значення truthyУ JavaScript є невелика кількість значень, які є falsy:
false
0
-0
0n
""
null
undefined
NaNРозглянемо їх докладніше:
false — логічне значення «хиба»;
0 і -0 — числовий нуль;
0n — нуль типу BigInt;
"" — порожній рядок;
null — відсутність значення;
undefined — значення не визначене;
NaN — результат некоректної числової операції.
Усі інші звичайні значення є truthy.
Boolean()Функція Boolean() явно перетворює значення на логічний тип:
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean("Hello")); // true
console.log(Boolean(42)); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // trueТакож можна використати подвійне заперечення !!:
console.log(!!"Hello"); // true
console.log(!!0); // falseПерший оператор ! перетворює значення на boolean і змінює його, а другий ! змінює результат назад.
Truthy є, зокрема, такі значення:
true
1
-1
"Hello"
"0"
"false"
[]
{}
function () {}Важливо: непорожній рядок є truthy, навіть якщо в ньому написано "0" або "false".
if ("false") {
console.log("Цей код виконається");
}
if ("0") {
console.log("І цей код також виконається");
}Рядки "false" і "0" не є логічними значеннями false та числом 0. Це непорожні рядки, тому вони truthy.
Порожній масив [] і порожній об’єкт {} є truthy:
if ([]) {
console.log("Порожній масив є truthy");
}
if ({}) {
console.log("Порожній об’єкт є truthy");
}Це пояснюється тим, що масив і об’єкт — це об’єкти, а не «порожні значення» в логічному сенсі.
Якщо потрібно перевірити, чи має масив елементи, перевіряйте його довжину:
const users = [];
if (users.length > 0) {
console.log("Є користувачі");
} else {
console.log("Користувачів немає");
}Або коротше:
if (users.length) {
console.log("Є користувачі");
}У цьому прикладі users.length дорівнює 0, а 0 є falsy.
ifНайпоширеніший спосіб використання truthy/falsy — перевірка наявності значення:
function greet(name) {
if (name) {
console.log(`Привіт, ${name}!`);
} else {
console.log("Ім'я не вказано");
}
}
greet("Олена"); // Привіт, Олена!
greet(""); // Ім'я не вказано
greet(null); // Ім'я не вказаноУмова if (name) спрацює, якщо name має truthy-значення.
Такий підхід зручний, коли потрібно перевірити, чи передано будь-яке значення:
const username = "user123";
if (username) {
console.log("Користувач має ім'я");
}Але він не завжди підходить, якщо різні falsy-значення мають різний зміст.
!Оператор ! перетворює значення на boolean і заперечує його:
console.log(!true); // false
console.log(!false); // true
console.log(!0); // true
console.log(!1); // false
console.log(!""); // true
console.log(!"text"); // falseЙого часто використовують для перевірки, що значення відсутнє:
const password = "";
if (!password) {
console.log("Пароль не введено");
}У цьому випадку порожній рядок є falsy, тому !password дорівнює true.
||Оператор || повертає перше truthy-значення. Якщо всі значення falsy, він повертає останнє значення.
console.log("Hello" || "Привіт"); // Hello
console.log("" || "Привіт"); // Привіт
console.log(0 || 100); // 100Це часто використовують для значень за замовчуванням:
function createTitle(title) {
return title || "Без назви";
}
console.log(createTitle("Моя стаття")); // Моя стаття
console.log(createTitle("")); // Без назвиОднак || вважає всі falsy-значення відсутніми. Через це можуть виникати помилки:
function setVolume(volume) {
const actualVolume = volume || 50;
console.log(actualVolume);
}
setVolume(0); // 50, хоча 0 може бути правильним значеннямЯкщо 0 є допустимим значенням, || тут використовувати не варто.
??Оператор ?? повертає праве значення лише тоді, коли ліворуч знаходяться null або undefined.
console.log(null ?? "Значення за замовчуванням"); // Значення за замовчуванням
console.log(undefined ?? "Значення за замовчуванням"); // Значення за замовчуванням
console.log(0 ?? 50); // 0
console.log("" ?? "Текст"); // ""
console.log(false ?? true); // falseТому для значень за замовчуванням часто краще використовувати ??:
function setVolume(volume) {
const actualVolume = volume ?? 50;
console.log(actualVolume);
}
setVolume(0); // 0
setVolume(null); // 50
setVolume(undefined); // 50Різниця між || і ??:
console.log(0 || 10); // 10
console.log(0 ?? 10); // 0
console.log("" || "Текст"); // Текст
console.log("" ?? "Текст"); // ""Використовуйте ||, коли будь-яке falsy-значення має замінюватися значенням за замовчуванням.
Використовуйте ??, коли заміну потрібно робити лише для null або undefined.
Іноді краще перевірити конкретну умову явно, а не покладатися лише на truthy/falsy.
Наприклад, якщо число 0 є допустимим значенням:
const score = 0;
if (score !== null && score !== undefined) {
console.log(`Результат: ${score}`);
}Або можна скористатися оператором ??:
const score = 0;
const displayedScore = score ?? "Результат відсутній";
console.log(displayedScore); // 0Якщо потрібно перевірити саме булеве значення, використовуйте суворе порівняння:
const isReady = false;
if (isReady === false) {
console.log("Система ще не готова");
}Умова if (!isReady) у цьому випадку також спрацює, але вона прийме за «не готово» й інші falsy-значення, наприклад 0, "" або null.
function showProfile(profile) {
if (!profile) {
console.log("Профіль не знайдено");
return;
}
const name = profile.name ?? "Без імені";
const age = profile.age ?? "Вік не вказано";
console.log(`Ім'я: ${name}`);
console.log(`Вік: ${age}`);
if (profile.tags && profile.tags.length > 0) {
console.log(`Теги: ${profile.tags.join(", ")}`);
} else {
console.log("Тегів немає");
}
}
showProfile({
name: "Ірина",
age: 0,
tags: ["JavaScript", "Frontend"]
});
showProfile(null);Результат:
Ім'я: Ірина
Вік: 0
Теги: JavaScript, Frontend
Профіль не знайденоЗверніть увагу:
profile перевіряється через truthy/falsy;
profile.name ?? "Без імені" замінює тільки null або undefined;
значення age: 0 не замінюється, оскільки 0 може бути правильним значенням;
для масиву перевіряється tags.length, а не сам tags.
[] і {} falsyif ([]) {
console.log("Умова виконається");
}
if ({}) {
console.log("Умова також виконається");
}Порожні масиви й об’єкти truthy. Для перевірки порожнього масиву використовуйте array.length === 0.
"0" і 0console.log(Boolean("0")); // true
console.log(Boolean(0)); // false"0" — непорожній рядок, а 0 — число.
||, коли 0 або "" є допустимимиconst count = 0;
const result = count || 10;
console.log(result); // 10Якщо потрібно зберегти 0, використовуйте ??:
const count = 0;
const result = count ?? 10;
console.log(result); // 0const user = {
name: ""
};
if (user) {
console.log("Користувач існує");
}Об’єкт truthy, навіть якщо його властивість name містить порожній рядок. Для перевірки імені потрібно перевірити саме user.name.
if (user.name) {
console.log("Ім'я вказано");
}const value = 1;
console.log(value === true); // false
console.log(Boolean(value)); // trueЧисло 1 є truthy, але воно не дорівнює значенню true при строгому порівнянні ===.
У логічному контексті JavaScript перетворює будь-яке значення на true або false.
Falsy-значення: false, 0, -0, 0n, "", null, undefined і NaN.
Усі інші звичайні значення truthy.
Порожні масиви [] і об’єкти {} є truthy.
if (value) зручно використовувати для перевірки наявності значення.
|| замінює всі falsy-значення.
?? замінює лише null і undefined.
Якщо 0, false або порожній рядок є допустимими даними, обережно використовуйте ||.
Для перевірки конкретного значення застосовуйте явні порівняння, наприклад value === 0 або value !== undefined.