Lekce 0.2 · JavaScript obecně

Funkce a closures

Šipkové funkce, parametry, callbacky, funkce vracející funkce, closures a čisté funkce.

Než začneme: funkce je kuchyňský robot

Funkce je jako kuchyňský robot: něco do něj vložíš (parametry), on s tím něco udělá a něco ti vrátí (návratová hodnota). Mixér dostane jahody a mléko a vrátí koktejl. Nemusíš vědět, jak uvnitř funguje motor – stačí vědět, co do něj dát a co z něj vyleze.

V JavaScriptu mají funkce ještě jednu vlastnost, která je pro React zásadní: funkce je hodnota, stejně jako číslo nebo text. Dá se uložit do proměnné, předat jiné funkci a dokonce z funkce vrátit. Na tom stojí skoro všechno, co v Reactu napíšeš.

1. Tři způsoby zápisu

// 1) Deklarace funkce
function add(a, b) {
  return a + b
}

// 2) Funkční výraz – funkce uložená do proměnné
const add = function (a, b) {
  return a + b
}

// 3) Šipková funkce (arrow function) – nejčastější v moderním kódu
const add = (a, b) => {
  return a + b
}

// 3b) Šipková funkce s jedním výrazem – return se nepíše
const add = (a, b) => a + b

add(2, 3)   // 5 – voláš všechny stejně

Zkracování šipkových funkcí

const double = (n) => { return n * 2 }   // plná podoba
const double = (n) => n * 2              // jeden výraz → bez { } a bez return
const double = n => n * 2                // jeden parametr → závorky jdou vynechat
                                         // (většina kódu je ale píše vždy, pro přehlednost)

const greet = () => 'Ahoj'               // bez parametrů → prázdné závorky jsou povinné
const log = (a, b) => console.log(a, b)  // víc parametrů → závorky povinné

	function	šipková funkce
Kde ji uvidíš	komponenty, pojmenované pomocné funkce	callbacky, krátké funkce, obsluhy událostí
Jde zavolat dřív, než je v kódu napsaná?	ano (hoisting)	ne
`this`	vlastní (podle toho, kdo ji volá)	přebírá z okolí – v moderním kódu to skoro neřešíš

2. Parametry

Chybějící a přebývající argumenty

JavaScript nehlídá, kolik argumentů funkci předáš:

function greet(name, greeting) {
  return `${greeting}, ${name}!`
}

greet('Jana', 'Ahoj')          // 'Ahoj, Jana!'
greet('Jana')                  // 'undefined, Jana!' – chybějící parametr je undefined
greet('Jana', 'Ahoj', 'navíc') // 'Ahoj, Jana!' – přebytečný se tiše zahodí

Výchozí hodnoty

function greet(name, greeting = 'Ahoj') {
  return `${greeting}, ${name}!`
}

greet('Jana')            // 'Ahoj, Jana!'
greet('Jana', 'Čau')     // 'Čau, Jana!'
greet('Jana', undefined) // 'Ahoj, Jana!' – výchozí hodnota se použije i pro undefined
greet('Jana', null)      // 'null, Jana!' – ale pro null ne!

Rest parametr: libovolný počet argumentů

Tři tečky před posledním parametrem posbírají všechny zbylé argumenty do pole:

function sum(...numbers) {
  let total = 0
  for (const n of numbers) {   // for…of projde pole položku po položce
    total += n
  }
  return total
}

sum(1, 2)          // 3   – numbers je [1, 2]
sum(1, 2, 3, 4)    // 10  – numbers je [1, 2, 3, 4]
sum()              // 0   – numbers je []

function log(level, ...messages) {   // první argument zvlášť, zbytek do pole
  console.log(`[${level}]`, messages.join(' '))
}
log('INFO', 'Uživatel', 'se', 'přihlásil')   // [INFO] Uživatel se přihlásil

Objekt místo dlouhé řady parametrů

Když má funkce víc parametrů, snadno se splete pořadí. Řešení: předat jeden objekt a rovnou ho v parametru rozbalit (destrukturovat). Přesně takhle fungují props v Reactu.

// ❌ Co znamená true a false? Musíš se podívat do definice.
createUser('Jana', 31, true, false)

// ✅ Pojmenované „parametry“ – na pořadí nezáleží
function createUser({ name, age, isAdmin = false, newsletter = true }) {
  return { name, age, isAdmin, newsletter }
}
createUser({ name: 'Jana', age: 31, isAdmin: true })

