Lekce 0.9 · JavaScript pro React

Reference a immutabilita

Hodnota vs. odkaz, mělká kopie, vnořené úpravy bez mutací – a proč na tom React stojí.

Než začneme: proč tahle lekce patří k Reactu

Předchozí lekce byly obecný JavaScript. Tahle a příští jsou o JavaScriptu, který React vyžaduje. Kdo je přeskočí, potká v Reactu záhadné chyby: „změnil jsem data, ale stránka se nepřekreslila“ nebo „změnil jsem jednu věc a rozbila se jiná“.

Obě chyby mají stejnou příčinu: nepochopení toho, jak JavaScript zachází s objekty a poli. Dvojčata vypadají stejně, ale jsou to dva různí lidé. A jeden člověk může mít dvě přezdívky, ale pořád je to jeden člověk. Přesně v tomhle se JavaScript s objekty liší od čísel a textů.

1. Hodnota vs. odkaz

Primitivní hodnoty (čísla, texty, booleany) se při přiřazení zkopírují. Každá proměnná má svou vlastní:

let a = 5
let b = a      // b dostane KOPII hodnoty 5
b = 10
a              // 5 – a se nezměnilo

Objekty a pole se chovají jinak. Proměnná v sobě nemá samotný objekt, ale cedulku s adresou, kde objekt bydlí. Přiřazení zkopíruje jen cedulku – obě proměnné pak vedou do stejného domu:

const a = { count: 1 }
const b = a          // b NENÍ kopie – je to druhá cedulka se STEJNOU adresou
b.count = 99
a.count              // 99 😱 změnil se i „a“ – je to tentýž objekt

const list = [1, 2]
const sameList = list
sameList.push(3)
list                 // [1, 2, 3]

	Primitivní hodnoty	Objekty, pole, funkce
Příklady	`5, 'ahoj', true, null`	`{ … }, [ … ], () => …`
Přiřazení b = a	zkopíruje hodnotu	zkopíruje odkaz (adresu)
a === b porovná	hodnotu	jestli je to TENTÝŽ objekt
Jdou změnit „uvnitř“?	ne (5 je prostě 5)	ano (vlastnosti, položky)

2. Porovnávání objektů

'ahoj' === 'ahoj'              // true – stejná hodnota
[1, 2] === [1, 2]              // false – dvě různá pole (dvě adresy), jen vypadají stejně
{ a: 1 } === { a: 1 }          // false

const x = { a: 1 }
const y = x
x === y                        // true – stejná adresa

// Porovnání podle obsahu si musíš napsat sám
x.a === y.a
JSON.stringify(arr1) === JSON.stringify(arr2)   // rychlá (ale nedokonalá) kontrola obsahu

3. Mutace: když funkce mění, co jí nepatří

Mutace znamená změnit existující objekt nebo pole „uvnitř“ – přepsat vlastnost, přidat položku, seřadit na místě. Problém nastane, když ten objekt sdílí víc míst v kódu:

function sortByPrice(products) {
  return products.sort((a, b) => a.price - b.price)   // ❌ sort mění předané pole
}

const catalog = loadProducts()        // pořadí podle katalogu
const cheapFirst = sortByPrice(catalog)
// 😱 catalog je teď taky seřazený podle ceny – funkce mu ho přeházela

function sortByPrice(products) {
  return products.toSorted((a, b) => a.price - b.price)   // ✅ vrátí nové pole
}

❌ Mutuje	✅ Vyrábí nové
`obj.name = 'x'`	`{ ...obj, name: 'x' }`
`delete obj.name`	`const { name, ...rest } = obj`
`arr.push(x)`	`[...arr, x]`
`arr.splice(i, 1)`	`arr.filter(…)` / `arr.toSpliced(i, 1)`
`arr[i] = x`	`arr.map(…)` / `arr.with(i, x)`
`arr.sort()`	`arr.toSorted()`
`arr.reverse()`	`arr.toReversed()`

Ukázka

Push vs. spread

Co vidíš: Dvě tlačítka, dva způsoby, jak získat pole se švestkou navíc. Pod nimi výpis obou polí.

Vyzkoušej:

Klikni na Zkopírovat proměnnou a push. Švestka přibyla i do původního fruits a next === fruits je true.
Klikni na Nové pole přes spread. Původní pole zůstalo, next === fruits je false.

