Lekce 0.3 · JavaScript obecně

Objekty

Tečka vs. hranaté závorky, destrukturace, spread, Object.entries a dynamické klíče.

Než začneme: objekt je kartotéční lístek

Představ si kartotéku v knihovně. Každý lístek popisuje jednu knihu a má kolonky s nadpisy: název, autor, rok. Objekt v JavaScriptu je přesně takový lístek – sada pojmenovaných kolonek (vlastností), každá s nějakou hodnotou.

const book = {
  title: 'Malý princ',     // klíč: hodnota
  author: 'Saint-Exupéry',
  year: 1943,
  available: true,
}

Objekty jsou všude: uživatel, produkt v košíku, nastavení aplikace, odpověď ze serveru. V Reactu jsou objekt i props, které komponenta dostane. Kdo umí s objekty šikovně zacházet, píše kratší a čitelnější kód.

1. Čtení vlastností

const user = { name: 'Jana', city: 'Praha', 'favorite color': 'modrá' }

user.name                  // 'Jana' – tečka: jméno znáš při psaní kódu
user['name']               // 'Jana' – závorky: totéž
user['favorite color']     // 'modrá' – klíč s mezerou jde přečíst jen závorkami

const key = 'city'
user[key]                  // 'Praha' – jméno vlastnosti je v PROMĚNNÉ
user.key                   // undefined – hledá vlastnost, která se doslova jmenuje „key“

Zápis	Kdy
`obj.name`	Jméno vlastnosti znáš už při psaní kódu – většina případů.
`obj[key]`	Jméno je v proměnné nebo se počítá za běhu (formulář s mnoha poli, slovník, smyčka).

Chybějící a vnořené vlastnosti

const order = {
  id: 7,
  customer: { name: 'Petr', address: { city: 'Brno' } },
}

order.customer.address.city    // 'Brno' – vnořené objekty čteš tečkou za tečkou
order.note                     // undefined – neexistující vlastnost není chyba
order.delivery.date            // 💥 TypeError: Cannot read properties of undefined
order.delivery?.date           // undefined – ?. se zastaví, když něco chybí (lekce 0.6)

2. Přidání, změna, smazání

const user = { name: 'Jana' }

user.age = 31            // přidá novou vlastnost
user.name = 'Jana N.'    // změní existující
user['city'] = 'Praha'   // totéž se závorkami
delete user.age          // smaže vlastnost

user   // { name: 'Jana N.', city: 'Praha' }

3. Zkrácený zápis a vypočítané klíče

const name = 'Jana'
const age = 31

const user = { name: name, age: age }   // postaru
const user = { name, age }              // zkratka: proměnná se jmenuje stejně jako klíč

// Metoda – funkce uložená ve vlastnosti
const counter = {
  count: 0,
  increment() {            // zkratka za increment: function () { … }
    this.count++
  },
}

Vypočítaný klíč [ ]

Když jméno vlastnosti znáš až za běhu (je v proměnné), dej ho při vytváření objektu do hranatých závorek:

const field = 'email'
const value = 'jana@example.cz'

const update = { [field]: value }   // { email: 'jana@example.cz' }
const wrong = { field: value }      // { field: 'jana@example.cz' } – doslova „field“

// Typické použití: jedna funkce pro všechna pole formuláře
function updateForm(form, field, value) {
  return { ...form, [field]: value }
}
updateForm({ name: '', email: '' }, 'name', 'Jana')   // { name: 'Jana', email: '' }

const prefix = 'color'
const theme = { [`${prefix}Primary`]: 'blue' }        // { colorPrimary: 'blue' }

4. Destrukturace

Destrukturace je vybalení krabice: místo „vezmi krabici a z ní věc s nálepkou name“ řekneš rovnou „chci věci name a city“.

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

