03.04 Parametry a argumenty

Výuka

Proč parametry a argumenty?

Dosud jsme viděli funkce, které buď neměly žádné vstupy, nebo měly pevně dané vstupy. Ale co když chceš stejnou funkci použít s různými hodnotami?

// ❌ Špatně - musíš vytvořit funkci pro každé číslo
const squareOf5 = () => 5 * 5;
const squareOf12 = () => 12 * 12;

// ✅ Dobře - jedna funkce pro všechna čísla
const square = x => x * x;

Parametry a argumenty umožňují funkcím být univerzální - stejný kód funguje s různými vstupy.

Představ si to jako: Recept na dort. Parametr je "množství mouky" (obecná položka), argument je "300g" (konkrétní hodnota, kterou použiješ právě teď).

Jak to funguje?

Terminologie:

• Parametr = "prázdné místo" v definici funkce (např. function square(x) - x je parametr)
• Argument = konkrétní hodnota, kterou předáš při volání (např. square(5) - 5 je argument)

1. V definici funkce napíšeš parametry: function nazev(param1, param2) { }
2. Při volání předáš argumenty: nazev(hodnota1, hodnota2)
3. JavaScript "dosadí" argumenty do parametrů
4. Uvnitř funkce pracuješ s parametry jako s proměnnými

Zajímavost: JavaScript je flexibilní - můžeš předat méně nebo více argumentů, než má funkce parametrů!

Klíčové koncepty

• Parametry vs argumenty - parametr je "slot" v definici, argument je hodnota při volání
• Flexibilní počet argumentů - JavaScript ti nedá chybu, pokud předáš jiný počet
• Chybějící argumenty = undefined - pokud argument chybí, parametr má hodnotu undefined
• Přebytečné argumenty - JavaScript je tiché ignoruje (nejsou ztracené, jsou v arguments)

JavaScript

Příklad 1: Jeden parametr

const square = function(x) {
  return x * x;
};

console.log(square(4));    // → 16
console.log(square(12));   // → 144
console.log(square(0.5));  // → 0.25

Co se stalo?

• Definovali jsme funkci s jedním parametrem x
• Při volání square(4) se do x dosadí hodnota 4
• Uvnitř funkce pracujeme s x jako s proměnnou
• Můžeme stejnou funkci volat s různými hodnotami!

Příklad 2: Více parametrů

const add = function(a, b) {
  return a + b;
};

console.log(add(2, 3));     // → 5
console.log(add(10, 20));   // → 30

Co se stalo?

• Funkce má dva parametry: a a b
• Pořadí záleží! add(2, 3) dosadí a = 2 a b = 3
• Parametry se oddělují čárkou: function(a, b, c) { }

Příklad 3: Přebytečné argumenty (ignorují se)

const square = function(x) {
  return x * x;
};

console.log(square(4, true, "hedgehog"));
// → 16

Co se stalo?

• Funkce square má jen jeden parametr x
• Ale zavolali jsme ji se třemi argumenty
• JavaScript použije první (4) a ostatní (true, "hedgehog") ignoruje
• Žádná chyba! JavaScript je velmi benevolentní

Příklad 4: Chybějící argumenty (= undefined)

const greet = function(name, greeting) {
  console.log(greeting + ", " + name + "!");
};

greet("Alice", "Hello");
// → Hello, Alice!

greet("Bob");
// → undefined, Bob!

Co se stalo?

• Funkce má dva parametry, ale zavolali jsme ji jen s jedním argumentem
• Druhý parametr greeting je undefined (nebyl předán)
• undefined se v textu zobrazí jako slovo "undefined"

Řešení problému:

const greet = function(name, greeting) {
  if (greeting === undefined) {
    greeting = "Hello";  // Výchozí hodnota
  }
  console.log(greeting + ", " + name + "!");
};

greet("Bob");
// → Hello, Bob!

Poznámka: V lekci 06 se naučíš lepší způsob - výchozí parametry!

Příklad 5: Funkce s různým chováním podle parametrů

const minus = function(a, b) {
  if (b === undefined) {
    // Pokud je jen jeden argument, vrátíme záporné číslo
    return -a;
  } else {
    // Pokud jsou dva argumenty, odečteme je
    return a - b;
  }
};

console.log(minus(10));      // → -10 (negace)
console.log(minus(10, 5));   // → 5 (odečítání)

Co se stalo?

• Stejná funkce se chová různě podle počtu argumentů
• Kontrolujeme if (b === undefined) - pokud druhý parametr chybí
• To je užitečný pattern pro flexibilní funkce!

TypeScript

V TypeScriptu můžeš specifikovat typy parametrů a označit některé parametry jako volitelné pomocí ?:

// Povinné parametry s typy
const add = function(a: number, b: number): number {
  return a + b;
};

add(2, 3);     // ✅ OK
add(2, "3");   // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'
add(2);        // ❌ Error: Expected 2 arguments, but got 1

Volitelné parametry - použij ? za názvem parametru:

const greet = function(name: string, greeting?: string): string {
  if (greeting === undefined) {
    greeting = "Hello";
  }
  return greeting + ", " + name + "!";
};

greet("Alice", "Hi");  // ✅ OK - "Hi, Alice!"
greet("Bob");          // ✅ OK - "Hello, Bob!" (greeting je volitelný)

Volitelný parametr musí být na konci:

// ❌ Špatně - volitelný parametr uprostřed
function bad(a?: number, b: number) { }

// ✅ Dobře - volitelné parametry na konci
function good(a: number, b?: number, c?: number) { }

TypeScript přidává:

• ✅ Kontrolu počtu argumentů - musíš předat správný počet (pokud nejsou volitelné)
• ✅ Kontrolu typů - nemůžeš předat číslo, kde se očekává text
• ✅ Dokumentaci - hned vidíš, jaké parametry funkce očekává
• ✅ Volitelné parametry - pomocí ? označíš, že parametr není povinný

Rozdíl JS vs TS

JavaScript:

const add = function(a, b) {
  return a + b;
};

add(2, 3);        // 5 ✅
add(2);           // NaN (2 + undefined) ✅ (žádná chyba)
add(2, "3");      // "23" (string concat) ✅ (žádná chyba)
add(2, 3, 4);     // 5 (ignoruje 4) ✅ (žádná chyba)

TypeScript:

const add = function(a: number, b: number): number {
  return a + b;
};

add(2, 3);        // 5 ✅
add(2);           // ❌ Error: Expected 2 arguments, but got 1
add(2, "3");      // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'
add(2, 3, 4);     // ❌ Error: Expected 2 arguments, but got 3

Tip

💡 Dávej parametrům popisné názvy:

// ❌ Špatně - co znamenají a, b, c?
const calc = (a, b, c) => (a + b) * c;

// ✅ Dobře - hned vidíš, co funkce dělá
const calculateTotal = (price, quantity, taxRate) => (price * quantity) * taxRate;

💡 Pořadí parametrů záleží:

const divide = (a, b) => a / b;

divide(10, 2);   // 5 (10 / 2)
divide(2, 10);   // 0.2 (2 / 10) - úplně jiný výsledek!

💡 Kontroluj undefined před použitím:

const safeGreet = function(name, greeting) {
  // ✅ Dobře - kontrola před použitím
  if (greeting === undefined) {
    greeting = "Hello";
  }
  return greeting + ", " + name + "!";
};