Co z toho plyne: Přiřazení nekopíruje. Nové pole (nebo objekt) vznikne jen ze spreadu, map, filter a podobných metod – a jen takovou změnu React pozná.

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

4. Mělká a hluboká kopie

Spread vyrobí mělkou kopii: nový objekt na první úrovni, ale vnořené objekty jsou pořád tytéž. Jako když okopíruješ seznam adres – papír je nový, ale domy na adresách stejné.

const user = { name: 'Jana', address: { city: 'Praha' } }
const copy = { ...user }

copy === user                    // false – nový objekt
copy.address === user.address    // true – vnořený objekt je SDÍLENÝ

copy.name = 'Eva'                // user.name zůstane 'Jana' ✅
copy.address.city = 'Brno'       // user.address.city je taky 'Brno' 😱

Hluboká kopie

const deep = structuredClone(user)   // zkopíruje všechno do hloubky
deep.address === user.address        // false

// Starší trik (ztratí Date, funkce, undefined):
const deep2 = JSON.parse(JSON.stringify(user))

5. Kuchařka neměnných úprav

Tyhle vzory budeš v Reactu psát pořád dokola – při každé změně stavu. Vyplatí se je mít v ruce.

Objekty

const user = { name: 'Jana', age: 31, address: { city: 'Praha', zip: '11000' } }

{ ...user, age: 32 }                               // změnit vlastnost
{ ...user, email: 'jana@example.cz' }              // přidat vlastnost
const { age, ...withoutAge } = user                // odebrat vlastnost
{ ...user, [field]: value }                        // změnit vlastnost podle proměnné
{ ...user, address: { ...user.address, city: 'Brno' } }   // změnit vnořenou – spread na každé úrovni
{ ...user, age: user.age + 1 }                     // odvodit z předchozí hodnoty

Pole

const todos = [
  { id: 1, title: 'Nakoupit', done: false },
  { id: 2, title: 'Uklidit', done: true },
]

[...todos, newTodo]                                         // přidat na konec
[newTodo, ...todos]                                         // přidat na začátek
todos.toSpliced(1, 0, newTodo)                              // vložit na pozici 1
todos.filter((t) => t.id !== id)                            // odebrat podle id
todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t))     // změnit jednu položku
todos.map((t) => (t.id === id ? { ...t, title: newTitle } : t))   // přejmenovat jednu
todos.map((t) => ({ ...t, done: true }))                    // změnit všechny
todos.filter((t) => !t.done)                                // odebrat všechny hotové
todos.toSorted((a, b) => a.title.localeCompare(b.title))    // seřadit

Pole uvnitř objektu (a naopak)

const board = {
  title: 'Projekt',
  columns: [
    { id: 'todo', cards: [{ id: 1, text: 'A' }] },
    { id: 'done', cards: [] },
  ],
}

// Přidat kartu do sloupce 'done'
const next = {
  ...board,                                         // 1. nový board
  columns: board.columns.map((col) =>               // 2. nové pole sloupců
    col.id === 'done'
      ? { ...col, cards: [...col.cards, newCard] }  // 3. nový sloupec s novým polem karet
      : col,                                        //    ostatní sloupce beze změny
  ),
}

Postup je pořád stejný: jdi po cestě ke změně a na každé úrovni vyrob kopii; všechno mimo cestu nech, jak je. Když je zanoření moc hluboké, je to signál, že by stav šel uspořádat ploššeji (lekce 5 a 15).

6. Proč na tom React stojí

Když v Reactu změníš stav, React porovná starou a novou hodnotu přes === (přesněji Object.is). Když je to tentýž objekt, usoudí, že se nic nezměnilo, a komponentu nepřekreslí.

// Ukázka z lekce 2 – stav s polem úkolů
const [todos, setTodos] = useState([])

// ❌ Mutace: pole je pořád TOTÉŽ, React nic nepozná, stránka se nezmění
todos.push(newTodo)
setTodos(todos)

// ✅ Nové pole: React vidí jinou adresu → překreslí
setTodos([...todos, newTodo])

