Cykly: while a for

Často potřebujeme opakovat některé akce.

Například vypsat ze seznamu jedno zboží po druhém nebo jen vykonat stejný kód pro každé z čísel od 1 do 10.

Způsob, jak opakovat stejný kód několikrát, poskytují cykly neboli smyčky.

Cyklus „while“

Cyklus while má následující syntaxi:

while (podmínka) {
  // kód
  // tzv. „tělo cyklu“
}

Dokud je podmínka pravdivá, kód z těla cyklu se bude vykonávat.

Například tento cyklus vypisuje proměnnou i tak dlouho, dokud je i < 3:

let i = 0;
while (i < 3) { // zobrazí 0, pak 1, pak 2
  alert( i );
  i++;
}

Jedno vykonání těla cyklu se nazývá iterace. Cyklus ve výše uvedeném příkladu vykoná tři iterace.

Kdyby v tomto příkladu chyběl příkaz i++, cyklus by se vykonával (teoreticky) donekonečna. V praxi prohlížeče poskytují způsoby, jak takový cyklus zastavit, a v JavaScriptu na serverové straně můžeme proces zastavit („shodit“) sami.

Platnou podmínkou cyklu může být jakákoli proměnná nebo výraz, nejenom porovnání: příkaz while podmínku vyhodnotí a převede na typ boolean.

Například while (i != 0) se dá napsat kratším způsobem jako while (i):

let i = 3;
while (i) { // když i bude 0, podmínka bude nepravdivá a cyklus skončí
  alert( i );
  i--;
}

let i = 3;
while (i) alert(i--);

Cyklus „do…while“

Ověření podmínky můžeme přesunout až za tělo cyklu, použijeme-li syntaxi do..while:

do {
  // tělo cyklu
} while (podmínka);

Cyklus nejprve vykoná tělo, pak ověří podmínku, a dokud je pravdivá, bude vykonávat tělo znovu a znovu.

Příklad:

let i = 0;
do {
  alert( i );
  i++;
} while (i < 3);

Tuto formu syntaxe byste měli používat jen tehdy, když chcete, aby se tělo cyklu vykonalo vždy aspoň jednou, bez ohledu na pravdivost podmínky. Obvykle se dává přednost předchozí formě: while(…) {…}.

Cyklus „for“

Cyklus for je složitější, ale také nejčastěji používaný.

Vypadá takto:

for (začátek; podmínka; krok) {
  // ... tělo cyklu ...
}

Význam jednotlivých částí si objasníme na příkladu. Níže uvedený cyklus vykoná alert(i) pro i od 0 až do (ale ne včetně) 3:

for (let i = 0; i < 3; i++) { // zobrazí 0, pak 1, pak 2
  alert(i);
}

Prozkoumáme příkaz for po částech:

Všeobecný algoritmus cyklu funguje takto:

Vykonej začátek
→ (platí-li podmínka → vykonej tělo a vykonej krok)
→ (platí-li podmínka → vykonej tělo a vykonej krok)
→ (platí-li podmínka → vykonej tělo a vykonej krok)
→ ...

To znamená, že začátek se vykoná jednou a pak se iteruje: po každém testu podmínky se vykoná tělo a krok.

Jestliže s cykly teprve začínáte, pomůže vám vrátit se k příkladu a na papíře si krok po kroku projít, jak se vykoná.

V našem případě se stane přesně toto:

// for (let i = 0; i < 3; i++) alert(i)

// vykonej začátek
let i = 0
// platí-li podmínka → vykonej tělo a vykonej krok
if (i < 3) { alert(i); i++ }
// platí-li podmínka → vykonej tělo a vykonej krok
if (i < 3) { alert(i); i++ }
// platí-li podmínka → vykonej tělo a vykonej krok
if (i < 3) { alert(i); i++ }
// ...konec, protože nyní je i == 3

for (let i = 0; i < 3; i++) {
  alert(i); // 0, 1, 2
}
alert(i); // chyba, tato proměnná neexistuje

let i = 0;

for (i = 0; i < 3; i++) { // použijeme existující proměnnou
  alert(i); // 0, 1, 2
}

alert(i); // 3, je viditelná, protože byla deklarována mimo cyklus

Vynechávání částí

Kteroukoli část for můžeme vynechat.

Například můžeme vynechat začátek, jestliže nechceme na začátku cyklu nic provádět.

Například zde:

let i = 0; // už máme proměnnou i deklarovanou a přiřazenou

for (; i < 3; i++) { // nepotřebujeme „začátek“
  alert( i ); // 0, 1, 2
}

Můžeme vynechat i část krok:

let i = 0;

for (; i < 3;) {
  alert( i++ );
}

Pak bude cyklus stejný jako while (i < 3).

Ve skutečnosti můžeme vynechat všechno a vytvořit tím nekonečnou smyčku:

for (;;) {
  // opakuje se neustále
}

