04.03 Push, pop, shift, unshift

Výuka

Proč Push, pop, shift, unshift?

Tyto metody slouží k přidávání a odstraňování prvků z pole. Jsou to základní operace pro práci s dynamickými kolekcemi dat.

Proč to potřebujeme?

• Přidání prvku - Vložit nový prvek na začátek nebo konec pole
• Odebrání prvku - Odstranit prvek ze začátku nebo konce
• Fronta (Queue) - push + shift = prvek dovnitř na konec, ven ze začátku
• Zásobník (Stack) - push + pop = prvek dovnitř na konec, ven z konce (LIFO)

Představ si to jako: Fronta lidí na zastávce. push přidá člověka na konec fronty, shift vyndá člověka ze začátku (ten, co čeká nejdéle). Nebo zásobník talířů - push přidá talíř navrch, pop odebere talíř z vrchu.

Jak to funguje?

1. push(...items) - přidá prvek(y) na KONEC pole, vrací novou délku (MUTUJE pole!)
2. pop() - odstraní poslední prvek, vrací ho (MUTUJE pole!)
3. shift() - odstraní první prvek, vrací ho (MUTUJE pole!)
4. unshift(...items) - přidá prvek(y) na ZAČÁTEK pole, vrací novou délku (MUTUJE pole!)
5. Všechny MĚNÍ původní pole (mutující metody)

Klíčové koncepty

• push() - přidá prvek(y) na konec, vrací novou length
• pop() - odstraní poslední prvek, vrací odstraněný prvek (nebo undefined)
• shift() - odstraní první prvek, vrací odstraněný prvek (nebo undefined)
• unshift() - přidá prvek(y) na začátek, vrací novou length
• Mutující metody - mění původní pole (na rozdíl od např. slice)
• Stack (LIFO) - Last In, First Out - použij push + pop
• Queue (FIFO) - First In, First Out - použij push + shift

JavaScript

Příklad 1: push() - přidání na konec

const fruits = ['jablko', 'banán'];
console.log(fruits);
// → ['jablko', 'banán']

// Přidej jeden prvek
const newLength = fruits.push('třešeň');
console.log(fruits);
// → ['jablko', 'banán', 'třešeň']
console.log(newLength);
// → 3 (nová délka pole)

// Přidej více prvků najednou
fruits.push('datle', 'hruška');
console.log(fruits);
// → ['jablko', 'banán', 'třešeň', 'datle', 'hruška']

Co se stalo?

• push() přidá prvek na konec pole
• Vrací novou délku pole (ne přidaný prvek!)
• Můžeš přidat více prvků najednou: push(a, b, c)
• MUTUJE původní pole - pole se změní!

Příklad 2: pop() - odebrání z konce

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

// Odeber poslední prvek
const last = numbers.pop();
console.log(last);
// → 5 (odebraný prvek)
console.log(numbers);
// → [1, 2, 3, 4] (pole se zkrátilo)

// Pop z prázdného pole
const empty = [];
const result = empty.pop();
console.log(result);
// → undefined (nic k odebrání)

Co se stalo?

• pop() odstraní a vrátí poslední prvek
• Pole se zkrátí o 1
• Pokud je pole prázdné, vrátí undefined
• MUTUJE původní pole

Příklad 3: shift() - odebrání ze začátku

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

// Odeber první prvek
const first = colors.shift();
console.log(first);
// → červená (odebraný prvek)
console.log(colors);
// → ['zelená', 'modrá', 'žlutá']

// Všechny prvky se posunou doleva
console.log(colors[0]);
// → zelená (byl na indexu 1, teď je na 0)

Co se stalo?

• shift() odstraní a vrátí první prvek
• Všechny ostatní prvky se posunou o index dolů (index 1 → 0, index 2 → 1, atd.)
• Pole se zkrátí o 1
• Pozor: shift() je pomalejší než pop() (musí přeindexovat prvky)

Příklad 4: unshift() - přidání na začátek

const animals = ['pes', 'kočka'];
console.log(animals);
// → ['pes', 'kočka']

// Přidej na začátek
const newLength = animals.unshift('myš');
console.log(animals);
// → ['myš', 'pes', 'kočka']
console.log(newLength);
// → 3

// Přidej více prvků najednou
animals.unshift('pták', 'ryba');
console.log(animals);
// → ['pták', 'ryba', 'myš', 'pes', 'kočka']

Co se stalo?

• unshift() přidá prvek(y) na začátek pole
• Všechny existující prvky se posunou o index nahoru
• Vrací novou délku pole
• Pozor: unshift() je pomalejší než push() (musí přeindexovat prvky)

Příklad 5: Stack (LIFO) - zásobník

// Zásobník - Last In, First Out
const stack = [];

// Přidávej prvky (push)
stack.push('první');
stack.push('druhý');
stack.push('třetí');
console.log(stack);
// → ['první', 'druhý', 'třetí']

