Lekce 0.6 · JavaScript obecně

Podmínky a logické operátory

Truthy a falsy, ternár, &&, ||, ??, ?., switch a early return.

Než začneme: výhybky na trati

Program běží jako vlak po kolejích – řádek za řádkem. Podmínky jsou výhybky: podle nějaké otázky pošlou vlak jednou, nebo druhou cestou. „Je uživatel přihlášený?“ „Je košík prázdný?“ „Došla data ze serveru?“

JavaScript má na výhybky dvě skupiny nástrojů. Příkazy (if, switch) řídí, které řádky se provedou. Operátory (? :, &&, ||, ??, ?.) vybírají hodnotu přímo uvnitř výrazu – a právě ty v Reactu potkáš nejčastěji, protože v JSX se if napsat nedá.

1. if, else a early return

const age = 17

if (age >= 18) {
  console.log('Dospělý')
} else if (age >= 15) {
  console.log('Teenager')
} else {
  console.log('Dítě')
}

// Jednořádková podoba – bez závorek jen pro jeden příkaz
if (age < 0) return

Early return místo pyramidy

Když funkce musí ověřit několik věcí, nevnořuj podmínky do sebe. Nejdřív vyřiď výjimky a skonči, hlavní případ nech na konec:

// ❌ Pyramida
function checkout(cart, user) {
  if (user) {
    if (cart.length > 0) {
      if (user.address) {
        return sendOrder(cart, user)
      } else {
        return 'Chybí adresa'
      }
    } else {
      return 'Košík je prázdný'
    }
  } else {
    return 'Přihlas se'
  }
}

// ✅ Early return – čte se shora dolů jako kontrolní seznam
function checkout(cart, user) {
  if (!user) return 'Přihlas se'
  if (cart.length === 0) return 'Košík je prázdný'
  if (!user.address) return 'Chybí adresa'
  return sendOrder(cart, user)
}

2. Truthy a falsy

Když JavaScript potřebuje ano/ne (v if, v ternáru, u &&) a dostane něco jiného než boolean, převede si to. Nepravdivých (falsy) hodnot je jen šest, všechno ostatní je pravdivé (truthy):

Falsy – bere se jako NE	Truthy – bere se jako ANO (i když to tak nevypadá)
`false`	`true`
`0`	`42`, `-1`, `0.5`
`''` (prázdný text)	`'0'`, `'false'`, `' '` (mezera)
`null`	`[]` (prázdné pole)
`undefined`	`{}` (prázdný objekt)
`NaN`	každá funkce, každé datum…

if ('ahoj') { … }        // provede se
if ('') { … }            // neprovede se
if (0) { … }             // neprovede se
if ([]) { … }            // ⚠️ provede se – prázdné pole je truthy!

if (items.length > 0)    // ✅ správný dotaz „obsahuje pole něco?“
if (items.length)        // funguje taky (0 je falsy), ale je méně jasné, na co se ptáš
if (Object.keys(obj).length > 0)   // „má objekt nějaké vlastnosti?“

Boolean('ahoj')          // true – převod na boolean
!!'ahoj'                 // true – totéž zkratkou (dvojí negace)

3. Logické operátory: a, nebo, ne

const age = 25
const hasTicket = true

age >= 18 && hasTicket     // true – A ZÁROVEŇ: musí platit obojí
age < 18 || hasTicket      // true – NEBO: stačí jedno
!hasTicket                 // false – NE: obrátí hodnotu

// Kombinace – závorky pro jistotu a čitelnost
const canEnter = (age >= 18 && hasTicket) || isVip
const isWorkday = day !== 'sobota' && day !== 'neděle'
const isWeekend = ['sobota', 'neděle'].includes(day)   // často čitelnější

4. Ternární operátor

Ternár je if/else zmáčknutý do výrazu: podmínka ? hodnotaKdyžAno : hodnotaKdyžNe. Na rozdíl od if má hodnotu, takže ho můžeš uložit do proměnné nebo vložit kamkoli do výrazu.

const label = isDone ? 'Hotovo' : 'Zbývá'
const price = isMember ? basePrice * 0.9 : basePrice
const greeting = `Dobr${hour < 12 ? 'é ráno' : 'ý den'}`
const className = `btn ${isActive ? 'btn-active' : ''}`

// Totéž s if – delší a potřebuje let
let label
if (isDone) {
  label = 'Hotovo'
} else {
  label = 'Zbývá'
}

5. && a || jako výběr hodnoty

Tady je zrada: && a || v JavaScriptu nevracejí true/false. Vracejí jednu ze svých stran:

Výraz	Když je a truthy	Když je a falsy
`a && b`	vrátí b	vrátí a
`a \|\| b`	vrátí a	vrátí b

'ahoj' && 'svět'     // 'svět'
'' && 'svět'         // ''
0 && 'svět'          // 0     ← pozor, číslo 0!
null && 'svět'       // null

'ahoj' || 'výchozí'  // 'ahoj'
'' || 'výchozí'      // 'výchozí'
0 || 'výchozí'       // 'výchozí'  ← nula se „ztratila“

// Typické použití
user && user.name              // přečti name, jen když user existuje (dnes spíš user?.name)
const name = input || 'Anonym' // výchozí hodnota pro prázdný vstup
isLoggedIn && showWelcome()    // zavolej, jen když platí podmínka

