Learn JavaScript

Truthy и Falsy в JavaScript

В условиях JavaScript ожидает логическое значение - true или false. Но на практике в if, while, тернарном операторе и логических выражениях часто встречаются не булевы значения. В таких местах JavaScript выполняет неявное приведение к boolean.

if ("hello") {
  console.log("выполнится");
}

Что такое truthy и falsy

  • falsy - значения, которые при приведении к boolean становятся false
  • truthy - все остальные значения, которые становятся true

Проверить приведение можно через Boolean(value) или двойное отрицание !!value.

console.log(Boolean(0));    // false
console.log(!!"text");      // true

Полный список falsy-значений

В JavaScript всего несколько falsy-значений:

  • false
  • 0 и -0
  • 0n (BigInt ноль)
  • "" (пустая строка)
  • null
  • undefined
  • NaN

Все остальные значения - truthy.

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

Частые ловушки

”0” - это truthy

Строка "0" не пустая, значит она truthy.

console.log(Boolean("0")); // true

Если в форме или из URL приходит строка, "0" в if ("0") будет считаться “истиной”. Для числовой проверки строку нужно превратить в число.

const countStr = "0";
const count = Number(countStr);

console.log(Boolean(count)); // false

Пробел ” ” - тоже truthy

console.log(Boolean(" ")); // true

Если ожидается “пустое поле”, лучше использовать trim():

const input = "   ";
console.log(input.trim() === ""); // true

Пустой массив и пустой объект - truthy

Даже если массив пустой, он truthy, потому что это объект.

console.log(Boolean([]));  // true
console.log(Boolean({}));  // true

Неверный паттерн:

const items = [];
if (items) {
  console.log("кажется, что есть элементы, но это не так");
}

Правильнее проверять длину:

const items = [];
if (items.length > 0) {
  console.log("элементы есть");
}

NaN в условиях - falsy

NaN превращается в false, но обычно важнее не его “ложность”, а то, что это сигнал ошибки вычисления.

const n = Number("x");
if (n) {
  console.log("не выполнится");
}
console.log(Number.isNaN(n)); // true

Где работает приведение к boolean

if / else

const value = "";

if (value) {
  console.log("truthy");
} else {
  console.log("falsy"); // выполнится
}

Тернарный оператор

const name = "Sam";
const label = name ? "есть имя" : "имя пустое";

console.log(label); // "есть имя"

while

let counter = 3;

while (counter) {
  console.log(counter);
  counter -= 1;
}

Truthy/Falsy и логические операторы

Логические операторы в JavaScript часто возвращают не true/false, а один из операндов.

Оператор || (или)

a || b возвращает первое truthy-значение, иначе последнее.

console.log("" || "default");   // "default"
console.log("text" || "default"); // "text"

Это удобно для значения по умолчанию, но есть нюанс: 0 и "" будут считаться “пустыми”.

const page = 0;
console.log(page || 1); // 1 (иногда это ошибка логики)

Если нужно отличать 0 от null/undefined, лучше использовать ??.

Оператор ?? (nullish coalescing)

a ?? b подставляет b только если a равно null или undefined.

const page = 0;

console.log(page ?? 1); // 0
console.log(null ?? 1); // 1
console.log(undefined ?? 1); // 1

Оператор && (и)

a && b возвращает первое falsy-значение, иначе последнее.

console.log("ok" && 123); // 123
console.log(0 && "x");    // 0

Часто используется для “условного выполнения”:

const isReady = true;
isReady && console.log("запуск");

Явная проверка лучше неявной

Truthy/falsy удобно, но в важных местах лучше делать проверку точнее: сравнивать с null, проверять длину строки, приводить к числу.

Примеры явных проверок:

const text = "  ";
if (text.trim() !== "") {
  console.log("строка не пустая");
}

const countStr = "0";
const count = Number(countStr);
if (Number.isFinite(count) && count > 0) {
  console.log("count больше 0");
}

const value = null;
if (value === null) {
  console.log("значение отсутствует");
}

Что стоит запомнить

  • Falsy-значений всего 7: false, 0, -0, 0n, "", null, undefined, NaN.
  • Все остальные значения - truthy (включая "0", " ", [], {}).
  • || и && возвращают один из операндов, а не обязательно true/false.
  • Для значений по умолчанию часто удобнее ??, если 0 и "" являются валидными значениями.