Rychlá detekce změn: stačí porovnat adresu, ne procházet obsah.
Optimalizace: memo, useMemo a závislosti efektů fungují jen díky tomu, že nezměněná data mají stejnou adresu a změněná novou.
Předvídatelnost: každý render pracuje se svým „snímkem“ dat, který mu nikdo pod rukama nezmění.
Undo/redo zadarmo: staré verze stavu zůstávají netknuté – stačí si je schovat (lekce 5).

Ověř si to

Kvíz const b = a; b.push(3) – co se stane s polem a?

Nic, b je kopieTaky obsahuje 3 – a i b jsou totéž poleChyba, a je const

Kvíz Co vrátí { a: 1 } === { a: 1 }?

truefalseChybu

Kvíz Jak správně změníš done u úkolu s id 2 v poli todos?

todos.find((t) => t.id === 2).done = truetodos.map((t) => (t.id === 2 ? { ...t, done: true } : t))todos[1].done = truetodos.filter((t) => t.id === 2)

Kvíz const copy = { ...user }; copy.address.city = 'Brno'. Změní se user.address.city?

Ne, copy je kopieAno, spread kopíruje jen první úroveňVyhodí to chybu

Rozcvička

Výzva

Nové místo změněného

Rozcvička

Přidej položku do pole a přejmenuj uživatele – pokaždé tak, že vznikne nové pole nebo nový objekt.

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

VÝZVA: Nové místo změněného

Vstupy jsou zmrazené – push ani přiřazení do vlastnosti neprojdou.

1. addFruit(['jablko'], 'hruška') má vrátit NOVÉ pole ['jablko', 'hruška']: [...list, fruit]
2. rename(user, 'Eva') má vrátit NOVÝ objekt se jménem 'Eva': { ...user, name }

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

Mám hotovo

Výzvy

První výzva procvičí základní neměnné úpravy na jednoduchých datech. Druhá jde do hloubky: stav s projekty a úkoly, kde testy přes === kontrolují, že kopíruješ jen to nutné – přesně jako React.

Výzva

Bez mutací

Lehká

Šest malých funkcí, které vracejí nová data místo úprav starých. Přesně takové funkce budeš v dalších lekcích psát pro změnu stavu.

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

VÝZVA: Bez mutací (šipkové funkce, destrukturace, spread, ?. a ??)

Pod tímto komentářem je šest funkcí. Napiš jejich těla. Testy pod nimi se spustí samy
a v kurzu uvidíš u každé ✅ nebo ❌.

Pravidlo: vstupy NIKDY neměň. Vždy vrať nové pole/objekt. Testy vstupy zmrazí
(deepFreeze), takže pokus o mutaci skončí chybou.

1. describe(user) – vrať text „Jana Nováková (Praha)“. Použij destrukturaci a šablonový řetězec `${…}`.
2. addTask(tasks, task) – vrať nové pole s `task` přidaným na konec (spread [...]).
3. removeTask(tasks, id) – vrať nové pole bez úkolu s daným id (filter).
4. toggleTask(tasks, id) – vrať nové pole, kde má úkol s daným id obrácené `done`;
   ostatní úkoly zůstanou tytéž objekty (map + spread objektu { ...t, done: … }).
5. moveTo(user, city) – vrať nový objekt uživatele s jiným městem (spread objektu).
6. cityOf(user) – vrať město uživatele, nebo 'neznámé', když uživatel chybí (?. a ??).

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

Mám hotovo

Výzva

Vnořené úpravy

Těžká Bonusová výzva

Stav aplikace s uživatelem, projekty a úkoly. Napiš šest funkcí, které v něm změní jednu věc – a všechno ostatní nechají jako tytéž objekty.

🔒 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í

Primitivní hodnoty se kopírují, objekty a pole sdílejí. Proměnná s objektem je cedulka s adresou.
=== u objektů porovnává adresu, ne obsah. Dva stejně vypadající objekty nejsou „stejné“.
Mutace mění objekt pro všechny, kdo na něj odkazují. push, splice, sort a přiřazení do vlastnosti mutují.
Spread je mělký. U vnořených dat kopíruj každou úroveň na cestě ke změně, zbytek nech.
Kuchařka: přidat = spread, odebrat = filter, změnit jednu položku = map s ternárem, změnit vlastnost = { ...obj, key: value }.
React pozná změnu jen podle nové adresy. Mutovaný stav = nepřekreslená stránka.

Načítám lekci…

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