6. ?? a ?.: chybějící hodnoty

?? – výchozí hodnota jen pro „nic“

a ?? b vrátí b, jen když je a null nebo undefined. Nula, prázdný text a false jsou pro něj platné hodnoty.

const settings = { volume: 0, nickname: '', notifications: false }

settings.volume || 50          // 50 ❌ uživatel ztlumil na 0 a my mu pustili 50
settings.volume ?? 50          // 0  ✅

settings.notifications || true // true ❌ uživatel je vypnul
settings.notifications ?? true // false ✅

settings.theme ?? 'light'      // 'light' – vlastnost chybí → výchozí hodnota

// Přiřazení s výchozí hodnotou
options.retries ??= 3          // nastav na 3, jen když tam nic není

Hodnota a	a \|\| "x"	a ?? "x"
`0`	`"x"`	`0`
`''`	`"x"`	`''`
`false`	`"x"`	`false`
`null`	`"x"`	`"x"`
`undefined`	`"x"`	`"x"`
`'ahoj'`	`'ahoj'`	`'ahoj'`

?. – čti, jen když je z čeho

const user = { name: 'Jana', address: null }

user.address.city          // 💥 TypeError: Cannot read properties of null
user.address?.city         // undefined – ?. se zastaví a vrátí undefined
user.contacts?.[0]         // undefined – funguje i s hranatými závorkami
user.getAge?.()            // undefined – a s voláním funkce, která nemusí existovat

// Typická dvojice: bezpečně přečíst + výchozí hodnota
const city = user.address?.city ?? 'neznámé'

// Data ze serveru, která ještě nedorazila
const firstTitle = response?.data?.items?.[0]?.title ?? 'Žádné položky'

Ukázka

Laboratoř operátorů

Co vidíš: Řada hodnot pro x a pod ní, co s každou udělá převod na boolean, ternár, &&, || a ??.

Vyzkoušej:

Vyber 0. x && 'pravá' vrátí 0 (ne false!), || nulu nahradí, ?? ji nechá.
Vyber '' a pak null. U prázdného textu se || a ?? liší, u null ne.
Vyber [] a {}. Obojí je truthy, přestože je „prázdné“.

Co z toho plyne: Falsy je jen šest hodnot. && a || vracejí jednu ze stran, ne boolean. ?? reaguje jen na null a undefined.

Načítám interaktivní část…

7. switch a slovník

Když porovnáváš jednu hodnotu s mnoha možnostmi, je switch přehlednější než řada if:

function statusLabel(status) {
  switch (status) {
    case 'new':
      return 'Nová'
    case 'paid':
      return 'Zaplacená'
    case 'shipped':
    case 'delivered':        // víc případů se stejným výsledkem
      return 'Na cestě'
    default:
      return 'Neznámý stav'
  }
}

Ve funkcích, které jen převádějí hodnotu na jinou, je často ještě kratší slovník (objekt):

const STATUS_LABELS = { new: 'Nová', paid: 'Zaplacená', shipped: 'Na cestě' }
const statusLabel = (status) => STATUS_LABELS[status] ?? 'Neznámý stav'

const ICONS = { success: '✅', error: '❌', warning: '⚠️' }
const icon = ICONS[type] ?? 'ℹ️'

switch naopak uvidíš u reducerů v Reactu (lekce 5), kde každá akce dělá něco jiného, ne jen vrací hodnotu.

Ověř si to

Kvíz Co vrátí 0 && 'ahoj'?

false0'ahoj'undefined

Kvíz settings.volume je 0. Co bude v settings.volume || 50?

050undefinedfalse

Kvíz Která hodnota je truthy?

''0[]null

Kvíz user je null. Co vrátí user?.name ?? 'Host'?

Chybunullundefined'Host'

Rozcvička

Výzva

Kdo je kdo

Rozcvička

Jeden ternár a jedno ??.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Kdo je kdo

1. ageLabel(20) má vrátit 'dospělý', ageLabel(12) 'dítě'. Hranice je 18 let. Použij ternár:
   podmínka ? 'dospělý' : 'dítě'
2. nameOrGuest('Jana') má vrátit 'Jana', nameOrGuest(null) 'Host'. Použij ??

Načítám interaktivní část…

Mám hotovo

Výzva

Bezpečné čtení a rozhodování

Střední Bonusová výzva

Šest funkcí, které rozhodují a bezpečně čtou data, která můžou chybět. Pozor na rozdíl mezi || a ?? – testy ho prověří.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Early return vyřídí výjimky na začátku funkce a zbaví tě pyramid z if/else.
Falsy je jen false, 0, '', null, undefined a NaN. Prázdné pole i objekt jsou truthy.
Ternár a ? b : c je if/else, který vrací hodnotu. Nevnořuj víc než jeden.
&& a || vracejí jednu ze stran, ne boolean – 0 && x je 0.
?? dosadí výchozí hodnotu jen za null/undefined, || i za 0 a ''. Skoro vždy chceš ??.
?. bezpečně čte z hodnoty, která může chybět. Typicky a?.b ?? výchozí.
switch pro mnoho případů s různou logikou, slovník pro převod hodnoty na jinou.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.