2.7 For...of

Výuka

Problém s klasickým for

Když chceš projít pole, klasický for je zbytečně složitý:

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

// ❌ Klasický for - musíš spravovat index
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Musíš:

1. Vytvořit proměnnou i
2. Kontrolovat i < fruits.length
3. Inkrementovat i++
4. Přistupovat k prvku přes fruits[i]

for...of - elegantní řešení

// ✅ for...of - přímo hodnoty
for (const fruit of fruits) {
  console.log(fruit);
}

for...of iteruje přes hodnoty iterovatelných objektů:

• Pole (Array)
• Řetězce (String)
• Map, Set
• NodeList (DOM)
• Arguments
• Generátory

Syntaxe

for (const prvek of iterovatelnyObjekt) {
  // prvek je aktuální hodnota
}

JavaScript

// Pole
const colors = ["červená", "zelená", "modrá"];

for (const color of colors) {
  console.log(color);
}
// "červená", "zelená", "modrá"

// String - iteruje přes znaky
const word = "Ahoj";

for (const char of word) {
  console.log(char);
}
// "A", "h", "o", "j"

// Set - unikátní hodnoty
const uniqueNumbers = new Set([1, 2, 2, 3, 3, 3]);

for (const num of uniqueNumbers) {
  console.log(num);
}
// 1, 2, 3

// Map - klíč-hodnota páry
const userMap = new Map([
  ["name", "Jan"],
  ["age", 25],
  ["city", "Praha"]
]);

for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}
// "name: Jan", "age: 25", "city: Praha"

// Destructuring v for...of
const users = [
  { name: "Jan", age: 25 },
  { name: "Petra", age: 30 }
];

for (const { name, age } of users) {
  console.log(`${name} má ${age} let`);
}

// S entries() - když potřebuješ index
const fruits = ["jablko", "banán", "třešeň"];

for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}
// "0: jablko", "1: banán", "2: třešeň"

// NodeList (DOM)
const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", () => {
    console.log("Kliknuto!");
  });
}

// Arguments (zastaralé, ale stále funguje)
function sum() {
  let total = 0;
  for (const num of arguments) {
    total += num;
  }
  return total;
}

// let vs const v for...of
for (let item of items) {
  item = item.toUpperCase();  // Můžeš přepsat
  console.log(item);
}

for (const item of items) {
  // item = "něco";  // ❌ Error - const nelze přepsat
  console.log(item);  // ✅ Ale můžeš číst
}

TypeScript

// Typovaný for...of
const numbers: number[] = [1, 2, 3, 4, 5];

for (const num of numbers) {
  // num je automaticky number
  console.log(num * 2);
}

// String iterace
const greeting: string = "Ahoj";

for (const char of greeting) {
  // char je string (jeden znak)
  console.log(char.charCodeAt(0));
}

// Set s typy
const tags: Set<string> = new Set(["js", "ts", "react"]);

for (const tag of tags) {
  // tag je string
  console.log(tag.toUpperCase());
}

// Map s typy
const scores: Map<string, number> = new Map([
  ["Jan", 85],
  ["Petra", 92]
]);

for (const [name, score] of scores) {
  // name: string, score: number
  console.log(`${name}: ${score} bodů`);
}

// Pole objektů s interface
interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = [
  { id: 1, name: "Jan", email: "jan@email.cz" },
  { id: 2, name: "Petra", email: "petra@email.cz" }
];

for (const user of users) {
  // user je User - plný autocomplete
  console.log(user.name, user.email);
}

// Destructuring s typy
for (const { id, name } of users) {
  // id: number, name: string
  console.log(`#${id}: ${name}`);
}

// Generická funkce
function logAll<T>(items: Iterable<T>): void {
  for (const item of items) {
    console.log(item);
  }
}

logAll([1, 2, 3]);        // number[]
logAll(new Set(["a"]));   // Set<string>
logAll("hello");          // string

Rozdíl JS vs TS

const users = [{ name: "Jan" }, { name: "Petra" }];

for (const user of users) {
  console.log(user.name);    // ✅ TS ví, že user má name
  console.log(user.email);   // ❌ Error: Property 'email' does not exist
}

Tip

💡 for...of vs forEach:

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

// for...of - můžeš použít break/continue
for (const num of numbers) {
  if (num === 3) break;  // ✅ Funguje
  console.log(num);
}

// forEach - NEMŮŽEŠ použít break/continue
numbers.forEach(num => {
  if (num === 3) return;  // Přeskočí jen tuto iteraci
  console.log(num);
});

💡 Kdy potřebuješ index, použij entries():

for (const [i, item] of items.entries()) {
  console.log(`${i}: ${item}`);
}

// Nebo array metodu
items.forEach((item, i) => {
  console.log(`${i}: ${item}`);
});

💡 for...of NEFUNGUJE na obyčejných objektech:

const obj = { a: 1, b: 2 };

// ❌ Error: obj is not iterable
for (const value of obj) { }

// ✅ Použij Object.values/keys/entries
for (const value of Object.values(obj)) {
  console.log(value);
}

for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

💡 Používej const pokud nepřepisuješ proměnnou:

// ✅ Doporučeno - const je bezpečnější
for (const item of items) {
  console.log(item);
}

// let jen pokud potřebuješ přepsat
for (let item of items) {
  item = transform(item);
}