03.06 Výchozí parametry

Výuka

Proč výchozí parametry?

V lekci 04 jsi viděl, že když vynecháš argument, parametr má hodnotu undefined. To vyžaduje ruční kontroly:

const greet = function(name, greeting) {
  if (greeting === undefined) {
    greeting = "Hello";  // Musíš kontrolovat undefined
  }
  return greeting + ", " + name;
};

Výchozí parametry (ES6+) to zjednoduší:

const greet = function(name, greeting = "Hello") {
  return greeting + ", " + name;
};

Proč je to užitečné?

• Méně kódu - nemusíš psát if (x === undefined)
• Čitelnější - hned vidíš, jaká je výchozí hodnota
• Dokumentace v kódu - jasně říkáš "pokud to vynecháš, použije se tohle"

Představ si to jako: Objednávka kávy. Pokud neřekneš jakou, dostaneš "normální" - to je výchozí hodnota.

Jak to funguje?

1. Napíšeš parametr s = a výchozí hodnotou: function(x = 10) { }
2. Pokud argument chybí nebo je undefined, použije se výchozí hodnota
3. Pokud předáš argument (i když je null), použije se ten

Kdy se použije výchozí hodnota:

• ✅ Argument vynechán: greet("Alice") → greeting = "Hello"
• ✅ Argument je undefined: greet("Alice", undefined) → greeting = "Hello"
• ❌ Argument je null: greet("Alice", null) → greeting = null (použije se null!)

Klíčové koncepty

• = pro výchozí hodnotu - function(x = 5) nastaví x na 5, pokud chybí
• Použije se jen pro undefined - ne pro null nebo jiné falsy hodnoty
• Může být výraz - nejen hodnota, ale i volání funkce: function(x = getDefault())
• Pořadí záleží - výchozí parametry obvykle na konci

JavaScript

Příklad 1: Základní výchozí parametr

const greet = function(name, greeting = "Hello") {
  return greeting + ", " + name + "!";
};

console.log(greet("Alice"));           // → Hello, Alice!
console.log(greet("Bob", "Hi"));       // → Hi, Bob!
console.log(greet("Charlie", "Hey"));  // → Hey, Charlie!

Co se stalo?

• Pokud vynecháš druhý argument, greeting má hodnotu "Hello"
• Pokud ho předáš, použije se tvá hodnota
• Není třeba kontrolovat if (greeting === undefined)!

Příklad 2: Více výchozích parametrů

const createUser = function(name, age = 18, role = "user") {
  return {
    name: name,
    age: age,
    role: role
  };
};

console.log(createUser("Alice"));
// → { name: "Alice", age: 18, role: "user" }

console.log(createUser("Bob", 25));
// → { name: "Bob", age: 25, role: "user" }

console.log(createUser("Charlie", 30, "admin"));
// → { name: "Charlie", age: 30, role: "admin" }

Co se stalo?

• Můžeš mít více výchozích parametrů
• Pokud argument vynecháš, použije se výchozí hodnota
• Parametry se vyplňují zleva doprava

Příklad 3: undefined vs null

const test = function(value = "default") {
  return value;
};

console.log(test());          // → "default" (argument vynechán)
console.log(test(undefined)); // → "default" (explicitní undefined)
console.log(test(null));      // → null (použije se null!)
console.log(test(0));         // → 0 (použije se 0!)
console.log(test(""));        // → "" (použije se prázdný string!)

Co se stalo?

• Výchozí hodnota se použije jen pro undefined
• null, 0, "", false jsou validní hodnoty - použijí se!

Příklad 4: Výchozí hodnota jako výraz

const getTimestamp = () => Date.now();

const log = function(message, timestamp = getTimestamp()) {
  console.log(`[${timestamp}] ${message}`);
};

log("Hello");      // → [1234567890] Hello (aktuální čas)
log("World");      // → [1234567891] World (další čas)

Co se stalo?

• Výchozí hodnota může být volání funkce!
• Funkce se volá pokaždé, když je parametr vynechán
• To je užitečné pro dynamické výchozí hodnoty

Příklad 5: Porovnání se starým způsobem

Starý způsob (před ES6):

function roundTo(n, step) {
  if (step === undefined) {
    step = 1;  // Ruční kontrola
  }
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
}

Nový způsob (ES6+):

function roundTo(n, step = 1) {
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
}

console.log(roundTo(4.5)); // → 5 (zaokrouhlí na 1) console.log(roundTo(4.5, 2)); // → 4 (zaokrouhlí na 2)

**Co se stalo?**
Nový způsob je **kratší a čitelnější**
Nemusíš psát `if` kontroly
Výchozí hodnota je **vidět hned v hlavičce funkce**

---

## TypeScript

V TypeScriptu můžeš kombinovat **typy** a **výchozí hodnoty**:

```ts
const greet = function(name: string, greeting: string = "Hello"): string {
  return greeting + ", " + name + "!";
};

// TypeScript automaticky odvodí typ výchozí hodnoty
const roundTo = function(n: number, step = 1): number {
  //                                    ↑
  //                    TypeScript ví, že step je number
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
};

Volitelné parametry (?) vs výchozí hodnoty (=):

// Volitelný parametr - může být undefined
const greet1 = function(name: string, greeting?: string): string {
  if (greeting === undefined) {
    greeting = "Hello";  // Musíš kontrolovat
  }
  return greeting + ", " + name;
};

// Výchozí hodnota - automaticky "Hello" pokud chybí
const greet2 = function(name: string, greeting: string = "Hello"): string {
  return greeting + ", " + name;  // Bez kontroly!
};

Nejlepší praxe:

• Pokud má parametr přirozenou výchozí hodnotu → použij =
• Pokud parametr může být undefined a nemá výchozí hodnotu → použij ?

TypeScript přidává:

• ✅ Kontrolu typů - výchozí hodnota musí odpovídat typu
• ✅ Odvození typů - pokud zapíšeš = 1, TypeScript ví, že je to number
• ✅ Bezpečnost - nemůžeš přiřadit špatný typ jako výchozí hodnotu

Rozdíl JS vs TS

JavaScript:

// JavaScript ti dovolí cokoli
const test = function(value = "default") {
  return value.toUpperCase();  // Předpokládá, že value je string
};

test();        // "DEFAULT" ✅
test("hello"); // "HELLO" ✅
test(123);     // 💥 Runtime error: value.toUpperCase is not a function

TypeScript:

const test = function(value: string = "default"): string {
  return value.toUpperCase();
};

test();        // "DEFAULT" ✅
test("hello"); // "HELLO" ✅
test(123);     // ❌ Compile error: Argument of type 'number' is not assignable to parameter of type 'string'

Tip

💡 Výchozí parametry na konci:

// ❌ Matoucí - výchozí parametr uprostřed
const bad = function(a = 1, b, c = 3) { };

// ✅ Dobře - výchozí parametry na konci
const good = function(a, b, c = 3, d = 4) { };

💡 Výchozí hodnoty by měly být jednoduché:

// ❌ Špatně - vedlejší efekt
let counter = 0;
const bad = function(x = counter++) {  // Zvyšuje counter pokaždé!
  return x;
};

// ✅ Dobře - jednoduchá hodnota
const good = function(x = 0) {
  return x;
};

💡 Použij undefined pro vyvolání výchozí hodnoty:

const greet = (name, greeting = "Hello") => greeting + " " + name;

greet("Alice");           // "Hello Alice" ✅
greet("Alice", "Hi");     // "Hi Alice" ✅
greet("Alice", undefined);// "Hello Alice" ✅ (použije výchozí)
greet("Alice", null);     // "null Alice" ❌ (použije null!)