04.08 Find a findIndex

Výuka

Proč Find a findIndex?

find() a findIndex() slouží k vyhledávání prvku v poli podle podmínky. find() vrací prvek samotný, findIndex() vrací jeho index.

Proč to potřebujeme?

• Hledání prvku - Najdi první uživatel s daným jménem
• Ověření existence - Existuje v poli prvek splňující podmínku?
• Pozice prvku - Na jakém indexu je prvek?
• Komplexní podmínky - indexOf funguje jen s primitivy, find s objekty

Představ si to jako: Hledání knih v knihovně. find() ti dá knihu samotnou ("Tady je ta kniha o JavaScriptu"). findIndex() ti řekne, kde je ("Je na police 5, pozice 12").

Jak to funguje?

find(predicate):
1. Volá predikát pro každý prvek (zleva doprava)
2. Vrátí PRVNÍ prvek, kde predikát vrátil true
3. Pokud nic nenajde, vrátí undefined
4. Zastaví se po prvním nálezu (neprochází celé pole)

findIndex(predicate):
1. Volá predikát pro každý prvek (zleva doprava)
2. Vrátí INDEX prvního prvku, kde predikát vrátil true
3. Pokud nic nenajde, vrátí -1
4. Zastaví se po prvním nálezu

Klíčové koncepty

• find(predicate) - vrací první prvek splňující podmínku (nebo undefined)
• findIndex(predicate) - vrací index prvního prvku (nebo -1)
• Predikát - funkce: (element, index, array) => boolean
• Zastaví se po nálezu - efektivnější než filter (neprochází celé pole)
• undefined vs -1 - find vrací undefined, findIndex vrací -1 při nenalezení
• Složité podmínky - funguje s objekty, na rozdíl od indexOf

JavaScript

Příklad 1: find() - najdi první sudé číslo

const numbers = [1, 3, 5, 8, 10, 12];

const firstEven = numbers.find(function(num) {
  return num % 2 === 0;
});

console.log(firstEven);
// → 8 (první sudé číslo)

// Pokud nic nenajde
const numbers2 = [1, 3, 5, 7];
const notFound = numbers2.find(num => num % 2 === 0);
console.log(notFound);
// → undefined (žádné sudé číslo)

Co se stalo?

• find() prochází pole zleva doprava
• Zastaví se, když predikát vrátí true
• Vrátí prvek samotný (8, ne index!)
• Pokud nic nenajde, vrátí undefined

Příklad 2: findIndex() - najdi index prvního sudého čísla

const numbers = [1, 3, 5, 8, 10, 12];

const index = numbers.findIndex(num => num % 2 === 0);
console.log(index);
// → 3 (8 je na indexu 3)

console.log(numbers[index]);
// → 8 (můžeš použít index k získání prvku)

// Pokud nic nenajde
const numbers2 = [1, 3, 5, 7];
const notFound = numbers2.findIndex(num => num % 2 === 0);
console.log(notFound);
// → -1 (nenalezeno)

Co se stalo?

• findIndex() vrací index prvního vyhovujícího prvku
• Pokud nic nenajde, vrátí -1 (stejně jako indexOf)
• Můžeš použít index k přístupu k prvku: numbers[index]

Příklad 3: Hledání v poli objektů

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

// Najdi uživatele s id 2
const user = users.find(u => u.id === 2);
console.log(user);
// → { id: 2, name: 'Bob', age: 30 }

// Najdi index uživatele jménem Charlie
const index = users.findIndex(u => u.name === 'Charlie');
console.log(index);
// → 2

// Ověř, zda existuje uživatel starší než 40
const over40 = users.find(u => u.age > 40);
console.log(over40);
// → undefined (žádný uživatel nesplňuje podmínku)

Co se stalo?

• find funguje skvěle s objekty (na rozdíl od indexOf)
• Můžeš hledat podle libovolné vlastnosti: id, name, age
• Vrací celý objekt (nebo undefined)

Příklad 4: Porovnání find vs filter

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

// find - vrátí PRVNÍ sudé číslo
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven);
// → 2

// filter - vrátí VŠECHNA sudá čísla
const allEven = numbers.filter(n => n % 2 === 0);
console.log(allEven);
// → [2, 4, 6]

Co se stalo?

• find - najde první vyhovující prvek a zastaví se
• filter - najde všechny vyhovující prvky
• find je rychlejší, pokud potřebuješ jen první prvek

Příklad 5: find s indexem a polem (všechny parametry)

const arr = ['a', 'b', 'c', 'd', 'e'];

// Najdi prvek na sudém indexu
const result = arr.find((element, index, array) => {
  console.log(`Checking ${element} at index ${index}`);
  return index % 2 === 0;
});

// → Checking a at index 0
// → (zastaví se - index 0 je sudý)

console.log(result);
// → a

Co se stalo?