const { name, city } = user          // dvě proměnné najednou
const { name: userName } = user      // přejmenování: proměnná se bude jmenovat userName
const { role = 'host' } = user       // výchozí hodnota, když vlastnost chybí (nebo je undefined)
const { name: n, role: r = 'host' } = user   // přejmenování i výchozí hodnota
const { age, ...rest } = user        // rest = { name: 'Jana', city: 'Praha' }

Vnořená destrukturace

const order = { id: 7, customer: { name: 'Petr', address: { city: 'Brno' } } }

const { customer: { name, address: { city } } } = order
name   // 'Petr'
city   // 'Brno'
// customer ani address jako proměnné nevznikly – jen jsme jimi „prošli“

Destrukturace v parametrech

// Funkce dostane objekt a rovnou si z něj vybalí, co potřebuje
function formatUser({ name, city = 'neznámé' }) {
  return `${name} (${city})`
}
formatUser({ name: 'Jana', city: 'Praha', age: 31 })   // 'Jana (Praha)'

// Přesně takhle vypadá komponenta v Reactu:
function UserCard({ name, city }) { … }

// A v callbacku – každá položka pole je objekt
users.map(({ name }) => name)

Destrukturace polí

U pole se nevybaluje podle jména, ale podle pořadí:

const [first, second] = ['jablko', 'hruška', 'švestka']   // 'jablko', 'hruška'
const [, , third] = ['jablko', 'hruška', 'švestka']       // přeskočit: 'švestka'
const [head, ...tail] = [1, 2, 3, 4]                       // 1 a [2, 3, 4]

let a = 1, b = 2
;[a, b] = [b, a]          // prohození: a = 2, b = 1 (středník na začátku je tu nutný)

const [count, setCount] = useState(0)   // ← v Reactu uvidíš pořád

5. Spread: kopírování a slučování

Tři tečky před objektem znamenají „vysyp sem všechny jeho vlastnosti“.

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

const copy = { ...user }                       // mělká kopie: nový objekt, stejné vlastnosti
copy === user                                  // false – jsou to dva různé objekty

const moved = { ...user, city: 'Brno' }        // kopie s přepsanou vlastností
const withAge = { ...user, age: 31 }           // kopie s novou vlastností

const defaults = { theme: 'light', lang: 'cs', fontSize: 16 }
const saved = { theme: 'dark' }
const settings = { ...defaults, ...saved }     // { theme: 'dark', lang: 'cs', fontSize: 16 }

Podmíněné vlastnosti

const isAdmin = true
const user = {
  name: 'Jana',
  ...(isAdmin ? { role: 'admin' } : {}),   // vlastnost role přidá jen pro admina
}

6. Procházení objektu

const prices = { jablko: 12, hruška: 15, švestka: 8 }

Object.keys(prices)      // ['jablko', 'hruška', 'švestka']
Object.values(prices)    // [12, 15, 8]
Object.entries(prices)   // [['jablko', 12], ['hruška', 15], ['švestka', 8]]

for (const [fruit, price] of Object.entries(prices)) {
  console.log(`${fruit} stojí ${price} Kč`)
}

Object.keys(prices).length           // 3 – počet vlastností
Object.keys({}).length === 0         // true – tak se pozná prázdný objekt

// Z dvojic zpátky na objekt
Object.fromEntries([['a', 1], ['b', 2]])   // { a: 1, b: 2 }

Kombinace entries → úprava → fromEntries je běžný způsob, jak „přepočítat“ všechny hodnoty objektu. Metody polí jako map a filter přijdou v příští lekci, pak to půjde napsat na jeden řádek.

// Zdražit všechno o 10 %
const result = {}
for (const [fruit, price] of Object.entries(prices)) {
  result[fruit] = Math.round(price * 1.1)
}
// result = { jablko: 13, hruška: 17, švestka: 9 }

'jablko' in prices                 // true – má objekt tuhle vlastnost?
Object.hasOwn(prices, 'banán')     // false

Ukázka

Laboratoř objektů

