2.3 Ternární operátor

Výuka

Co je ternární operátor?

Ternární operátor je zkrácený zápis jednoduchého if/else na jeden řádek. Jmenuje se "ternární", protože má 3 části (operandy).

podmínka ? hodnotaKdyžTrue : hodnotaKdyžFalse

Kdy ho použít?

✅ Vhodné:

• Jednoduché přiřazení hodnoty podle podmínky
• Krátké, čitelné výrazy
• Inline v JSX/template literals

❌ Nevhodné:

• Složitá logika s více příkazy
• Vnořené ternární operátory (těžko čitelné)
• Když potřebuješ vedlejší efekty (console.log, API calls)

Proč existuje?

Představ si, že chceš přiřadit text podle podmínky:

// Klasický if/else - 5 řádků
let message;
if (isLoggedIn) {
  message = "Vítej zpět!";
} else {
  message = "Přihlaš se";
}

// Ternární operátor - 1 řádek
const message = isLoggedIn ? "Vítej zpět!" : "Přihlaš se";

Ternární operátor je výraz (vrací hodnotu), zatímco if/else je příkaz (nevrací hodnotu).

JavaScript

// Základní použití
const age = 20;
const status = age >= 18 ? "dospělý" : "nezletilý";
console.log(status);  // "dospělý"

// Přiřazení s podmínkou
const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
// ⚠️ Vnořené ternární - radši nepoužívat

// V template literals
const user = { name: "Jan", isVIP: true };
console.log(`Uživatel: ${user.name} ${user.isVIP ? "(VIP)" : ""}`);
// "Uživatel: Jan (VIP)"

// Default hodnoty
const input = null;
const value = input ? input : "výchozí";
// nebo lépe: const value = input || "výchozí";
// nebo nejlépe: const value = input ?? "výchozí";

// V return příkazech
function getDiscount(isVIP) {
  return isVIP ? 0.2 : 0;
}

// V argumentech funkcí
function greet(name) {
  console.log(`Ahoj, ${name ? name : "cizinče"}!`);
}

greet("Jan");   // "Ahoj, Jan!"
greet(null);    // "Ahoj, cizinče!"

// Volání různých funkcí
const isAdmin = true;
isAdmin ? showAdminPanel() : showUserPanel();
// ⚠️ Funguje, ale if/else je čitelnější pro akce

// V polích a objektech
const items = [
  "položka 1",
  condition ? "podmíněná položka" : null,
  "položka 2"
].filter(Boolean);  // Odstraní null

const config = {
  debug: isDevelopment ? true : false,
  // lépe: debug: isDevelopment
};

TypeScript

// TS odvozuje typ z obou větví
const age: number = 20;
const status = age >= 18 ? "dospělý" : "nezletilý";
// status: string

// Různé typy ve větvích
const value = Math.random() > 0.5 ? "text" : 42;
// value: string | number

// Explicitní typování
const result: string = score >= 50 ? "pass" : "fail";

// V generických funkcích
function getValue<T>(condition: boolean, trueVal: T, falseVal: T): T {
  return condition ? trueVal : falseVal;
}

const num = getValue(true, 10, 20);  // num: number

// S null/undefined
interface User {
  name: string;
  nickname?: string;
}

function getDisplayName(user: User): string {
  return user.nickname ? user.nickname : user.name;
  // nebo: return user.nickname ?? user.name;
}

// V React/JSX (ukázka syntaxe)
/*
function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <div>
      {isLoggedIn ? <UserPanel /> : <LoginButton />}
    </div>
  );
}
*/

// Type narrowing nefunguje v ternárním operátoru tak dobře
function example(value: string | null) {
  // ❌ Ternární - TS neví, že value není null ve větvi
  const upper = value ? value.toUpperCase() : "default";

  // ✅ If/else - TS správně zužuje typ
  let result: string;
  if (value) {
    result = value.toUpperCase();  // value: string
  } else {
    result = "default";
  }
}

Rozdíl JS vs TS

// TypeScript odvozuje union type
const result = condition ? "text" : 123;
// result: string | number

// Můžeš vynutit jeden typ
const result: string = condition ? "ano" : "ne";
// ✅ Obě větve musí být string

// const result: string = condition ? "ano" : 123;
// ❌ Error: Type 'number' is not assignable to type 'string'

Tip

💡 Nepoužívej vnořené ternární operátory:

// ❌ Nečitelné
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";

// ✅ Čitelné - použij if/else nebo switch
let grade;
if (score >= 90) grade = "A";
else if (score >= 80) grade = "B";
else if (score >= 70) grade = "C";
else grade = "F";

💡 Pro default hodnoty radši použij ?? nebo ||:

// ❌ Zbytečně složité
const name = inputName ? inputName : "Anonymous";

// ✅ Jednodušší
const name = inputName || "Anonymous";

// ✅ Nejlepší (jen null/undefined)
const name = inputName ?? "Anonymous";

💡 Ternární je výraz - využij to:

// Můžeš ho použít všude, kde je očekáván výraz
console.log(`Status: ${isActive ? "aktivní" : "neaktivní"}`);

// V objektech
const user = {
  role: isAdmin ? "admin" : "user",
  theme: prefersDark ? "dark" : "light"
};

// V polích
const classes = ["button", isActive ? "active" : "inactive"];