• Predikát má 3 parametry:
  1. element - aktuální prvek
  2. index - index prvku
  3. array - celé pole (zřídka se používá)
• find se zastaví po prvním nálezu (neprochází celé pole)

Příklad 6: indexOf vs findIndex

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

// indexOf - hledá přesnou shodu
const index1 = numbers.indexOf(30);
console.log(index1);
// → 2

// findIndex - hledá podle podmínky
const index2 = numbers.findIndex(n => n > 25);
console.log(index2);
// → 2 (první číslo > 25 je 30 na indexu 2)

// indexOf s objekty - NEFUNGUJE
const users = [{ name: 'Alice' }, { name: 'Bob' }];
const index3 = users.indexOf({ name: 'Bob' });
console.log(index3);
// → -1 (nenašlo - porovnává reference, ne obsah!)

// findIndex s objekty - FUNGUJE
const index4 = users.findIndex(u => u.name === 'Bob');
console.log(index4);
// → 1 (našlo podle vlastnosti)

Co se stalo?

• indexOf - hledá přesnou shodu (pomocí ===)
• findIndex - hledá podle podmínky (flexibilnější)
• indexOf nefunguje s objekty (porovnává reference)
• findIndex funguje (porovnává vlastnosti)

TypeScript

TypeScript přidává typovou kontrolu predikátu a type guards pro zúžení typu.

Stejné příklady s typy

// find s typy
const numbers: number[] = [1, 3, 5, 8, 10];
const firstEven: number | undefined = numbers.find(num => num % 2 === 0);

// TypeScript ví, že výsledek může být undefined
if (firstEven !== undefined) {
  console.log(firstEven * 2);  // ✅ OK - ověřeno, že není undefined
}

// findIndex vrací number (ale může být -1!)
const index: number = numbers.findIndex(num => num % 2 === 0);

// Hledání v poli objektů
interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];

const user: User | undefined = users.find(u => u.id === 2);

// Type guard - zúžení typu
type Item = { type: 'food'; name: string } | { type: 'tool'; name: string };
const items: Item[] = [
  { type: 'food', name: 'apple' },
  { type: 'tool', name: 'hammer' }
];

function isFood(item: Item): item is { type: 'food'; name: string } {
  return item.type === 'food';
}

const food = items.find(isFood);  // food má zúžený typ!

// Generická utility funkce
function findById<T extends { id: number }>(arr: T[], id: number): T | undefined {
  return arr.find(item => item.id === id);
}

const foundUser = findById(users, 2);  // User | undefined

TypeScript přidává:

• ✅ Správný návratový typ - T | undefined pro find, number pro findIndex
• ✅ Type guards - zúží typ výsledku
• ✅ IntelliSense - editor ti napovídá vlastnosti
• ✅ Prevenci chyb - musíš ověřit undefined před použitím

Rozdíl JS vs TS

JavaScript:

• find/findIndex fungují bez typové kontroly
• Můžeš zapomenout ověřit undefined
• Žádná type safety
• Flexibilnější, ale nebezpečnější

TypeScript:

• Návratový typ je T | undefined
• TypeScript tě upozorní, pokud neověříš undefined
• Type guards zužují typ
• Bezpečnější, prevence runtime chyb

// JavaScript - může způsobit runtime error
const users = [{ name: 'Alice' }];
const user = users.find(u => u.name === 'Bob');
console.log(user.name);  // Runtime error! user je undefined

// TypeScript - upozorní tě
const users: User[] = [{ name: 'Alice' }];
const user: User | undefined = users.find(u => u.name === 'Bob');
console.log(user.name);  // ❌ Error: Object is possibly 'undefined'

// Musíš ověřit
if (user) {
  console.log(user.name);  // ✅ OK
}

Tip

💡 Vždy ověřuj undefined před použitím find:

const user = users.find(u => u.id === 123);

// ❌ Nebezpečné - user může být undefined
console.log(user.name);  // Runtime error!

// ✅ Bezpečné - ověř nejdřív
if (user) {
  console.log(user.name);
} else {
  console.log('Uživatel nenalezen');
}

// ✅ Nebo použij optional chaining (ES2020+)
console.log(user?.name);  // undefined pokud user není

💡 find vs findIndex - kdy použít co:

// ✅ Používej find, pokud potřebuješ prvek
const user = users.find(u => u.id === 2);
console.log(user.name);

// ✅ Používej findIndex, pokud potřebuješ index
const index = users.findIndex(u => u.id === 2);
users[index] = newUser;  // Nahraď prvek

// ✅ Používej findIndex pro ověření existence
const exists = users.findIndex(u => u.id === 2) !== -1;

💡 find je efektivnější než filter pro jeden prvek:

// ❌ Neefektivní - filter prochází celé pole
const user = users.filter(u => u.id === 2)[0];  // Projde všechny prvky!

// ✅ Efektivní - find se zastaví po nálezu
const user = users.find(u => u.id === 2);  // Zastaví se po nálezu