03.17 IIFE

Výuka

Proč IIFE?

IIFE (Immediately Invoked Function Expression - okamžitě zavolaný funkční výraz) je funkce, která se spustí ihned po své definici.

Proč to potřebujeme?

• Izolace proměnných - Vytvoří lokální scope a nechrání globální scope
• Vyhnutí se konfliktům jmen - Proměnné uvnitř IIFE nekolidují s globálními
• Modularita - V starším JS (před ES6 moduly) byl IIFE hlavní způsob modularizace
• Jednorazový kód - Spustit kód hned, ale nechránit jej před vnějším světem

Představ si to jako: Anonymní nákupní seznam. Napíšeš seznam, koupíš věci, seznam zahodíš - nikdo jiný ho nevidí a nezabírá místo. Stejně IIFE: vytvoř funkci, spusť ji, zahoď ji - žádné globální jméno, žádný konflikt.

Jak to funguje?

1. Vytvoříš funkční výraz (function expression)
2. Obalíš ho do kulatých závorek ( )
3. Přidáš () za závorky - funkce se okamžitě zavolá
4. Funkce se spustí a lokální proměnné zaniknou po skončení
5. Globální scope zůstane čistý

Klíčové koncepty

• IIFE - Immediately Invoked Function Expression, funkce zavolaná okamžitě
• Lokální scope - Proměnné uvnitř IIFE jsou viditelné jen uvnitř
• Anonymní funkce - IIFE obvykle nemá jméno (není potřeba)
• Pattern před ES6 - V moderním JS se místo IIFE používají bloky { } a moduly
• Ochrana globálního scope - IIFE zabraňuje "znečištění" globální oblasti

JavaScript

Příklad 1: Základní IIFE syntax

(function() {
  console.log("Tato funkce se spustila okamžitě!");
})();
// → Tato funkce se spustila okamžitě!

Co se stalo?

1. (function() { ... }) - vytvoř funkční výraz v závorkách
2. () - zavolej funkci okamžitě
3. Funkce se spustí hned a vypíše text
4. Funkce nemá jméno - je anonymní

Proč závorky? (function() {}) - závorky říkají JavaScriptu: "Toto je výraz, ne deklarace!"

Příklad 2: IIFE s parametry

(function(name) {
  console.log("Hello, " + name + "!");
})("Alice");
// → Hello, Alice!

(function(a, b) {
  console.log(a + b);
})(5, 3);
// → 8

Co se stalo?

• IIFE může přijímat parametry jako normální funkce
• První příklad: předáme "Alice" jako parametr name
• Druhý příklad: předáme čísla 5 a 3, funkce je sečte

Příklad 3: IIFE pro izolaci proměnných

// Bez IIFE - proměnná unikne do globálního scope
var globalVar = "Jsem globální";
console.log(globalVar);  // → Jsem globální

// S IIFE - proměnná je lokální
(function() {
  var privateVar = "Jsem privátní";
  console.log(privateVar);  // → Jsem privátní
})();

console.log(typeof privateVar);  // → undefined (neexistuje venku!)

Co se stalo?

• privateVar existuje jen uvnitř IIFE
• Jakmile IIFE skončí, privateVar zanikne
• Venku není dostupná - je to jako "private" proměnná

Příklad 4: IIFE vracející hodnotu

const result = (function(a, b) {
  const sum = a + b;
  return sum * 2;
})(5, 3);

console.log(result);  // → 16

Co se stalo?

1. IIFE se spustí s parametry 5 a 3
2. Vypočítá součet: 5 + 3 = 8
3. Vrátí 8 * 2 = 16
4. Výsledek se uloží do result

Užitečné: IIFE může vrátit hodnotu jako normální funkce!

Příklad 5: IIFE pattern před ES6 (starý JavaScript)

// Starý způsob vytvoření modulu
const calculator = (function() {
  // Privátní proměnná (nedostupná venku)
  let secret = 42;

  // Veřejné funkce (vrácené ven)
  return {
    add: function(a, b) {
      return a + b;
    },
    subtract: function(a, b) {
      return a - b;
    },
    getSecret: function() {
      return secret;
    }
  };
})();

