04.14 Destructuring polí

Výuka

Proč Destructuring?

Destructuring (destrukturalizace) je moderní syntaxe pro rozbalení hodnot z pole do samostatných proměnných. Místo přístupu k prvkům pomocí indexů můžeš hodnoty "vytáhnout" přímo.

Proč to potřebujeme?

• Čitelnost - Místo arr[0], arr[1] použiješ pojmenované proměnné
• Kratší kód - Jedna řádka místo několika přiřazení
• Swap hodnot - Prohoď proměnné bez pomocné proměnné
• Extrakce dat - Vytáhni hodnoty z návratové hodnoty funkce

Představ si to jako: Rozbalení dárků. Místo "vezmi první dárek z krabice" říkáš "tohle je hračka, tohle kniha, tohle čokoláda" - přiřadíš jména přímo při rozbalování.

Jak to funguje?

Destructuring syntaxe:
const [a, b, c] = pole;

1. Levá strana = vzor (pattern) s názvy proměnných
2. Pravá strana = pole
3. Hodnoty z pole se přiřadí do proměnných podle POŘADÍ
4. a = pole[0], b = pole[1], c = pole[2]

Klíčové koncepty

• Destructuring - rozbalení hodnot z pole do proměnných
• Pattern matching - vzor na levé straně odpovídá struktuře pole
• Pořadí záleží - přiřazuje se podle pozice, ne podle názvu
• Default values - můžeš zadat výchozí hodnoty
• Rest element ... - zbytek prvků do pole
• Swap - prohození proměnných bez pomocné proměnné

JavaScript

Příklad 1: Základní destructuring

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

// Klasický způsob
const first = fruits[0];
const second = fruits[1];
console.log(first, second);
// → jablko banán

// S destructuring
const [a, b, c] = fruits;
console.log(a);  // → jablko
console.log(b);  // → banán
console.log(c);  // → třešeň

Co se stalo?

• [a, b, c] = fruits - vytvoř proměnné a, b, c
• a dostane fruits[0], b dostane fruits[1], c dostane fruits[2]
• Kratší a čitelnější než const a = fruits[0]

Příklad 2: Přeskočení prvků

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

// Vezmi první a třetí (přeskoč druhý)
const [first, , third] = numbers;
console.log(first);  // → 1
console.log(third);  // → 3

// Vezmi jen první a čtvrtý
const [a, , , d] = numbers;
console.log(a, d);
// → 1 4

// Ignoruj všechny kromě posledního - NEFUNGUJE DOBŘE
// Lepší: použij slice
const last = numbers[numbers.length - 1];  // → 5

Co se stalo?

• Prázdné místo , , - přeskočí prvek
• Můžeš vybrat jen některé prvky
• Pro poslední prvek lepší arr[arr.length - 1] nebo arr.at(-1)

Příklad 3: Default values (výchozí hodnoty)

const arr = [1, 2];

// Bez default hodnoty - undefined
const [a, b, c] = arr;
console.log(c);
// → undefined (pole má jen 2 prvky)

// S default hodnotou
const [x, y, z = 0] = arr;
console.log(z);
// → 0 (použije se default hodnota)

// Default hodnota se použije JEN pokud prvek je undefined
const arr2 = [1, 2, null];
const [p, q, r = 0] = arr2;
console.log(r);
// → null (ne 0! null !== undefined)

Co se stalo?

• Default hodnota: z = 0
• Použije se jen když prvek je undefined
• null, 0, '' jsou validní hodnoty - default se NEPOUŽIJE

Příklad 4: Rest element (...rest)

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

// Vezmi první dva, zbytek do pole
const [first, second, ...rest] = numbers;
console.log(first);   // → 1
console.log(second);  // → 2
console.log(rest);    // → [3, 4, 5] (zbytek jako pole)

// Vezmi první, zbytek ignoruj
const [head] = numbers;
console.log(head);
// → 1

// Ignoruj první, vezmi zbytek
const [, ...tail] = numbers;
console.log(tail);
// → [2, 3, 4, 5]

// Rest musí být POSLEDNÍ
// const [...all, last] = numbers;  // ❌ Syntax Error!

Co se stalo?

• Rest element ...rest - zbývající prvky do nového pole
• Musí být poslední (jinak syntax error)
• Užitečné pro "první a zbytek"

Příklad 5: Swap (prohození) proměnných

let a = 1;
let b = 2;

// Klasický swap (s pomocnou proměnnou)
let temp = a;
a = b;
b = temp;
console.log(a, b);
// → 2 1

// S destructuring - bez pomocné proměnné!
a = 1;
b = 2;
[a, b] = [b, a];
console.log(a, b);
// → 2 1