3. Návratová hodnota

function add(a, b) {
  return a + b        // return funkci ukončí a vrátí hodnotu
  console.log('nikdy se neprovede')
}

function logIt(x) {
  console.log(x)      // bez return…
}
const result = logIt(5)   // …vrací funkce undefined

Early return: vyřiď výjimky hned na začátku

// ❌ Hluboké zanoření
function getDiscount(user) {
  if (user) {
    if (user.isMember) {
      if (user.years > 5) {
        return 20
      } else {
        return 10
      }
    }
  }
  return 0
}

// ✅ Early return – nejdřív odbav výjimky, pak hlavní případ
function getDiscount(user) {
  if (!user) return 0
  if (!user.isMember) return 0
  if (user.years > 5) return 20
  return 10
}

Víc hodnot najednou

function minMax(numbers) {
  return { min: Math.min(...numbers), max: Math.max(...numbers) }   // objekt…
}
const { min, max } = minMax([3, 9, 1])   // …a rozbalit

function useToggle() {
  return [value, toggle]                 // nebo pole – takhle vrací hodnoty useState
}
const [isOpen, toggleOpen] = useToggle()

4. Funkce jako hodnota

Funkce je hodnota jako každá jiná. Rozlišuj funkci samotnou (greet) a výsledek jejího zavolání (greet()):

function greet() {
  return 'Ahoj'
}

greet        // ƒ greet() – funkce samotná (recept)
greet()      // 'Ahoj'    – výsledek zavolání (hotové jídlo)

const hello = greet    // druhé jméno pro TUTÉŽ funkci, nic se nevolá
hello()                // 'Ahoj'

Callback: funkce předaná jiné funkci

Když funkci předáš jako argument, říká se jí callback („zavolej mi zpátky“). Ta druhá funkce ji zavolá, až bude potřeba – třeba za sekundu, nebo pro každou položku pole.

function sayHi() {
  console.log('Ahoj!')
}

setTimeout(sayHi, 1000)      // ✅ předáš funkci – setTimeout ji zavolá za 1 s
setTimeout(sayHi(), 1000)    // ❌ zavoláš ji HNED a setTimeoutu předáš její výsledek (undefined)

setTimeout(() => console.log('Ahoj!'), 1000)   // ✅ callback napsaný rovnou na místě

[1, 2, 3].map((n) => n * 2)  // map zavolá callback pro každou položku → [2, 4, 6]

button.addEventListener('click', () => alert('Klik!'))   // zavolá se při každém kliknutí

Vlastní funkce, která bere callback

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i)          // zavolá předanou funkci
  }
}

repeat(3, (i) => console.log('Kolo', i))   // Kolo 0, Kolo 1, Kolo 2

function measure(fn) {
  const start = performance.now()
  fn()
  console.log(`Trvalo ${performance.now() - start} ms`)
}
measure(() => heavyCalculation())

Funkce, která vrací funkci

Funkce může funkci i vyrobit a vrátit. Takové „továrně“ se říká funkce vyššího řádu:

function makeGreeter(greeting) {
  return (name) => `${greeting}, ${name}!`
}

const czech = makeGreeter('Ahoj')     // czech je teď FUNKCE
const english = makeGreeter('Hello')

czech('Jano')       // 'Ahoj, Jano!'
english('Jane')     // 'Hello, Jane!'
makeGreeter('Čau')('Petře')   // 'Čau, Petře!' – vyrobit a hned zavolat

// totéž kratší
const makeGreeter = (greeting) => (name) => `${greeting}, ${name}!`

5. Closures: funkce s batůžkem

Všimni si, že funkce czech výše zná greeting, přestože makeGreeter už dávno skončila. Jak je to možné?

Každá funkce si při vzniku nabalí batůžek s proměnnými z místa, kde vznikla. Když ji pak zavoláš kdekoli jinde, sáhne do batůžku. Tomu batůžku se říká closure (uzávěr).

function makeCounter() {
  let count = 0                 // tahle proměnná putuje do batůžku
  return {
    increment: () => { count++ },
    get: () => count,
  }
}

const a = makeCounter()
const b = makeCounter()         // nové zavolání = nový batůžek s vlastním count

a.increment()
a.increment()
b.increment()

a.get()   // 2
b.get()   // 1  – počítadla se neovlivňují
count     // ❌ ReferenceError – zvenku se k count nedostaneš, je „soukromá“

