04.04 Slice a splice

Výuka

Proč Slice a splice?

slice a splice jsou dvě zcela odlišné metody, které začátečníci často pletou. Jedna kopíruje část pole (nemění originál), druhá mění originál (přidává/odstraňuje prvky).

Proč to potřebujeme?

• slice - Vytvoř kopii části pole (jako copy-paste)
• splice - Odstraň, nahraď nebo vlož prvky do pole (jako cut-paste)
• Immutability - slice zachovává původní pole (bezpečnější)
• Modifikace - splice mění pole na místě (efektivnější, ale riskantnější)

Představ si to jako: slice je jako fotokopírka - vybereš stránky 3-7 a uděláš jejich kopii, originál zůstává netknutý. splice je jako nůžky a lepidlo - vystřihneš stránky, případně tam něco nového vlepíš - originál se změní!

Jak to funguje?

slice(start, end):
1. Vytvoří NOVÉ pole (shallow copy)
2. Kopíruje prvky od indexu start do end (end EXKLUZIVNÍ!)
3. NEMĚNÍ původní pole
4. Záporné indexy: -1 = poslední prvek, -2 = předposlední, atd.

splice(start, deleteCount, ...items):
1. MĚNÍ původní pole (mutuje!)
2. Odstraní deleteCount prvků od indexu start
3. Vloží nové prvky na pozici start
4. Vrací pole odstraněných prvků

Klíčové koncepty

• slice(start, end) - vrací nové pole (kopie), NEMĚNÍ originál
• splice(start, deleteCount, ...items) - MĚNÍ originál, vrací odstraněné prvky
• Immutability - slice je immutabilní (bezpečné pro React state)
• Mutation - splice mutuje pole (nebezpečné v určitých kontextech)
• Shallow copy - slice kopíruje jen reference (pozor u objektů!)
• End index je exkluzivní - slice(1, 3) bere indexy 1 a 2 (ne 3!)

JavaScript

Příklad 1: slice() - kopie části pole

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

// Vezmi prvky od indexu 1 do 3 (3 exkluzivní!)
const part = fruits.slice(1, 3);
console.log(part);
// → ['banán', 'třešeň']

// Původní pole zůstalo netknuté
console.log(fruits);
// → ['jablko', 'banán', 'třešeň', 'datle', 'hruška']

Co se stalo?

• slice(1, 3) bere prvky na indexech 1 a 2 (ne 3!)
• End index je exkluzivní - prvek na indexu 3 se nebere
• Vrací nové pole, originál se nemění
• To je klíčový rozdíl od splice!

Příklad 2: slice() - záporné indexy a kopie celého pole

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

// Poslední 2 prvky (od indexu -2 do konce)
const last2 = numbers.slice(-2);
console.log(last2);
// → [4, 5]

// Od začátku do předposledního (end -1 je exkluzivní)
const exceptLast = numbers.slice(0, -1);
console.log(exceptLast);
// → [1, 2, 3, 4]

// Kopie celého pole
const copy = numbers.slice();
console.log(copy);
// → [1, 2, 3, 4, 5] (nové pole, stejné hodnoty)
console.log(copy === numbers);
// → false (různé objekty!)

Co se stalo?

• Záporné indexy: -1 = poslední prvek, -2 = předposlední, atd.
• slice(-2) - od předposledního do konce
• slice(0, -1) - od začátku až k poslednímu (ne včetně)
• slice() bez parametrů = kopie celého pole (užitečné!)

Příklad 3: splice() - odstranění prvků

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

// Odstraň 2 prvky od indexu 1
const removed = colors.splice(1, 2);
console.log(removed);
// → ['zelená', 'modrá'] (odstraněné prvky)

// Původní pole se ZMĚNILO!
console.log(colors);
// → ['červená', 'žlutá', 'fialová']

Co se stalo?

• splice(1, 2) - od indexu 1 odstraň 2 prvky
• Vrací pole odstraněných prvků
• MUTUJE původní pole - colors se změnilo!
• To je klíčový rozdíl od slice!

Příklad 4: splice() - vložení prvků

const arr = ['a', 'b', 'e'];
console.log(arr);
// → ['a', 'b', 'e']

// Na index 2, odstraň 0 prvků, vlož 'c' a 'd'
arr.splice(2, 0, 'c', 'd');
console.log(arr);
// → ['a', 'b', 'c', 'd', 'e']

Co se stalo?

• splice(2, 0, 'c', 'd'):
  • 2 = index, kam vložit
  • 0 = kolik prvků odstranit (žádné!)
  • 'c', 'd' = co vložit
• Vložení BEZ odstranění - deleteCount = 0
• Původní pole se změnilo

Příklad 5: splice() - nahrazení prvků

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

// Od indexu 1 odstraň 2 prvky a nahraď je jinými
const removed = items.splice(1, 2, 'pomeranč', 'hruška', 'kiwi');
console.log(removed);
// → ['banán', 'třešeň'] (odstraněné)

console.log(items);
// → ['jablko', 'pomeranč', 'hruška', 'kiwi', 'datle']

Co se stalo?

• splice(1, 2, 'pomeranč', 'hruška', 'kiwi'):
  • Odstraň 2 prvky od indexu 1
  • Vlož 3 nové prvky