// Můžeš prohodit i více hodnot
let x = 1, y = 2, z = 3;
[x, y, z] = [z, x, y];
console.log(x, y, z);
// → 3 1 2

Co se stalo?

• [a, b] = [b, a] - vytvoř pole [2, 1] a rozbal do a, b
• Bez pomocné proměnné!
• Elegantní a čitelné

Příklad 6: Destructuring návratové hodnoty funkce

function getCoordinates() {
  return [50.0755, 14.4378];  // Praha souřadnice
}

// Bez destructuring
const coords = getCoordinates();
const lat = coords[0];
const lng = coords[1];

// S destructuring - v jedné řádce!
const [latitude, longitude] = getCoordinates();
console.log(latitude);   // → 50.0755
console.log(longitude);  // → 14.4378

// Praktický příklad - split
const fullName = 'Jan Novák';
const [firstName, lastName] = fullName.split(' ');
console.log(firstName);  // → Jan
console.log(lastName);   // → Novák

// Regex match
const match = /(\d+)-(\d+)/.exec('100-200');
if (match) {
  const [, first, second] = match;  // Přeskoč match[0] (celý match)
  console.log(first, second);       // → 100 200
}

Co se stalo?

• Destructuring funguje skvěle s funkcemi vracejícími pole
• split(), match(), exec() - všechny vracejí pole
• Čitelnější názvy než result[0], result[1]

TypeScript

TypeScript přidává typovou kontrolu destructuringu.

Stejné příklady s typy

// Destructuring s typy
const fruits: string[] = ['jablko', 'banán'];
const [first, second]: [string, string] = fruits as [string, string];

// TypeScript inferuje typy
const numbers: number[] = [1, 2, 3];
const [a, b, c] = numbers;  // a, b, c jsou number

// Default hodnoty s typy
const [x, y, z = 0]: number[] = [1, 2];
// z má typ number (z default hodnoty)

// Rest element s typy
const [head, ...tail]: number[] = [1, 2, 3, 4];
// head: number, tail: number[]

// Tuple destructuring (přesné typy na pozicích)
const tuple: [string, number] = ['Alice', 25];
const [name, age] = tuple;
// name: string, age: number (TypeScript ví!)

// Funkce vracející tuple
function getUser(): [string, number] {
  return ['Bob', 30];
}

const [userName, userAge] = getUser();
// userName: string, userAge: number

// Chybová kontrola - špatný počet prvků
const pair: [number, number] = [1, 2];
// const [a, b, c] = pair;  // ⚠️ c bude undefined (ale bez erroru)

// Lepší s tuple
const [a2, b2]: [number, number] = pair;  // ✅ Přesně 2 prvky

TypeScript přidává:

• ✅ Inference typů - TypeScript pozná typ prvků
• ✅ Tuple typy - přesné typy na konkrétních pozicích
• ✅ Kontrolu default hodnot - musí odpovídat typu
• ✅ Prevenci chyb - upozorní na problém už při kompilaci

Rozdíl JS vs TS

JavaScript:

• Destructuring funguje bez typové kontroly
• Můžeš omylem přiřadit špatný počet proměnných
• Flexibilnější, ale nebezpečnější

TypeScript:

• Destructuring má typovou kontrolu
• Tuple typy zajistí správný počet a typy prvků
• Bezpečnější, prevence chyb

// JavaScript - projde, ale c je undefined
const arr = [1, 2];
const [a, b, c] = arr;
console.log(c * 2);  // NaN!

// TypeScript - upozorní
const arr: [number, number] = [1, 2];
const [a, b]: [number, number] = arr;  // ✅ OK
// const [a, b, c]: [number, number, number] = arr;  // ❌ Error: Type has only 2 elements

Tip

💡 Používej destructuring pro lepší čitelnost:

// ❌ Špatně - indexy jsou nečitelné
function processPoint(point) {
  const x = point[0];
  const y = point[1];
  return x * 2 + y * 2;
}

// ✅ Dobře - pojmenované proměnné
function processPoint([x, y]) {
  return x * 2 + y * 2;
}

💡 Rest pro "první a zbytek" pattern:

const [first, ...rest] = array;
console.log('První:', first);
console.log('Zbytek:', rest);

// Praktické použití
function sum([head, ...tail]) {
  if (head === undefined) return 0;
  return head + sum(tail);
}

💡 Swap bez pomocné proměnné:

// ❌ Starý způsob
let temp = a;
a = b;
b = temp;

// ✅ Moderní způsob
[a, b] = [b, a];

// Rotace více hodnot
[a, b, c] = [c, a, b];