console.log(calculator.add(5, 3));       // → 8
console.log(calculator.getSecret());     // → 42
console.log(calculator.secret);          // → undefined (privátní!)

Co se stalo?

• IIFE vytvoří modul s privátními a veřejnými částmi
• secret je privátní - nedostupná zvenku
• Vrácený objekt obsahuje veřejné metody
• To byl hlavní způsob modularizace před ES6!

Příklad 6: Arrow IIFE (moderní syntax)

// Klasický IIFE
(function() {
  console.log("Klasický IIFE");
})();

// Arrow IIFE
(() => {
  console.log("Arrow IIFE");
})();

// Arrow IIFE s parametry
((name) => {
  console.log("Hello, " + name);
})("Bob");
// → Hello, Bob

Co se stalo?

• Arrow funkce můžeš použít i pro IIFE
• Syntaxe: (() => { ... })()
• Stručnější, ale stejně funkční

TypeScript

TypeScript přidává typové anotace i pro IIFE - můžeš typovat parametry a návratové hodnoty.

Stejné příklady s typy

// IIFE s typovanými parametry
(function(name: string): void {
  console.log("Hello, " + name + "!");
})("Alice");

// IIFE vracející typovanou hodnotu
const result: number = (function(a: number, b: number): number {
  const sum = a + b;
  return sum * 2;
})(5, 3);

// Typovaný modul s IIFE
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
  getSecret(): number;
}

const calculator: Calculator = (function(): Calculator {
  let secret: number = 42;

  return {
    add(a: number, b: number): number {
      return a + b;
    },
    subtract(a: number, b: number): number {
      return a - b;
    },
    getSecret(): number {
      return secret;
    }
  };
})();

// Arrow IIFE s typy
((name: string): void => {
  console.log("Hello, " + name);
})("Bob");

TypeScript přidává:

• ✅ Typovou kontrolu parametrů - nemůžeš předat špatný typ
• ✅ Typovou kontrolu návratové hodnoty - TS zkontroluje, že vracíš správný typ
• ✅ Interface pro moduly - jasně definuje veřejné API
• ✅ Bezpečnost - chyby odhalíš už při psaní

Rozdíl JS vs TS

JavaScript:

• IIFE funguje bez typů
• Parametry a návratové hodnoty můžou být cokoli
• Flexibilnější, ale nebezpečnější
• Chyby odhalíš až při běhu

TypeScript:

• IIFE má typované parametry a návratovou hodnotu
• TypeScript zkontroluje typy už při kompilaci
• Bezpečnější, lépe dokumentované
• Chyby odhalíš při psaní kódu

// JavaScript - projde, ale může způsobit problém
const result = (function(x) {
  return x.toUpperCase();
})(123);  // Runtime error! Číslo nemá .toUpperCase()

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

Tip

💡 V moderním JS (ES6+) místo IIFE používej bloky:

// ❌ Starý způsob - IIFE pro izolaci
(function() {
  var counter = 0;
  console.log(counter);
})();

// ✅ Moderní způsob - blok s let/const
{
  let counter = 0;
  console.log(counter);
}
// counter není dostupný venku

💡 IIFE je stále užitečný pro okamžité volání:

// ✅ Užitečné - okamžitá inicializace s návratovou hodnotou
const config = (function() {
  const env = process.env.NODE_ENV;
  return {
    apiUrl: env === 'production' ? 'https://api.example.com' : 'http://localhost:3000',
    debug: env !== 'production'
  };
})();

💡 Dvě syntaxe IIFE (obě platné):

// ✅ Varianta 1 - závorky kolem celku
(function() {
  console.log("IIFE 1");
})();

// ✅ Varianta 2 - závorky jen kolem funkce
(function() {
  console.log("IIFE 2");
}());

// Obě fungují stejně - záleží na preferencích