Domů O mně Služby Portfolio Učím Blog Kontakt
← Zpět na učím

1.13 Logické operátory

Výuka

Logické operátory pracují s boolean hodnotami a slouží pro kombinování podmínek.

Základní operátory

Operátor Název Popis Příklad
&& AND (a zároveň) True, pokud obě strany jsou true true && falsefalse
|| OR (nebo) True, pokud alespoň jedna strana je true true || falsetrue
! NOT (negace) Obrátí boolean hodnotu !truefalse

Short-circuit Evaluation (zkrácené vyhodnocení)

AND (&&):

  • Vyhodnocuje zleva doprava
  • Pokud je levá strana false, vrátí ji (pravá se nevyhodnotí)
  • Pokud je levá strana true, vrátí pravou stranu

OR (||):

  • Vyhodnocuje zleva doprava
  • Pokud je levá strana true, vrátí ji (pravá se nevyhodnotí)
  • Pokud je levá strana false, vrátí pravou stranu

JavaScript

// AND (&&)
true && true;    // true
true && false;   // false
false && true;   // false
false && false;  // false

// OR (||)
true || true;    // true
true || false;   // true
false || true;   // true
false || false;  // false

// NOT (!)
!true;           // false
!false;          // true
!!true;          // true (double negation)

// Short-circuit s hodnotami
const user = { name: 'Jan' };
const name = user && user.name;  // 'Jan'
const guest = null || 'Guest';   // 'Guest'

// Praktické použití - default hodnoty
function greet(name) {
  const finalName = name || 'Guest';
  console.log(`Hello, ${finalName}!`);
}

greet('Jan');    // "Hello, Jan!"
greet();         // "Hello, Guest!"

// Kombinace operátorů
const age = 18;
const hasID = true;
const canEnter = age >= 18 && hasID;  // true

// Priorita: ! > && > ||
!false && true || false;  // true
// Vyhodnocení: (!false && true) || false
//            = (true && true) || false
//            = true || false
//            = true

TypeScript

// Základní logické operace fungují stejně
const isAdult: boolean = true;
const hasLicense: boolean = false;

const canDrive = isAdult && hasLicense;  // false

// Type Narrowing s &&
function processValue(value: string | null) {
  // value && value.toUpperCase();  // OK, ale výsledek je string | null

  if (value && value.length > 0) {
    // TS ví, že zde value: string (narrowing)
    console.log(value.toUpperCase());
  }
}

// Union types a ||
type Status = 'pending' | 'success' | 'error';
function getStatusMessage(status: Status | undefined): string {
  return status || 'pending';  // fallback
}

// Nullish coalescing (??) - lepší než ||
const count: number | null = 0;
const result1 = count || 10;   // 10 (0 je falsy!)
const result2 = count ?? 10;   // 0  (jen null/undefined)

// Optional chaining s &&
interface User {
  name?: string;
  address?: {
    city?: string;
  };
}

const user: User = { name: 'Jan' };

// Starý způsob
const city1 = user && user.address && user.address.city;

// Nový způsob (optional chaining)
const city2 = user?.address?.city;  // undefined

Rozdíl JS vs TS

JavaScript:

  • Operátory pracují s jakýmikoli typy (truthy/falsy)
  • Výsledek může být jakákoli hodnota (ne jen boolean)

TypeScript:

  • Type narrowing - TS rozumí logickým kontrolám
  • Pomáhá s kontrolou null/undefined
  • Varuje před možnými chybami
function example(value: string | null) {
  // if (value) {  // TS narrowing: value je string
  //   value.toUpperCase();  // ✅ OK
  // }

  // value.toUpperCase();  // ❌ Error: může být null
}

Tip

💡 Truthy a Falsy hodnoty:

// Falsy (vyhodnotí se jako false)
false, 0, -0, 0n, '', null, undefined, NaN

// Truthy (vše ostatní)
true, 1, -1, 'hello', [], {}, ...

💡 Default hodnoty - pozor na 0 a '':

// ❌ Problém s ||
const count = 0;
const result = count || 10;  // 10 (0 je falsy!)

// ✅ Řešení s ??
const result = count ?? 10;  // 0 (pouze null/undefined)

💡 Guard clauses (brzké návraty):

function process(user) {
  // ❌ Vnořené if
  if (user) {
    if (user.name) {
      console.log(user.name);
    }
  }

  // ✅ Guard clause
  if (!user) return;
  if (!user.name) return;
  console.log(user.name);
}

Kvíz

Které výroky jsou pravdivé?

- 0 je falsy, takže || vrátí druhou stranu ('x')

- && vrátí true jen pokud obě strany jsou true

- !!0!falsefalse (double negation převede na boolean)

- TS používá logické kontroly pro narrowing typů

🎯 Závěrečný projekt

Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.

Zobrazit podrobnosti projektu →

Připraveni začít?

Zaregistrujte se a získejte přístup ke všem dílům tohoto seriálu

Kontaktujte mě

Informace o seriálu

Obtížnost

Délka

Cca 480 minut

Počet videí

8 videí + projekty

Certifikát

Po dokončení obdržíte certifikát


Lekce v této sekci


Struktura lekcí (souborový strom)

06. Typescript specifika
  • v přípravě
08. Moduly tridy
  • v přípravě
09. React zaklady
  • v přípravě
10. React hooks
  • v přípravě
12. Nextjs server
  • v přípravě
13. Databaze auth
  • v přípravě
14. Nextjs pokrocile
  • v přípravě