Lekce 0.5 · JavaScript obecně

Pole II: reduce, řazení a seskupování

reduce do hloubky, toSorted, Object.groupBy, Set, flatMap a metody, které mění pole.

Než začneme: z mnoha jedno

V minulé lekci z pole vždycky vzniklo zase pole (map, filter), jedna položka (find) nebo ano/ne (some). Často ale potřebuješ z celého pole vyrobit jednu souhrnnou hodnotu: celkovou cenu košíku, nejdražší položku, počty podle kategorií.

Představ si pokladní, která markuje nákup. Začne s nulou na displeji a s každou položkou na pásu přičte její cenu. Na konci ukáže jedno číslo. Přesně tohle dělá reduce – a protože „mezisoučet“ může být cokoli (číslo, objekt, pole), umí toho překvapivě hodně.

Druhá polovina lekce patří řazení, seskupování a metodám, které tiše mění původní pole – a jejich bezpečným náhradám.

1. reduce krok za krokem

const prices = [12, 15, 6]

const total = prices.reduce((sum, price) => sum + price, 0)
//                           ↑    ↑                      ↑
//              akumulátor  položka              počáteční hodnota
// total = 33

reduce dostane dvě věci: funkci a počáteční hodnotu akumulátoru. Funkce se zavolá pro každou položku. Dostane „dosavadní výsledek“ (akumulátor) a aktuální položku a vrátí nový dosavadní výsledek. Ten dostane při dalším zavolání.

Krok	sum (akumulátor)	price	funkce vrátí
1.	0 (počáteční hodnota)	12	0 + 12 = 12
2.	12	15	12 + 15 = 27
3.	27	6	27 + 6 = 33
konec			33 – výsledek reduce

2. Co všechno reduce spočítá

Čísla: součet, průměr, maximum

const cart = [
  { name: 'Jablko', price: 12, qty: 3 },
  { name: 'Chléb', price: 45, qty: 1 },
  { name: 'Mléko', price: 22, qty: 2 },
]

const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0)   // 125
const count = cart.reduce((sum, item) => sum + item.qty, 0)                // 6
const average = total / count                                              // 20.83…

// Maximum: akumulátor si pamatuje dosud největší
const maxPrice = cart.reduce((max, item) => (item.price > max ? item.price : max), 0)   // 45

// Nejdražší POLOŽKA (objekt): akumulátor je dosud nejdražší položka
const priciest = cart.reduce((best, item) => (item.price > best.price ? item : best))   // Chléb
// (bez počáteční hodnoty začne prvním prvkem – tady je to v pořádku, pokud pole není prázdné)

Objekt: počty a součty podle klíče

const votes = ['ano', 'ne', 'ano', 'zdržel se', 'ano']

const counts = votes.reduce((acc, vote) => {
  acc[vote] = (acc[vote] ?? 0) + 1
  return acc                         // nezapomeň vrátit akumulátor!
}, {})
// { ano: 3, ne: 1, 'zdržel se': 1 }

// Totéž bez měnění akumulátoru (spread) – delší, ale „čisté“
const counts = votes.reduce((acc, vote) => ({ ...acc, [vote]: (acc[vote] ?? 0) + 1 }), {})

Slovník podle id

const users = [{ id: 7, name: 'Jana' }, { id: 9, name: 'Petr' }]

const byId = users.reduce((acc, user) => {
  acc[user.id] = user
  return acc
}, {})
// { 7: { id: 7, name: 'Jana' }, 9: { id: 9, name: 'Petr' } }

byId[9].name   // 'Petr' – rychlé hledání bez procházení pole

// Kratší alternativa bez reduce:
Object.fromEntries(users.map((u) => [u.id, u]))

Ukázka

Krokovač reduce

Co vidíš: Čtyři položky a čtyři různé reducery. Tabulka ukazuje, co bylo v akumulátoru před každým krokem a co funkce vrátila.

Vyzkoušej:

U součet klikej na Další krok. Akumulátor roste 0 → 12 → 18 → 33 → 42.
Přepni na maximum: akumulátor se mění, jen když přijde dražší položka.
Přepni na počty: akumulátor je objekt a každý krok v něm zvýší jednu kategorii.
Seskupení: akumulátor je objekt s poli jmen. Tohle umí i vestavěné Object.groupBy.

Co z toho plyne: reduce je smyčka s pamětí. Funkce vždy dostane, co vrátila minule, a vrací novou verzi. Typ akumulátoru (číslo, objekt, pole) určuje počáteční hodnota.

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

3. Seskupování: Object.groupBy

Rozdělit pole do skupin podle nějaké vlastnosti umí moderní JavaScript jedním voláním:

const products = [
  { name: 'Jablko', category: 'ovoce' },
  { name: 'Mrkev', category: 'zelenina' },
  { name: 'Hruška', category: 'ovoce' },
]

