03.01 Deklarace funkce

Výuka

Proč funkce?

„Lidé si myslí, že informatika je umění géniů, ale skutečná realita je opačná — je to spíš mnoho lidí dělajících věci, které na sebe navazují, jako zeď z minikamenů." — Donald Knuth

Funkce patří mezi nejzákladnější nástroje v JavaScriptu. Myšlenka zabalit kus programu do hodnoty má mnoho použití:

• Strukturovat větší programy - rozdělit kód na menší, pochopitelné části
• Snížit opakování - napsat kód jednou, použít vícekrát
• Přiřadit jména podprogramům - dát logickým celkům smysluplná jména
• Izolovat podprogramy - oddělit jednotlivé části kódu od sebe

Představ si to jako: Vytváření nových slov ve slovníku. Typický člověk má ve slovní zásobě přibližně 20 000 slov. JavaScript má mnohem méně vestavěných příkazů. Proto si musíme vytvářet vlastní "slovní zásobu" - funkce s popisnými názvy.

Jak to funguje?

Definice funkce je běžná proměnná (vazba), jejímž obsahem je funkční hodnota.

1. Vytvoříš funkci pomocí klíčového slova `function`
2. Funkce má seznam parametrů (vstupů) a tělo (kód, který se provede)
3. Uložíš funkci do proměnné (const, let)
4. Voláš funkci jménem a kulatými závorkami: `nazevFunkce()`
5. Funkce může vrátit hodnotu pomocí `return`

Klíčové koncepty

• Funkce je hodnota - můžeš ji uložit do proměnné, předat jiné funkci
• Parametry - vstupní "sloty" v definici funkce (např. function(x) - x je parametr)
• Argumenty - konkrétní hodnoty, které předáváš při volání (např. square(12) - 12 je argument)
• Return - vrátí hodnotu a ukončí funkci; bez return funkce vrací undefined
• Vedlejší efekt (side effect) - funkce může i jen něco udělat (např. vypsat text), nemusí vracet hodnotu

JavaScript

Příklad 1: Funkce, která vrací hodnotu

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

console.log(square(12));
// → 144

Co se stalo?

1. Vytvořili jsme funkci pomocí klíčového slova function
2. Funkce má jeden parametr x - to je jako prázdná krabička, do které dáme číslo
3. V těle funkce (mezi {}) počítáme x * x - druhá mocnina
4. return vrátí výsledek volajícímu
5. Uložili jsme funkci do proměnné square
6. Zavoláme square(12) - do parametru x se dosadí 12, funkce vrátí 144

Příklad 2: Funkce bez parametrů (vedlejší efekt)

const makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

Co se stalo?

• Funkce makeNoise nemá žádné parametry - prázdné závorky ()
• Nevrací hodnotu - žádný return
• Má vedlejší efekt - vypisuje text do konzole
• Stále je užitečná! Nemusí vracet hodnotu, stačí že něco udělá

Příklad 3: Funkce s více parametry

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

console.log(roundTo(23, 10));
// → 20

Co se stalo?

• Funkce má dva parametry: n (číslo k zaokrouhlení) a step (krok zaokrouhlení)
• roundTo(23, 10) zaokrouhlí 23 na nejbližší násobek 10, což je 20
• Funkce vrací vypočítanou hodnotu pomocí return

Příklad 4: Co vrací funkce bez return?

const sayHello = function(name) {
  console.log("Hello " + name);
};

const result = sayHello("Alice");
console.log(result);
// → undefined

Důležité: Funkce bez return automaticky vrací undefined

TypeScript

TypeScript přidává typové anotace - můžeš specifikovat, jaký typ dat funkce očekává a vrací.

Stejné příklady s typy

// Funkce přijímá číslo a vrací číslo
const square = function(x: number): number {
  return x * x;
};

// Funkce nic nepřijímá a nic nevrací (void = prázdnota)
const makeNoise = function(): void {
  console.log("Pling!");
};

// Funkce přijímá dvě čísla a vrací číslo
const roundTo = function(n: number, step: number): number {
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
};

// Funkce s typem, která nevrací hodnotu
const sayHello = function(name: string): void {
  console.log("Hello " + name);
};

TypeScript přidává:

• ✅ Kontrolu typů - pokud předáš text místo čísla, TypeScript tě upozorní ještě před spuštěním
• ✅ Lepší nápovědu - editor ti ukáže, jaké parametry funkce očekává
• ✅ Dokumentaci v kódu - hned vidíš, co funkce dělá, bez čtení celého těla
• ✅ Prevenci chyb - nemůžeš omylem zavolat square("ahoj") místo square(5)

Rozdíl JS vs TS

JavaScript:

• Funkce nepotřebují typové anotace
• Můžeš zavolat funkci s jakýmkoliv typem parametru - square("ahoj") projde, ale způsobí chybu při běhu
• Jednodušší, ale méně bezpečné
• Chyby odhalíš až při spuštění programu

TypeScript:

• Funkce mají typové anotace: (x: number): number
• TypeScript zkontroluje typy ještě před spuštěním
• square("ahoj") způsobí chybu už při psaní kódu - editor tě upozorní
• Bezpečnější, chyby chytíš dříve

// JavaScript - projde, ale způsobí problém
const square = function(x) { return x * x; };
square("5");  // vrátí "55" (ne 25!) - "5" * "5" = "55" v JS

// TypeScript - editor tě upozorní
const square = function(x: number): number { return x * x; };
square("5");  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

Tip

💡 Popisné názvy funkcí:

// ❌ Špatně - co dělá funkce ct()?
const ct = function(x) { return x * 0.21; };

// ✅ Dobře - hned vidíš, co funkce dělá
const calculateTax = function(price) { return price * 0.21; };

💡 Funkce by měly dělat jednu věc:

// ❌ Špatně - funkce dělá příliš mnoho
const processUser = function(user) {
  validateUser(user);
  saveToDatabase(user);
  sendEmail(user);
  logActivity(user);
};

// ✅ Dobře - rozdělené na více funkcí
const saveUser = function(user) { /* ... */ };
const notifyUser = function(user) { /* ... */ };

💡 Pure funkce (bez vedlejších efektů) jsou lepší:

// ✅ Pure - vždy stejný vstup = stejný výstup
const add = function(a, b) { return a + b; };

// ⚠️ Impure - má vedlejší efekt (console.log)
const addAndLog = function(a, b) {
  const result = a + b;
  console.log(result);  // vedlejší efekt
  return result;
};