03.02 Function Expression

Výuka

Proč Function Expression?

V předchozí lekci jsi viděl, že funkce je hodnota - můžeš ji uložit do proměnné. Existují dva způsoby, jak vytvořit funkci:

1. Function Expression (funkční výraz) - const fn = function() {}
2. Function Declaration (deklarace funkce) - function fn() {}

Function expression je flexibilnější:

• Můžeš ji přiřadit do proměnné
• Předat jako argument jiné funkci (callback)
• Vytvořit funkci přímo v místě použití
• Změnit funkci za běhu programu (let)

Představ si to jako: Rozdíl mezi psaním dopisu (declaration) a SMS zprávou (expression). Obojí doručí zprávu, ale SMS je rychlejší a flexibilnější - můžeš ji poslat kdykoli, změnit text za běhu.

Jak to funguje?

1. Vytvoříš funkci pomocí `function() {}`
2. Přiřadíš ji do proměnné: `const nazev = function() {}`
3. Funkce je normální hodnota - můžeš s ní dělat cokoli jako s číslem nebo textem
4. Voláš ji stejně: `nazev()`

Klíčový rozdíl: Function expression se vytvoří až při provádění kódu, ne předem.

Klíčové koncepty

• Funkce jako hodnota - můžeš ji přiřadit, předat, vrátit, uložit do pole
• Expression vs Declaration - expression se vytvoří při provádění, declaration při načtení
• Hoisting - declaration se "přesunou" na začátek, expression ne
• Přepisování - pokud použiješ let, můžeš funkci později změnit

JavaScript

Příklad 1: Funkce jako hodnota

const launch = function() {
  console.log("Launching!");
};

launch();
// → Launching!

Co se stalo?

• Vytvořili jsme funkci pomocí function() {}
• Přiřadili ji do proměnné launch
• Funkce je hodnota - stejně jako číslo nebo text
• Voláme ji launch() - normálně jako každou funkci

Příklad 2: Přepisování funkce za běhu

let launchMissiles = function() {
  missileSystem.launch("now");
};

if (safeMode) {
  // V bezpečném režimu změníme funkci na prázdnou
  launchMissiles = function() {
    /* nic nedělá */
  };
}

launchMissiles();  // V safe mode nic neudělá

Co se stalo?

• Použili jsme let místo const - proměnnou můžeme přepsat
• Podle podmínky (safeMode) nahradíme funkci jinou funkcí
• To je extrémně užitečné - můžeme změnit chování za běhu!
• Důležité: Tohle by nešlo s const - ta neumožňuje přepis

Příklad 3: Function Declaration (porovnání)

Function Expression (co jsme používali):

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

Function Declaration (zkrácený zápis):

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

Vypadá to stejně, ale je jeden zásadní rozdíl - hoisting:

// ✅ Tohle FUNGUJE - function declaration
console.log("The future says:", future());

function future() {
  return "You'll never have flying cars";
}

// ❌ Tohle NEFUNGUJE - function expression
console.log(greet("Alice"));  // Error: Cannot access 'greet' before initialization

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

Proč?

• Function declaration se "přesune" (hoist) na začátek souboru při načítání
• Function expression se vytvoří až když JavaScript dojde k tomu řádku
• Deklaraci můžeš volat kdekoli, expression až po její definici

TypeScript

TypeScript přidává typy pro funkce - můžeš specifikovat typ celé funkce, ne jen parametrů.

// Typ funkce: () => void (žádné parametry, nic nevrací)
const launch = function(): void {
  console.log("Launching!");
};

// Explicitní typ proměnné: funkce bez parametrů vracející void
let launchMissiles: () => void = function() {
  console.log("Safe mode activated");
};

// Můžeme přepsat na jinou funkci stejného typu
launchMissiles = function() {
  console.log("Different implementation");
};

// Function declaration s typy
function future(): string {
  return "You'll never have flying cars";
}

TypeScript přidává:

• ✅ Typ celé funkce - () => void, (x: number) => number atd.
• ✅ Kontrolu při přepisování - nemůžeš přepsat funkci na jiný typ
• ✅ Bezpečnost - pokud změníš typ funkce, editor tě upozorní na všechna místa, kde je použita

Rozdíl JS vs TS

JavaScript:

let greet = function(name) {
  return "Hello " + name;
};

// Můžeš přepsat na úplně jiný typ - JS to nevadí
greet = 42;  // ✅ Funguje (ale je to špatně!)
greet();     // 💥 Runtime error: greet is not a function

TypeScript:

let greet = function(name: string): string {
  return "Hello " + name;
};

// TypeScript zabrání přepisu na jiný typ
greet = 42;  // ❌ Error: Type 'number' is not assignable to type '(name: string) => string'

// Můžeš přepsat jen na funkci stejného typu
greet = function(name: string): string {
  return "Hi " + name;  // ✅ OK - stejný typ
};

Tip

💡 Kdy použít expression vs declaration?

// ✅ Function expression - pro callbacks, podmíněné funkce
const handleClick = function() { /* ... */ };
button.addEventListener('click', handleClick);

// ✅ Function declaration - pro hlavní API tvého modulu
function calculateTax(price) {
  return price * 0.21;
}

💡 Vždy používej const pro funkce:

// ✅ Dobře - funkci nelze omylem přepsat
const greet = function(name) {
  return "Hello " + name;
};

// ❌ Špatně - funkci můžeš omylem přepsat
let greet = function(name) {
  return "Hello " + name;
};
greet = 42;  // Uups! Smazali jsme funkci

💡 Hoisting můžeš ignorovat - piš kód shora dolů:

// ✅ Dobře - čitelné, logické pořadí
const add = function(a, b) { return a + b; };
const result = add(5, 3);

// ⚠️ Funguje, ale matoucí - funkce je definovaná až pod voláním
const result = add(5, 3);
function add(a, b) { return a + b; }