Co vidíš: Objekt user a tlačítka s operacemi. Pro každou vidíš kód, vysvětlení a výsledek.

Vyzkoušej:

Porovnej tečka a závorky: závorky umí přečíst vlastnost, jejíž jméno je v proměnné.
Klikni na destrukturace: city se přejmenovalo na town a chybějící email dostal výchozí hodnotu.
Klikni na rest a spread. Rest vlastnost odebere, spread ji přepíše nebo přidá – oba vytvoří nový objekt.
Projdi keys, values a entries – tři pohledy na tentýž objekt.

Co z toho plyne: Objekt jde číst tečkou i závorkami, vybalit destrukturací, kopírovat spreadem a převést na pole přes Object.entries.

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

7. Objekt jako slovník

Objekt nemusí popisovat jednu věc. Často slouží jako slovník (překladová tabulka): klíč → hodnota. Nahradí tím dlouhé řady if/else:

// ❌ Řada podmínek
function statusLabel(status) {
  if (status === 'new') return 'Nová'
  if (status === 'paid') return 'Zaplacená'
  if (status === 'shipped') return 'Odeslaná'
  return 'Neznámý stav'
}

// ✅ Slovník
const STATUS_LABELS = {
  new: 'Nová',
  paid: 'Zaplacená',
  shipped: 'Odeslaná',
}
const statusLabel = (status) => STATUS_LABELS[status] ?? 'Neznámý stav'

Počítání a vyhledávání podle ID

// Počítadlo výskytů
const votes = ['ano', 'ne', 'ano', 'ano']
const counts = {}
for (const v of votes) {
  counts[v] = (counts[v] ?? 0) + 1
}
counts   // { ano: 3, ne: 1 }

// Rychlé hledání podle id místo procházení celého pole
const users = [{ id: 7, name: 'Jana' }, { id: 9, name: 'Petr' }]
const usersById = {}
for (const u of users) {
  usersById[u.id] = u
}
usersById[9].name   // 'Petr'

Ověř si to

Kvíz const key = 'city'. Jak přečteš vlastnost, jejíž jméno je v proměnné key?

user.keyuser[key]user['key']user.{key}

Kvíz Co je výsledkem { ...{ a: 1, b: 2 }, b: 3 }?

{ a: 1, b: 2 }{ a: 1, b: 3 }{ b: 3 }Chyba – b je dvakrát

Kvíz const { name: userName } = user. Jaká proměnná vznikne?

nameuserNamename i userNamežádná

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

Vizitka

Rozcvička

Přečti dvě vlastnosti objektu a vyrob jeho kopii s jednou vlastností navíc.

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

VÝZVA: Vizitka

1. fullName(person) má vrátit jméno a příjmení s mezerou: 'Jana Nováková'.
   Vlastnosti čti tečkou: person.first, person.last
2. withCity(person, 'Brno') má vrátit NOVÝ objekt s přidaným městem: { ...person, city }

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

Mám hotovo

Výzva

Nářadí na objekty

Střední Bonusová výzva

Šest malých funkcí na práci s objekty: dynamické klíče, odebrání vlastnosti, výběr vlastností, počítání a přepočet hodnot. Vstupy jsou zmrazené, takže je nemůžeš omylem změnit.

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

Tečka, když jméno vlastnosti znáš, závorky, když je v proměnné.
Chybějící vlastnost je undefined, ale čtení z undefined spadne – pomůže ?..
Zkrácený zápis { name } a vypočítaný klíč { [field]: value }.
Destrukturace umí přejmenovat (name: n), dát výchozí hodnotu (= 'host') i posbírat zbytek (...rest).
Spread vyrobí mělkou kopii; vlastnosti napsané později vyhrávají.
Object.keys / values / entries převedou objekt na pole, fromEntries zpátky.
Objekt jako slovník nahradí řadu if/else a umí počítat výskyty nebo hledat podle id.

Načítám lekci…

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