Ukázka

Továrna na počítadla

Co vidíš: Tlačítko, které zavolá obyčejnou JS funkci makeCounter(). Každé zavolání vyrobí nové počítadlo s vlastní proměnnou count v closure.

Vyzkoušej:

Vytvoř tři počítadla.
Klikej na A.increment() – roste jen A. B a C mají vlastní count.
Klikni na C.increment() a pak zase na A. Každé počítadlo pokračuje tam, kde skončilo – batůžek si hodnotu drží.

Co z toho plyne: Každé zavolání funkce vytvoří nové proměnné. Funkce, které při tom vzniknou, si je nesou s sebou – i dlouho poté, co vnější funkce skončila.

Načítám interaktivní část…

Batůžek obsahuje proměnnou, ne kopii hodnoty

let message = 'Ahoj'
const show = () => console.log(message)

message = 'Nazdar'
show()     // 'Nazdar' – funkce čte proměnnou v okamžiku zavolání

V Reactu to má zajímavý důsledek: každý render komponenty je nové zavolání funkce s novými proměnnými. Funkce vytvořená v jednom renderu „vidí“ hodnoty právě z toho renderu. Tomu se říká snímek (snapshot) a podrobně ho rozebírá lekce 0.10 a lekce o stavu.

6. Čisté funkce a vedlejší efekty

Čistá funkce je jako kalkulačka: pro stejné vstupy vrátí vždy stejný výsledek a kromě toho nic jiného nedělá. Nemění nic venku, nečte hodiny ani náhodu.

// ✅ Čisté
const add = (a, b) => a + b
const fullName = (user) => `${user.first} ${user.last}`
const withVat = (price) => Math.round(price * 1.21)

// ❌ Nečisté – výsledek závisí na něčem jiném než na vstupu
const now = () => new Date()             // pokaždé jiný čas
const roll = () => Math.random()         // pokaždé jiné číslo
const total = (price) => price + tax     // čte vnější proměnnou, která se může změnit

// ❌ Nečisté – mají vedlejší efekt (mění svět kolem)
let count = 0
const increment = () => { count++ }      // mění vnější proměnnou
const addItem = (list, x) => { list.push(x) }   // mění předané pole
const save = (data) => localStorage.setItem('data', data)
const log = (x) => console.log(x)

Ověř si to

Kvíz Co vrátí const f = (x) => { x + 1 }; f(1)?

2undefined1Chybu

Kvíz Jak správně zavoláš greet('Jana') až za 2 sekundy?

setTimeout(greet('Jana'), 2000)setTimeout(() => greet('Jana'), 2000)setTimeout(greet, 'Jana', 2000)

Kvíz const add5 = makeAdder(5). Co je add5?

Číslo 5FunkceundefinedObjekt

Kvíz Která funkce je čistá?

(list, x) => { list.push(x); return list }(price) => price * 1.21() => Date.now()(x) => { console.log(x); return x }

Rozcvička

Výzva

Dvě šipkové funkce

Rozcvička

Doplň těla dvou šipkových funkcí. Každá se vejde na jeden řádek.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Dvě šipkové funkce

1. square(3) má vrátit 9 (číslo krát samo sebe).
2. isEven(4) má vrátit true, isEven(5) false. Sudé číslo má zbytek po dělení dvěma 0: n % 2 === 0

Načítám interaktivní část…

Mám hotovo

Výzva

Továrny na funkce

Střední Bonusová výzva

Šest malých funkcí, které vyrábějí jiné funkce nebo je dostávají jako argument. Procvičíš si parametry, callbacky a closures.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Šipková funkce s jedním výrazem vrací sama, se složenými závorkami potřebuje return. Objekt vracej v ({ … }).
Parametry: chybějící jsou undefined, výchozí hodnoty přes =, libovolný počet přes ...rest. Hodně parametrů → jeden objekt.
Early return odbaví výjimky na začátku a zbaví tě zanoření.
fn je funkce, fn() je její výsledek. Callback předávej bez závorek, nebo ho obal do () => fn(arg).
Closure: funkce si pamatuje proměnné z místa, kde vznikla. Každé zavolání vnější funkce = nové proměnné.
Čistá funkce = stejný vstup, stejný výstup, nic kolem nemění. Komponenty v Reactu musí vykreslovat čistě.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.