04.02 Přístup k prvkům

Výuka

Proč Přístup k prvkům?

Pokud máš pole, potřebuješ číst a měnit jeho prvky. Přístup k prvkům pomocí indexu je základní operace s poli.

Proč to potřebujeme?

• Čtení hodnot - Získat konkrétní prvek z pole
• Modifikace - Změnit hodnotu na určité pozici
• Délka pole - Zjistit, kolik prvků pole obsahuje
• Iterace - Projít všechny prvky jeden po druhém

Představ si to jako: Regál s přihr

ádkami. Každá přihrádka má číslo (index). Když chceš vzít knihu z třetí přihrádky, řekneš: "Dej mi knihu z přihrádky číslo 2" (protože číslování začíná od 0!).

Jak to funguje?

1. Indexy začínají od 0 (ne od 1!)
2. První prvek má index 0, druhý index 1, atd.
3. Přístup: pole[index]
4. Zápis: pole[index] = nováHodnota
5. Přístup mimo rozsah vrátí undefined
6. Délka pole: pole.length

Klíčové koncepty

• Index - pozice prvku v poli (začíná od 0)
• Indexování od nuly (zero-based indexing) - první prvek má index 0
• Bracket notation [] - syntaxe pro přístup k prvkům
• length - vlastnost vracející počet prvků
• Out of bounds - přístup mimo rozsah (vrací undefined)
• Záporné indexy - JavaScript je nepodporuje (na rozdíl od Pythonu)

JavaScript

Příklad 1: Čtení prvků pomocí indexu

const fruits = ['jablko', 'banán', 'třešeň', 'datle'];

console.log(fruits[0]);  // První prvek
// → jablko

console.log(fruits[2]);  // Třetí prvek
// → třešeň

console.log(fruits[3]);  // Čtvrtý prvek
// → datle

Co se stalo?

• fruits[0] - první prvek (index 0)
• fruits[2] - třetí prvek (index 2, ne 3!)
• Indexy začínají od 0, takže index = pozice - 1

Příklad 2: Přístup k prvnímu a poslednímu prvku

const numbers = [10, 20, 30, 40, 50];

// První prvek
const first = numbers[0];
console.log(first);
// → 10

// Poslední prvek - použij length - 1
const last = numbers[numbers.length - 1];
console.log(last);
// → 50

console.log(numbers.length);
// → 5 (počet prvků)

Co se stalo?

• První prvek: pole[0]
• Poslední prvek: pole[pole.length - 1]
• length je 5, ale indexy jdou od 0 do 4 (proto length - 1)

Příklad 3: Změna hodnoty prvku

const colors = ['červená', 'zelená', 'modrá'];
console.log(colors);
// → ['červená', 'zelená', 'modrá']

// Změň druhý prvek (index 1)
colors[1] = 'žlutá';
console.log(colors);
// → ['červená', 'žlutá', 'modrá']

// Změň první prvek
colors[0] = 'fialová';
console.log(colors);
// → ['fialová', 'žlutá', 'modrá']

Co se stalo?

• pole[index] = novaHodnota - přepíše hodnotu na dané pozici
• Pole je mutovatelné - můžeš měnit jeho prvky
• (Poznámka: V TypeScriptu můžeš použít readonly pro zabránění změnám)

Příklad 4: Přístup mimo rozsah (out of bounds)

const arr = [1, 2, 3];

console.log(arr[5]);
// → undefined (index neexistuje)

console.log(arr[-1]);
// → undefined (záporné indexy nejsou podporovány)

console.log(arr[100]);
// → undefined

Co se stalo?

• Přístup mimo rozsah nevrací chybu, ale undefined
• JavaScript (na rozdíl od Pythonu) nepodporuje záporné indexy
• arr[-1] není "poslední prvek", ale undefined

Příklad 5: Dynamické indexování

const items = ['a', 'b', 'c', 'd'];

for (let i = 0; i < items.length; i++) {
  console.log(`Index ${i}: ${items[i]}`);
}
// → Index 0: a
// → Index 1: b
// → Index 2: c
// → Index 3: d

Co se stalo?

• V cyklu používáme proměnnou i jako index
• i začíná od 0 a jde do items.length - 1
• Toto je klasický pattern pro iteraci přes pole

Příklad 6: length vlastnost - čtení a zápis

const arr = [1, 2, 3, 4, 5];

console.log(arr.length);
// → 5

