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 && false → false |
|| |
OR (nebo) | True, pokud alespoň jedna strana je true | true || false → true |
! |
NOT (negace) | Obrátí boolean hodnotu | !true → false |
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 → !false → false (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 →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
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
Struktura lekcí (souborový strom)
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
- 03.01 Deklarace funkce
- 03.02 Function Expression
- 03.03 Arrow Functions
- 03.04 Parametry a argumenty
- 03.05 Return hodnoty
- 03.06 Výchozí parametry
- 03.07 Rest parametry
- 03.08 Co je Scope
- 03.09 Lexikální Scope
- 03.10 Řetězec Scope
- 03.11 Globální Scope
- 03.12 Životní Cyklus Proměnných
- 03.13 Omezení Scope
- 03.14 Použití Closures
- 03.15 Callback funkce
- 03.16 Higher-order Functions
- 03.17 IIFE
- 03.18 Void funkce
- 03.19 Rekurze
- v přípravě
- v přípravě
- v přípravě
- v přípravě
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
- v přípravě
- v přípravě
- v přípravě