const groups = Object.groupBy(products, (p) => p.category)
// {
//   ovoce:    [{ name: 'Jablko', … }, { name: 'Hruška', … }],
//   zelenina: [{ name: 'Mrkev', … }],
// }

// Skupinu může určit i výpočet
Object.groupBy(products, (p) => (p.name.length > 5 ? 'dlouhé' : 'krátké'))

// Typické použití: projít skupiny
for (const [category, items] of Object.entries(groups)) {
  console.log(category, items.map((p) => p.name).join(', '))
}
// ovoce Jablko, Hruška
// zelenina Mrkev

4. Řazení

Řadí se metodou toSorted (nové pole) nebo starší sort (mění původní pole). Obě dostanou porovnávací funkci: ta dostane dvě položky a a b a vrátí číslo.

Funkce vrátí	Znamená
záporné číslo	a patří PŘED b
kladné číslo	a patří ZA b
0	je to jedno, nech pořadí

const prices = [40, 5, 100, 25]

prices.toSorted((a, b) => a - b)    // [5, 25, 40, 100] – vzestupně
prices.toSorted((a, b) => b - a)    // [100, 40, 25, 5] – sestupně
prices                              // [40, 5, 100, 25] – toSorted původní pole nemění

// Proč a - b? Když a < b, vyjde záporné → a jde dopředu. Přesně co chceme.

Řazení textů a objektů

const names = ['Žofie', 'adam', 'Čeněk', 'Bára']

names.toSorted()                                   // ['Bára', 'adam', 'Čeněk', 'Žofie'] 😕 podle kódů znaků
names.toSorted((a, b) => a.localeCompare(b, 'cs')) // ['adam', 'Bára', 'Čeněk', 'Žofie'] ✅ česká abeceda

const users = [
  { name: 'Petr', age: 25 },
  { name: 'Jana', age: 31 },
  { name: 'Eva', age: 25 },
]

users.toSorted((a, b) => a.age - b.age)                    // podle věku
users.toSorted((a, b) => a.name.localeCompare(b.name, 'cs')) // podle jména

// Podle dvou kritérií: nejdřív věk, při shodě jméno
users.toSorted((a, b) => a.age - b.age || a.name.localeCompare(b.name, 'cs'))
// Eva (25), Petr (25), Jana (31)
// když a.age - b.age je 0 (falsy), použije se část za ||

// Podle data
orders.toSorted((a, b) => new Date(b.createdAt) - new Date(a.createdAt))   // nejnovější první

// Booleany: nejdřív nehotové
tasks.toSorted((a, b) => Number(a.done) - Number(b.done))

5. Výřezy, spojování a zplošťování

const letters = ['a', 'b', 'c', 'd', 'e']

letters.slice(1, 3)      // ['b', 'c'] – od indexu 1 do 3 (bez 3), nové pole
letters.slice(2)         // ['c', 'd', 'e'] – od 2 do konce
letters.slice(-2)        // ['d', 'e'] – poslední dvě
letters.slice(0, 3)      // ['a', 'b', 'c'] – první tři („top 3“)
letters.slice()          // kopie celého pole

const a = [1, 2]
const b = [3, 4]
[...a, ...b]            // [1, 2, 3, 4] – spojení
[0, ...a, 2.5, ...b]    // [0, 1, 2, 2.5, 3, 4] – s vložením hodnot
a.concat(b)              // [1, 2, 3, 4] – totéž postaru

['Jana', 'Petr'].join(', ')   // 'Jana, Petr'
['a', 'b'].join('')           // 'ab'

flat a flatMap

[[1, 2], [3], [4, 5]].flat()   // [1, 2, 3, 4, 5] – zploští o jednu úroveň

const posts = [
  { title: 'A', tags: ['react', 'js'] },
  { title: 'B', tags: ['css'] },
]

posts.map((p) => p.tags)       // [['react', 'js'], ['css']] – pole polí
posts.flatMap((p) => p.tags)   // ['react', 'js', 'css'] – map + flat v jednom

6. Unikátní hodnoty: Set

Set je kolekce, která si každou hodnotu pamatuje jen jednou. Ideální na odstranění duplicit:

const tags = ['react', 'js', 'react', 'css', 'js']

const unique = new Set(tags)   // Set { 'react', 'js', 'css' }
unique.size                    // 3
unique.has('css')              // true
[...unique]                   // ['react', 'js', 'css'] – zpátky na pole

// Jednořádková klasika
const uniqueTags = [...new Set(tags)]

// Unikátní kategorie z pole objektů
const categories = [...new Set(products.map((p) => p.category))]

7. Metody, které mění pole

Pár starších metod nepíše nové pole, ale přepisuje to původní. V obyčejném skriptu to nevadí, ale když pole patří někomu jinému (třeba stavu v Reactu), je to zdroj nepříjemných chyb. Každá má bezpečnou náhradu:

