2.5 For cyklus

Výuka

Proč potřebujeme cykly?

Představ si, že chceš vypsat čísla od 1 do 100. Bez cyklů bys musel napsat 100 řádků:

console.log(1);
console.log(2);
console.log(3);
// ... 97 dalších řádků

Cykly (smyčky, loops) umožňují opakovat kód automaticky.

Anatomie for cyklu

for (inicializace; podmínka; aktualizace) {
  // tělo cyklu - opakuje se
}

3 části for cyklu:

1. Inicializace - provede se jednou na začátku (např. let i = 0)
2. Podmínka - kontroluje se před každou iterací (např. i < 10)
3. Aktualizace - provede se po každé iteraci (např. i++)

Jak to funguje krok po kroku?

for (let i = 0; i < 3; i++) {
  console.log(i);
}

JavaScript

// Základní for - čísla 0 až 4
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

// Počítání pozpátku
for (let i = 5; i > 0; i--) {
  console.log(i);
}
// 5, 4, 3, 2, 1

// Skok po dvou
for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
// 0, 2, 4, 6, 8, 10

// Iterace přes pole (starý způsob)
const fruits = ["jablko", "banán", "třešeň"];

for (let i = 0; i < fruits.length; i++) {
  console.log(`${i}: ${fruits[i]}`);
}
// "0: jablko", "1: banán", "2: třešeň"

// Vnořené cykly (tabulka násobení)
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} × ${j} = ${i * j}`);
  }
}

// Součet čísel 1 až 100
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log(sum);  // 5050

// For bez některých částí
let i = 0;
for (; i < 3; ) {
  console.log(i);
  i++;
}
// Funguje, ale while by byl čitelnější

// Nekonečný cyklus (POZOR!)
// for (;;) {
//   console.log("Navždy...");
// }

TypeScript

// Typovaný for cyklus
for (let i: number = 0; i < 5; i++) {
  console.log(i);
}

// Iterace přes pole s typy
const numbers: number[] = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  const num: number = numbers[i];
  console.log(num * 2);
}

// Funkce s for cyklem
function sumArray(arr: number[]): number {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

console.log(sumArray([1, 2, 3, 4, 5]));  // 15

// Generická funkce
function findIndex<T>(arr: T[], predicate: (item: T) => boolean): number {
  for (let i = 0; i < arr.length; i++) {
    if (predicate(arr[i])) {
      return i;
    }
  }
  return -1;
}

const index = findIndex([10, 20, 30], (n) => n > 15);
console.log(index);  // 1

// Type guard v cyklu
const mixed: (string | number)[] = ["a", 1, "b", 2];

for (let i = 0; i < mixed.length; i++) {
  const item = mixed[i];
  if (typeof item === "string") {
    console.log(item.toUpperCase());  // TS ví, že item je string
  } else {
    console.log(item.toFixed(2));     // TS ví, že item je number
  }
}

// Readonly pole
const readonlyNumbers: readonly number[] = [1, 2, 3];

for (let i = 0; i < readonlyNumbers.length; i++) {
  console.log(readonlyNumbers[i]);
  // readonlyNumbers[i] = 0;  // ❌ Error: readonly
}

Rozdíl JS vs TS

// S noUncheckedIndexedAccess v tsconfig
const arr: number[] = [1, 2, 3];

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];  // item: number | undefined
  if (item !== undefined) {
    console.log(item * 2);  // Teď je item: number
  }
}

Tip

💡 Pro pole radši použij for...of nebo array metody:

const fruits = ["jablko", "banán"];

// ❌ Starý způsob - více psaní, možnost chyby
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// ✅ Moderní způsob
for (const fruit of fruits) {
  console.log(fruit);
}

// ✅ Nebo array metody
fruits.forEach(fruit => console.log(fruit));

💡 Cachuj length ve výkonnostně kritickém kódu:

// ❌ length se volá každou iteraci
for (let i = 0; i < arr.length; i++) { }

// ✅ length se uloží jednou
for (let i = 0, len = arr.length; i < len; i++) { }
// (V moderních enginech už to není potřeba)

💡 Používej const pro konstantní proměnnou v těle:

for (let i = 0; i < items.length; i++) {
  const item = items[i];  // const - nemění se v iteraci
  // ...
}

💡 Pozor na nekonečné cykly:

// ❌ Nikdy neskončí!
for (let i = 0; i >= 0; i++) {
  console.log(i);  // i bude navždy >= 0
}

// ✅ Správná podmínka
for (let i = 0; i < 10; i++) {
  console.log(i);
}