Všimněte si, že dva středníky ; ve for musejí být uvedeny, jinak nastane syntaktická chyba.

Opuštění smyčky

Za běžných okolností se cyklus ukončí, když jeho podmínka přestane být splněna.

Kdykoli si však můžeme ukončení vynutit použitím speciální direktivy break.

Například níže uvedený cyklus se uživatele ptá na sérii čísel, a když uživatel žádné číslo nezadá, cyklus skončí:

let součet = 0;

while (true) {

  let hodnota = +prompt("Zadejte číslo", '');

  if (!hodnota) break; // (*)

  součet += hodnota;

}
alert( 'Součet: ' + součet );

Direktiva break na řádku (*) se aktivuje, jestliže uživatel zadá prázdný řádek nebo zruší vstup. Okamžitě ukončí cyklus a předá řízení na první řádek za cyklem, konkrétně alert.

Kombinace „nekonečná smyčka + break, když je zapotřebí“ je výhodná v situacích, kdy potřebujeme podmínku cyklu ověřovat ne na začátku nebo na konci cyklu, ale uprostřed cyklu nebo dokonce na několika místech jeho těla.

Pokračování k další iteraci

Direktiva continue je „slabší verzí“ break. Nezastaví celý cyklus, ale zastaví jen právě probíhající iteraci a přinutí cyklus začít novou (jestliže podmínka platí).

Můžeme ji použít, když jsme hotovi s právě probíhající iterací a rádi bychom okamžitě přešli k další.

Níže uvedený cyklus využívá continue k vypsání jen lichých hodnot:

for (let i = 0; i < 10; i++) {

  // je-li podmínka pravdivá, přeskočíme zbytek těla
  if (i % 2 == 0) continue;

  alert(i); // 1, pak 3, 5, 7, 9
}

Pro sudé hodnoty i direktiva continue ukončí vykonávání těla a předá řízení další iteraci for (s dalším číslem). Proto se alert bude volat jedině pro liché hodnoty.

for (let i = 0; i < 10; i++) {

  if (i % 2) {
    alert( i );
  }

}

if (i > 5) {
  alert(i);
} else {
  continue;
}

(i > 5) ? alert(i) : continue; // continue tady nesmí být

Návěští pro break/continue

Někdy se potřebujeme dostat ven z několika vnořených cyklů najednou.

Například v níže uvedeném kódu vykonáváme cyklus nad i a j, který se ptá na hodnoty (i, j) od (0,0) do (2,2):

for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let vstup = prompt(`Hodnota na souřadnicích (${i},${j})`, '');

    // co když chceme vyskočit odtud až na „Hotovo“ níže?
  }
}

alert('Hotovo!');

Potřebujeme způsob, jak tento proces zastavit, jestliže uživatel zruší vstup.

Pouhé break po vstup by ukončilo jen vnitřní cyklus. To nám však nestačí. V takovém případě použijeme návěští.

Návěští je identifikátor s dvojtečkou před cyklem:

názevNávěští: for (...) {
  ...
}

Příkaz break <názevNávěští> v níže uvedeném cyklu vyskočí z uvedeného návěští:

vnější: for (let i = 0; i < 3; i++) {

  for (let j = 0; j < 3; j++) {

    let vstup = prompt(`Hodnota na souřadnicích (${i},${j})`, '');

    // je-li zadán prázdný řetězec nebo zrušen vstup, vyskočí se z obou cyklů
    if (!vstup) break vnější; // (*)

    // provedeme něco s hodnotou...
  }
}

alert('Hotovo!');

Ve výše uvedeném kódu break vnější najde návěští s názvem vnější a vyskočí z jeho cyklu.

Řízení se tedy předá přímo z (*) na alert('Hotovo!').

Můžeme návěští umístit i na samostatný řádek:

vnější:
for (let i = 0; i < 3; i++) { ... }

Návěští můžeme použít i v direktivě continue. V takovém případě se zbytek kódu přeskočí a další iterace bude v cyklu s uvedeným návěštím.

break návěští; // skok na návěští níže (nebude fungovat)

návěští: for (...)

návěští: {
  // ...
  break návěští; // toto funguje
  // ...
}

Shrnutí

Uvedli jsme tři druhy cyklů:

• while – Podmínka se ověří před každou iterací.
• do..while – Podmínka se ověří po každé iteraci.
• for (;;) – Podmínka se ověří před každou iterací, jsou možná i další nastavení.

K vytvoření „nekonečné“ smyčky se obvykle používá konstrukce while(true). Takovou smyčku lze zastavit direktivou break, stejně jako každou jinou.

Pokud nechceme už nic provádět v současné iteraci a chceme rovnou přejít k další, použijeme direktivu continue.

break/continue podporují návěští před cyklem. Návěští je jediný způsob, jak může break/continue ve vnořeném cyklu vyskočit z vnějšího cyklu.