04.01 Vytvoření pole

Výuka

Proč Pole?

Pole (Array) je datová struktura pro ukládání více hodnot pod jedním jménem. Místo vytváření mnoha proměnných (user1, user2, user3...) můžeš použít jedno pole.

Proč to potřebujeme?

• Organizace dat - Seskupit související hodnoty (seznam produktů, jména uživatelů)
• Efektivita - Jeden název pro mnoho hodnot
• Iterace - Projít všechny hodnoty v cyklu
• Indexování - Rychlý přístup k prvku podle pozice (indexu)

Představ si to jako: Police na knihy. Místo abys měl knihy rozhozené po pokoji, dáš je na polici. Každá kniha má své místo (index) a můžeš je snadno procházet zleva doprava (iterace).

Jak to funguje?

1. Pole ukládá prvky v pořadí
2. Každý prvek má index (číslování od 0!)
3. Index 0 = první prvek, index 1 = druhý prvek, atd.
4. Pole může obsahovat různé typy hodnot (čísla, texty, objekty)
5. Pole je dynamické - může růst nebo se zmenšovat

Klíčové koncepty

• Pole (Array) - datová struktura pro ukládání sekvence hodnot
• Index - pozice prvku v poli (začíná od 0!)
• Length - délka pole (počet prvků)
• Literal syntax [] - nejčastější způsob vytvoření pole
• Array constructor - alternativní způsob: new Array()
• Array.of() a Array.from() - pomocné metody pro vytváření polí

JavaScript

Příklad 1: Vytvoření pole - literal syntax (nejčastější)

const fruits = ['jablko', 'banán', 'třešeň'];
console.log(fruits);
// → ['jablko', 'banán', 'třešeň']

const numbers = [1, 2, 3, 4, 5];
console.log(numbers);
// → [1, 2, 3, 4, 5]

// Prázdné pole
const empty = [];
console.log(empty);
// → []

Co se stalo?

• Literal syntax [] - nejjednodušší způsob vytvoření pole
• Prvky oddělujeme čárkou
• Pole může obsahovat jakýkoli typ hodnot
• Prázdné pole [] neobsahuje žádné prvky

Příklad 2: Pole s různými typy (mixed array)

const mixed = [1, 'text', true, null, {name: 'Alice'}];
console.log(mixed);
// → [1, 'text', true, null, {name: 'Alice'}]

Co se stalo?

• JavaScript pole může obsahovat různé typy hodnot
• V jednom poli můžeš mít čísla, texty, boolean, objekty, i další pole!
• (Poznámka: V TypeScriptu se to nedoporučuje - lepší je typovat pole)

Příklad 3: Array constructor - new Array()

// Vytvoření prázdného pole s délkou 3
const arr1 = new Array(3);
console.log(arr1);
// → [empty × 3]  (3 prázdné sloty)
console.log(arr1.length);
// → 3

// Vytvoření pole s prvky
const arr2 = new Array(1, 2, 3);
console.log(arr2);
// → [1, 2, 3]

Co se stalo?

• new Array(3) - vytvoří pole s 3 prázdnými sloty (nikoliv 3× undefined!)
• new Array(1, 2, 3) - vytvoří pole [1, 2, 3]
• Pozor: new Array(5) vytvoří pole s 5 prázdnými sloty, ne [5]!
• Doporučení: Raději používej literal syntax []

Příklad 4: Array.of() - bezpečnější alternativa

const arr1 = Array.of(5);
console.log(arr1);
// → [5]  (pole s jedním prvkem)

const arr2 = Array.of(1, 2, 3);
console.log(arr2);
// → [1, 2, 3]

Co se stalo?

• Array.of(5) vytvoří [5], ne pole s 5 prázdnými sloty
• Řeší problém s new Array(number) - je předvídatelnější
• Méně často používaný, ale užitečný

Příklad 5: Array.from() - z iterable nebo array-like

// Z řetězce (string je iterable)
const chars = Array.from('ahoj');
console.log(chars);
// → ['a', 'h', 'o', 'j']

// Z NodeList (array-like objekt z DOM)
// const divs = Array.from(document.querySelectorAll('div'));

// S map funkcí
const doubled = Array.from([1, 2, 3], x => x * 2);
console.log(doubled);
// → [2, 4, 6]

Co se stalo?

• Array.from() převede iterable (string, Set, Map) nebo array-like objekt na pole
• Druhý argument je volitelná map funkce
• Užitečné pro převod DOM NodeList na normální pole