// Odebírej prvky (pop) - v opačném pořadí
console.log(stack.pop());  // → třetí (poslední přidaný)
console.log(stack.pop());  // → druhý
console.log(stack.pop());  // → první
console.log(stack);
// → [] (prázdný zásobník)

Co se stalo?

• Stack = zásobník, pracuje jako talířová věž
• push přidá prvek navrch, pop odebere prvek z vrchu
• LIFO (Last In, First Out) - poslední přidaný vyjde jako první
• Užitečné pro: zpět/vpřed v prohlížeči, undo/redo, parsování závorek

Příklad 6: Queue (FIFO) - fronta

// Fronta - First In, First Out
const queue = [];

// Přidávej prvky na konec (push)
queue.push('Alice');
queue.push('Bob');
queue.push('Charlie');
console.log(queue);
// → ['Alice', 'Bob', 'Charlie']

// Odebírej prvky ze začátku (shift) - v pořadí přidání
console.log(queue.shift());  // → Alice (první přidaný)
console.log(queue.shift());  // → Bob
console.log(queue);
// → ['Charlie']

Co se stalo?

• Queue = fronta, jako fronta v obchodě
• push přidá na konec fronty, shift odebere ze začátku
• FIFO (First In, First Out) - první přidaný vyjde jako první
• Užitečné pro: zpracování úloh, event queue, buffering

TypeScript

TypeScript přidává typovou kontrolu - zkontroluje, že vkládáš prvky správného typu.

Stejné příklady s typy

// Push s typem
const fruits: string[] = ['jablko', 'banán'];
fruits.push('třešeň');  // ✅ OK - string
// fruits.push(123);  // ❌ Error: Argument of type 'number' is not assignable to parameter of type 'string'

const newLength: number = fruits.push('datle');  // vrací number

// Pop s typem
const numbers: number[] = [1, 2, 3, 4, 5];
const last: number | undefined = numbers.pop();  // pop vrací T | undefined
console.log(last);  // → 5

// Shift s typem
const colors: string[] = ['červená', 'zelená', 'modrá'];
const first: string | undefined = colors.shift();

// Unshift s typem
const animals: string[] = ['pes', 'kočka'];
animals.unshift('myš');  // ✅ OK
// animals.unshift(42);  // ❌ Error

// Stack s typem
const stack: number[] = [];
stack.push(1, 2, 3);
const top: number | undefined = stack.pop();

// Queue s typem
const queue: string[] = [];
queue.push('Alice', 'Bob');
const next: string | undefined = queue.shift();

// Readonly pole - nelze měnit
const readonly: readonly string[] = ['a', 'b', 'c'];
// readonly.push('d');  // ❌ Error: Property 'push' does not exist on type 'readonly string[]'
// readonly.pop();  // ❌ Error

TypeScript přidává:

• ✅ Typovou kontrolu prvků - nemůžeš vložit špatný typ
• ✅ Správné typy návratových hodnot - pop() a shift() vracejí T | undefined
• ✅ Readonly kontrolu - readonly T[] brání mutacím
• ✅ IntelliSense - editor ti napovídá metody a typy

Rozdíl JS vs TS

JavaScript:

• Metody fungují bez typové kontroly
• Můžeš omylem přidat špatný typ prvku
• Návratová hodnota není explicitně typovaná
• Flexibilnější, ale nebezpečnější

TypeScript:

• Metody jsou typově kontrolované
• Nemůžeš přidat prvek špatného typu
• pop() a shift() vracejí T | undefined
• Bezpečnější, lépe dokumentované

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

// 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

💡 push/pop jsou rychlejší než unshift/shift:

// ✅ Rychlé - pracuje s koncem pole (O(1))
arr.push(x);
arr.pop();

// ⚠️ Pomalejší - musí přeindexovat všechny prvky (O(n))
arr.unshift(x);  // posouvá všechny prvky doprava
arr.shift();     // posouvá všechny prvky doleva

// ✅ Pro velká pole preferuj push/pop

💡 Kontroluj prázdné pole před pop/shift:

const arr = [];

// ❌ Nekontroluje prázdné pole
const item = arr.pop();  // undefined
console.log(item.toUpperCase());  // Runtime error!

// ✅ Kontroluj před použitím
if (arr.length > 0) {
  const item = arr.pop();
  console.log(item);
} else {
  console.log('Pole je prázdné');
}

💡 Stack vs Queue - kdy použít co:

// ✅ Stack (LIFO) - použij push + pop
// Pro: undo/redo, zpět/vpřed navigace, parsování
const stack = [];
stack.push(1);
stack.push(2);
stack.pop();  // → 2 (poslední přidaný)

// ✅ Queue (FIFO) - použij push + shift
// Pro: zpracování úloh, event queue, buffering
const queue = [];
queue.push('task1');
queue.push('task2');
queue.shift();  // → task1 (první přidaný)