2.10 Truthy a Falsy hodnoty

Výuka

Proč to potřebujeme vědět?

V JavaScriptu se jakákoliv hodnota může použít v podmínce - nejen true a false. JavaScript ji automaticky převede na boolean.

if ("hello") {
  // Provede se, protože "hello" je truthy
}

if (0) {
  // NEPROVEDE se, protože 0 je falsy
}

Toto chování je zásadní pro pochopení podmínek, logických operátorů a mnoha JavaScript idiomů.

Falsy hodnoty - kompletní seznam

V JavaScriptu je přesně 7 falsy hodnot (hodnot, které se převedou na false):

Truthy hodnoty

Všechno ostatní je truthy! Včetně věcí, které možná nečekáš:

Jak to funguje?

JavaScript provádí type coercion (přetypování) na boolean:

Boolean(hodnota)  // Explicitní převod
!!hodnota         // Zkratka (double NOT)

JavaScript

// Testování falsy hodnot
const falsyValues = [false, 0, -0, 0n, "", null, undefined, NaN];

for (const val of falsyValues) {
  if (val) {
    console.log("truthy");
  } else {
    console.log(`${val} je falsy`);
  }
}
// Všechny jsou falsy

// Překvapivé truthy hodnoty
if ([]) console.log("Prázdné pole je truthy!");
if ({}) console.log("Prázdný objekt je truthy!");
if ("0") console.log("String '0' je truthy!");
if ("false") console.log("String 'false' je truthy!");

// Praktické použití v podmínkách
const name = "";
if (name) {
  console.log(`Ahoj, ${name}`);
} else {
  console.log("Jméno nebylo zadáno");
}

// Default hodnoty s || (OR)
const username = "" || "Anonymous";  // "Anonymous"
const count = 0 || 10;               // 10 (POZOR: 0 je falsy!)

// Nullish coalescing ?? (jen null/undefined)
const username2 = "" ?? "Anonymous"; // "" (prázdný string NENÍ null)
const count2 = 0 ?? 10;              // 0 (nula NENÍ null)

// Short-circuit evaluation
const user = null;
const name = user && user.name;  // null (nepokračuje dál)

const user2 = { name: "Jan" };
const name2 = user2 && user2.name;  // "Jan"

// Guard clause pattern
function processUser(user) {
  if (!user) return;  // Falsy check
  if (!user.name) return;  // Prázdný string je falsy

  console.log(user.name);
}

// Pozor na nulu!
function displayCount(count) {
  // ❌ ŠPATNĚ - 0 je falsy, ale může být validní počet
  if (count) {
    console.log(`Počet: ${count}`);
  }

  // ✅ SPRÁVNĚ - explicitní check
  if (count !== undefined && count !== null) {
    console.log(`Počet: ${count}`);
  }

  // ✅ SPRÁVNĚ - nullish check
  if (count != null) {
    console.log(`Počet: ${count}`);
  }
}

displayCount(0);  // Mělo by vypsat "Počet: 0"

// Explicitní převod na boolean
Boolean(1);       // true
Boolean(0);       // false
Boolean("text");  // true
Boolean("");      // false

!!1;              // true (zkratka)
!!0;              // false

// Filtrování falsy hodnot z pole
const mixed = [0, 1, "", "text", null, undefined, false, true];
const truthy = mixed.filter(Boolean);
// [1, "text", true]

// Kontrola existence
const config = { debug: false };

// ❌ ŠPATNĚ - false je falsy, ale je to validní hodnota
if (config.debug) {
  enableDebug();
}

// ✅ SPRÁVNĚ
if (config.debug === true) {
  enableDebug();
}

// ✅ SPRÁVNĚ - kontrola existence klíče
if ("debug" in config) {
  console.log(`Debug je: ${config.debug}`);
}

TypeScript

// TypeScript a truthiness
const value: string | null = null;

if (value) {
  // TypeScript VÍ, že value je string (ne null)
  console.log(value.toUpperCase());
}

// Strict boolean expressions (volitelné pravidlo)
// S tímto pravidlem TS vyžaduje explicitní boolean
let count: number = 0;

// if (count) { }  // ❌ S strict pravidlem: Error
if (count !== 0) { }  // ✅ Explicitní

// Type narrowing s truthy check
function process(input: string | null | undefined) {
  if (input) {
    // input je string (vyloučeno null, undefined, "")
    console.log(input.length);
  }
}

// POZOR: truthy check vyloučí i prázdný string!
function greet(name: string | undefined) {
  if (name) {
    // name je string, ale "" je vyloučeno!
    console.log(`Hello, ${name}`);
  }
}

greet("");  // Nevypíše nic - možná nechceme

// Lepší approach
function greetBetter(name: string | undefined) {
  if (name !== undefined) {
    // name je string (včetně "")
    console.log(`Hello, ${name || "Anonymous"}`);
  }
}

// Nullish coalescing s typy
function getPort(config: { port?: number }): number {
  // ❌ || nahradí i 0
  // return config.port || 3000;

  // ✅ ?? nahradí jen null/undefined
  return config.port ?? 3000;
}

getPort({ port: 0 });  // 0 (ne 3000)

// Optional chaining + nullish coalescing
interface User {
  profile?: {
    avatar?: string;
  };
}

function getAvatar(user: User | null): string {
  return user?.profile?.avatar ?? "/default-avatar.png";
}

// Boolean assertion
function assertTruthy<T>(value: T): asserts value {
  if (!value) {
    throw new Error("Value is falsy");
  }
}

function example(name: string | null) {
  assertTruthy(name);
  // Po assertion TypeScript ví, že name je string
  console.log(name.toUpperCase());
}

Rozdíl JS vs TS

// TypeScript narrowing
function example(value: string | null | undefined) {
  if (value) {
    // value: string (vyloučeno null, undefined, "")
  }

  if (value != null) {
    // value: string (vyloučeno null, undefined, ALE NE "")
  }

  if (value !== undefined && value !== null) {
    // value: string (explicitní, nejčistší)
  }
}

Tip

💡 Zapamatuj si 7 falsy hodnot:

// Mnemotechnika: "0 NaN null undefined false prázdný_string"
false, 0, -0, 0n, "", null, undefined, NaN

💡 Používej ?? místo || pro default hodnoty:

// ❌ || nahradí všechny falsy
const port = config.port || 3000;  // 0 → 3000 (špatně!)

// ✅ ?? nahradí jen null/undefined
const port = config.port ?? 3000;  // 0 → 0 (správně!)

💡 Prázdné pole/objekt JSOU truthy:

// ❌ Toto nefunguje jak čekáš
if (array) {
  // Provede se i pro []
}

// ✅ Kontroluj length
if (array.length > 0) {
  // Provede se jen pro neprázdné pole
}

💡 filter(Boolean) pro odstranění falsy hodnot:

const items = [0, "a", null, "b", undefined, "c"];
const clean = items.filter(Boolean);
// ["a", "b", "c"]

💡 Explicitní kontrola je čitelnější:

// ❌ Spoléhá na falsy - může být matoucí
if (!user) return;

// ✅ Explicitní - jasný záměr
if (user === null || user === undefined) return;
// nebo
if (user == null) return;  // == null pokrývá obě