Příklad 6: Vnořená pole (multidimensional arrays)

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix);
// → [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

console.log(matrix[0]);
// → [1, 2, 3]

console.log(matrix[1][2]);
// → 6

Co se stalo?

• Pole může obsahovat další pole - vnořená pole (nested arrays)
• matrix[0] - první řádek matice
• matrix[1][2] - druhý řádek, třetí prvek (index 2)
• Užitečné pro matice, tabulky, herní plány

TypeScript

TypeScript přidává typové anotace pro pole - můžeš specifikovat, jaký typ hodnot pole obsahuje.

Stejné příklady s typy

// Pole stringů - dvě syntaxe
const fruits: string[] = ['jablko', 'banán', 'třešeň'];
const fruits2: Array<string> = ['jablko', 'banán', 'třešeň'];

// Pole čísel
const numbers: number[] = [1, 2, 3, 4, 5];

// Prázdné pole (TypeScript inferuje typ)
const empty: string[] = [];

// Mixed array - použij union type
const mixed: (number | string | boolean)[] = [1, 'text', true];

// Nebo any (nedoporučuje se)
const mixedAny: any[] = [1, 'text', true, {name: 'Alice'}];

// Array.of s typem
const arr: number[] = Array.of(1, 2, 3);

// Array.from s typem
const chars: string[] = Array.from('ahoj');
const doubled: number[] = Array.from([1, 2, 3], (x: number) => x * 2);

// Vnořená pole (2D pole)
const matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6]
];

// Readonly pole (nelze měnit)
const readonly: readonly number[] = [1, 2, 3];
// readonly.push(4); // ❌ Error!

// Tuple - pole s pevnou délkou a typy na pozicích
const tuple: [string, number] = ['Alice', 25];
const tuple2: [string, number, boolean] = ['Bob', 30, true];

TypeScript přidává:

• ✅ Typovou kontrolu - nemůžeš vložit špatný typ do pole
• ✅ Dvě syntaxe - T[] nebo Array (ekvivalentní)
• ✅ Readonly pole - readonly T[] brání změnám
• ✅ Tuple - pole s pevnými typy na pozicích
• ✅ IntelliSense - editor ti pomůže s metodami pole

Rozdíl JS vs TS

JavaScript:

• Pole může obsahovat jakékoli typy
• Žádná typová kontrola
• Můžeš omylem přidat špatný typ
• Flexibilnější, ale nebezpečnější

TypeScript:

• Pole má definovaný typ prvků
• TypeScript zkontroluje, že vkládáš správný typ
• Nemůžeš omylem přidat číslo do pole stringů
• Bezpečnější, lépe dokumentované

// JavaScript - projde, ale může způsobit problémy
const numbers = [1, 2, 3];
numbers.push('čtyři');  // OK v JS, ale problematické
console.log(numbers[3].toFixed(2));  // Runtime error!

// TypeScript - editor tě upozorní
const numbers: number[] = [1, 2, 3];
numbers.push('čtyři');  // ❌ Error: Argument of type 'string' is not assignable to parameter of type 'number'

Tip

💡 Preferuj literal syntax [] před new Array():

// ✅ Dobře - jasné a předvídatelné
const arr = [1, 2, 3];

// ❌ Matoucí - vytvoří pole s 5 prázdnými sloty
const arr = new Array(5);

// ⚠️ Pokud potřebuješ pole určité délky, použij Array.of nebo fill
const arr = Array.of(5);  // [5]
const arr = new Array(5).fill(0);  // [0, 0, 0, 0, 0]

💡 V TypeScriptu preferuj jednu syntaxi (buď T[] nebo Array):

// ✅ Dobře - konzistentní styl (kratší)
const numbers: number[] = [1, 2, 3];
const names: string[] = ['Alice', 'Bob'];

// ✅ Také dobře - konzistentní styl (explicitnější)
const numbers: Array<number> = [1, 2, 3];
const names: Array<string> = ['Alice', 'Bob'];

// ❌ Špatně - nekonzistentní
const numbers: number[] = [1, 2, 3];
const names: Array<string> = ['Alice', 'Bob'];

💡 Použij Array.from() pro převod iterable objektů:

// ✅ Dobře - převod string na pole
const chars = Array.from('hello');  // ['h', 'e', 'l', 'l', 'o']

// ✅ Dobře - převod Set na pole
const set = new Set([1, 2, 2, 3]);
const arr = Array.from(set);  // [1, 2, 3]

// ✅ Také dobře - spread operátor
const arr = [...set];  // [1, 2, 3]