❌ Mění původní pole	✅ Vrací nové pole	Co dělá
`arr.push(x)`	`[...arr, x]`	přidá na konec
`arr.unshift(x)`	`[x, ...arr]`	přidá na začátek
`arr.pop()`	`arr.slice(0, -1)`	odebere poslední
`arr.shift()`	`arr.slice(1)`	odebere první
`arr.splice(i, 1)`	`arr.toSpliced(i, 1)`	odebere na pozici i
`arr.splice(i, 0, x)`	`arr.toSpliced(i, 0, x)`	vloží na pozici i
`arr[i] = x`	`arr.with(i, x)`	nahradí na pozici i
`arr.sort(fn)`	`arr.toSorted(fn)`	seřadí
`arr.reverse()`	`arr.toReversed()`	obrátí pořadí

const original = [3, 1, 2]

const sorted = original.sort((a, b) => a - b)
sorted      // [1, 2, 3]
original    // [1, 2, 3] 😱 změnil se i originál – sorted a original jsou TOTÉŽ pole

const original2 = [3, 1, 2]
const sorted2 = original2.toSorted((a, b) => a - b)
sorted2     // [1, 2, 3]
original2   // [3, 1, 2] ✅

Ověř si to

Kvíz Co vrátí [1, 2, 3].reduce((acc, n) => acc + n, 10)?

61610[11, 12, 13]

Kvíz Co vrátí [10, 9, 1].toSorted()?

[1, 9, 10][1, 10, 9][10, 9, 1][9, 10, 1]

Kvíz Jak získáš pole kategorií bez opakování?

products.map((p) => p.category).unique()[...new Set(products.map((p) => p.category))]products.filter((p) => p.category)Object.groupBy(products)

Kvíz const b = a.sort(). Co platí?

a zůstane beze změnya i b jsou totéž seřazené poleb je seřazená kopie

Rozcvička

Výzva

Součet a řazení

Rozcvička

Sečti čísla v poli a seřaď je od nejmenšího. Pole jsou zmrazená, takže sort neprojde.

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

VÝZVA: Součet a řazení

1. total([4, 1, 5]) má vrátit 10. Použij reduce s počáteční hodnotou 0.
2. sortAsc([4, 1, 5]) má vrátit [1, 4, 5]. Použij toSorted((a, b) => a - b).

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

Mám hotovo

Výzvy

První výzva kombinuje všechno z lekcí o polích na reálných datech produktů. Druhá procvičí reduce, Set, řazení a flatMap – a košík je zmrazený, takže sort neprojde.

Výzva

Statistiky obchodu

Lehká

Tabulka statistik je hotová, jen v ní jsou vymyšlená čísla. Nahraď je výpočty z pole produktů – každou hodnotu jedním výrazem.

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

VÝZVA: Statistiky obchodu (metody polí)

Data: pole `products` ze src/course/fakeApi.ts.
Každý produkt vypadá takto: { id: 1, name: 'Jablko', category: 'ovoce', price: 12, inStock: true }

Tabulka je hotová, jen jsou všechny hodnoty zatím „natvrdo“. Nahraď každou z nich
výpočtem z pole `products` – vždy jedním výrazem (klidně s řetězením metod).

1. `inStockCount` – kolik produktů je skladem (filter + length).
2. `stockValue` – součet cen produktů skladem (filter + reduce, počáteční hodnota 0).
3. `hasDairy` – je v nabídce aspoň jeden produkt z kategorie 'mléčné'? (some)
4. `allCheap` – stojí všechny produkty méně než 50 Kč? (every)
5. `product8` – název produktu s id 8 (find; find může vrátit undefined → použij ?.name)
6. `cheapest` – název nejlevnějšího produktu (toSorted podle ceny a vzít první položku).
7. `fruitNames` – názvy ovoce seřazené podle abecedy a spojené čárkou:
   filter → map → toSorted((a, b) => a.localeCompare(b)) → join(', ')

Pole `products` přitom nesmíš změnit (žádné sort, push, splice…).

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

Mám hotovo

Výzva

Přehled košíku

Střední Bonusová výzva

Sedm funkcí, které z košíku spočítají souhrny: celkovou cenu, počty, ceny po kategoriích, unikátní hodnoty a žebříček nejdražších položek.

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

reduce = smyčka s pamětí: funkce dostane akumulátor a položku a vrátí nový akumulátor. Vždy uveď počáteční hodnotu a vždy akumulátor vrať.
Akumulátor může být číslo (součet), objekt (počty, slovník podle id) nebo cokoli jiného.
Object.groupBy rozdělí pole do skupin, Math.max(...arr) najde maximum čísel.
Řazení: čísla (a, b) => a - b, texty a.localeCompare(b, 'cs'), víc kritérií přes ||. Bez funkce se řadí jako text.
slice vyřízne, spread spojí, flatMap zploští, [...new Set(arr)] odstraní duplicity.
push, splice, sort, reverse mění pole. Bezpečné náhrady: spread, toSpliced, with, toSorted, toReversed.

Načítám lekci…

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