// Zkrátíme pole nastavením length
arr.length = 3;
console.log(arr);
// → [1, 2, 3] (poslední 2 prvky smazány!)

// Prodloužíme pole
arr.length = 5;
console.log(arr);
// → [1, 2, 3, empty × 2] (přidány prázdné sloty)

Co se stalo?

• length můžeš i zapisovat, ne jen číst
• Zkrácení length smaže prvky za novou délkou
• Prodloužení length přidá prázdné sloty
• Pozor: Toto je nebezpečné - raději používej metody jako slice() nebo splice()

TypeScript

TypeScript přidává typovou kontrolu při přístupu k prvkům - zkontroluje, že pracuješ se správným typem.

Stejné příklady s typy

const fruits: string[] = ['jablko', 'banán', 'třešeň'];

// Přístup k prvku
const first: string = fruits[0];  // ✅ OK
console.log(first);  // → jablko

// TypeScript inferuje typ
const second = fruits[1];  // second má typ string
console.log(second);  // → banán

// Přístup mimo rozsah - stále vrací string | undefined
const outOfBounds = fruits[10];  // typ: string | undefined
console.log(outOfBounds);  // → undefined

// Změna hodnoty
fruits[0] = 'hruška';  // ✅ OK - string
fruits[1] = 123;  // ❌ Error: Type 'number' is not assignable to type 'string'

// Length
const len: number = fruits.length;

// Readonly pole - nelze měnit
const readonly: readonly string[] = ['a', 'b', 'c'];
// readonly[0] = 'd';  // ❌ Error: Index signature in type 'readonly string[]' only permits reading

// Tuple - přístup s typovou kontrolou na pozicích
const tuple: [string, number] = ['Alice', 25];
const name: string = tuple[0];  // ✅ OK - první je string
const age: number = tuple[1];   // ✅ OK - druhý je number
// const wrong: string = tuple[1];  // ❌ Error: Type 'number' is not assignable to type 'string'

TypeScript přidává:

• ✅ Typovou kontrolu prvků - nemůžeš vložit špatný typ
• ✅ Inference - TypeScript pozná typ prvku z typu pole
• ✅ Readonly kontrolu - readonly T[] brání změnám
• ✅ Tuple kontrolu - kontroluje typy na konkrétních pozicích

Rozdíl JS vs TS

JavaScript:

• Přístup k prvkům bez typové kontroly
• Můžeš vložit jakýkoli typ na jakoukoli pozici
• Chyby odhalíš až při běhu
• Flexibilnější, ale nebezpečnější

TypeScript:

• Přístup s typovou kontrolou
• Nemůžeš vložit špatný typ prvku
• Chyby odhalíš už při psaní kódu
• Bezpečnější, lépe dokumentované

// JavaScript - projde, ale může způsobit problém
const numbers = [1, 2, 3];
numbers[0] = 'text';  // OK v JS
console.log(numbers[0] * 2);  // NaN (text * 2 = NaN)

// TypeScript - editor tě upozorní
const numbers: number[] = [1, 2, 3];
numbers[0] = 'text';  // ❌ Error: Type 'string' is not assignable to type 'number'

Tip

💡 Poslední prvek pomocí length - 1:

const arr = [1, 2, 3, 4, 5];

// ✅ Správně - poslední prvek
const last = arr[arr.length - 1];  // 5

// ❌ Špatně - záporné indexy nefungují v JS
const wrong = arr[-1];  // undefined (ne poslední prvek!)

// ✅ Alternativa - at() metoda (ES2022+)
const last = arr.at(-1);  // 5 (podpora záporných indexů)

💡 Kontroluj rozsah před přístupem:

const arr = [1, 2, 3];
const index = 5;

// ❌ Špatně - nekontroluješ rozsah
const value = arr[index];  // undefined

// ✅ Dobře - kontroluješ rozsah
if (index >= 0 && index < arr.length) {
  const value = arr[index];
  console.log(value);
} else {
  console.log('Index mimo rozsah');
}

💡 Neměň length ručně - použij metody:

const arr = [1, 2, 3, 4, 5];

// ❌ Nebezpečné - manuální změna length
arr.length = 3;

// ✅ Bezpečnější - použij slice()
const shortened = arr.slice(0, 3);  // [1, 2, 3] (nové pole)

// ✅ Nebo splice() pro mutaci
arr.splice(3);  // odstraní prvky od indexu 3 dál