• Můžeš vložit jiný počet prvků, než kolik odstraníš
• Pole se přizpůsobí (zvětší/zmenší)

Příklad 6: Porovnání slice vs splice

// SLICE - neměnný
const arr1 = [1, 2, 3, 4, 5];
const sliced = arr1.slice(1, 3);
console.log(sliced);      // → [2, 3] (nové pole)
console.log(arr1);        // → [1, 2, 3, 4, 5] (NEZMĚNĚNO!)

// SPLICE - měnný
const arr2 = [1, 2, 3, 4, 5];
const spliced = arr2.splice(1, 2);
console.log(spliced);     // → [2, 3] (odstraněné)
console.log(arr2);        // → [1, 4, 5] (ZMĚNĚNO!)

// Pamětná pomůcka:
// slice = "skrojek" - vezmeš kousek, zbytek necháš
// splice = "slepování" - lepíš dohromady, měníš originál

Co se stalo?

• slice - vytvoří nové pole, originál netknutý
• splice - změní originál, vrátí odstraněné
• Nikdy je nespleť! Jména jsou podobná, ale chování opačné

TypeScript

TypeScript přidává typovou kontrolu - zkontroluje typy prvků při vkládání a návratových hodnot.

Stejné příklady s typy

// Slice s typy
const fruits: string[] = ['jablko', 'banán', 'třešeň', 'datle'];
const part: string[] = fruits.slice(1, 3);  // → ['banán', 'třešeň']

// Záporné indexy
const numbers: number[] = [1, 2, 3, 4, 5];
const last2: number[] = numbers.slice(-2);  // → [4, 5]

// Kopie celého pole
const copy: number[] = numbers.slice();

// Splice s typy
const colors: string[] = ['červená', 'zelená', 'modrá'];
const removed: string[] = colors.splice(1, 1);  // → ['zelená']

// Splice s vložením - typ kontrola!
const arr: string[] = ['a', 'b', 'e'];
arr.splice(2, 0, 'c', 'd');  // ✅ OK - stringy
// arr.splice(2, 0, 123);  // ❌ Error: Argument of type 'number' is not assignable to parameter of type 'string'

// Readonly pole - nelze použít splice (ale slice ano!)
const readonly: readonly string[] = ['a', 'b', 'c'];
const slicedReadonly: readonly string[] = readonly.slice(1);  // ✅ OK
// readonly.splice(1, 1);  // ❌ Error: Property 'splice' does not exist on type 'readonly string[]'

// Generické funkce s slice
function getFirst3<T>(arr: T[]): T[] {
  return arr.slice(0, 3);
}

const first3Numbers: number[] = getFirst3([1, 2, 3, 4, 5]);  // [1, 2, 3]
const first3Strings: string[] = getFirst3(['a', 'b', 'c', 'd']);  // ['a', 'b', 'c']

TypeScript přidává:

• ✅ Typovou kontrolu vkládaných prvků - nemůžeš vložit špatný typ do splice
• ✅ Správný typ návratové hodnoty - slice i splice vracejí T[]
• ✅ Readonly kontrolu - readonly pole nepodporuje splice (mutující!)
• ✅ Generické funkce - můžeš psát typově bezpečné utility funkce

Rozdíl JS vs TS

JavaScript:

• Metody fungují bez typové kontroly
• Můžeš omylem vložit špatný typ do splice
• Žádná ochrana před mutacemi
• Flexibilnější, ale nebezpečnější

TypeScript:

• Typová kontrola prvků při vkládání
• readonly pole brání použití splice
• Lépe dokumentované záměry (immutabilní vs mutabilní)
• Bezpečnější, prevence chyb

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

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

Tip

💡 NIKDY nespleť slice a splice:

// ✅ SLICE - kopíruje, NEMĚNÍ originál
const copy = arr.slice(1, 3);  // Nové pole

// ✅ SPLICE - MĚNÍ originál
arr.splice(1, 2);  // arr je změněné!

// Mnemonic:
// slice = "krájet" - ukrojíš kousek, zbytek zůstává
// splice = "sešívat" - přešíváš, měníš originál

💡 Používej slice pro immutability (React, Redux):

// ❌ Špatně - mutace state v Reactu
const newState = state;
newState.splice(0, 1);
setState(newState);  // React nepozná změnu!

// ✅ Dobře - vytvoř novou kopii
const newState = state.slice();
newState.splice(0, 1);
setState(newState);

// ✅ Ještě lepší - použij jen slice
const newState = state.slice(1);  // Bez mutace
setState(newState);

💡 slice() bez parametrů = shallow copy celého pole:

// ✅ Rychlá kopie pole
const original = [1, 2, 3, 4, 5];
const copy = original.slice();  // Nové pole

// ⚠️ Ale pozor - shallow copy!
const arr = [{name: 'Alice'}, {name: 'Bob'}];
const copy = arr.slice();
copy[0].name = 'Charlie';  // Mění i originál!
console.log(arr[0].name);  // → Charlie (reference je sdílená!)

// ✅ Pro deep copy použij jiné metody
const deepCopy = JSON.parse(JSON.stringify(arr));  // Deep copy