Smyčky: for a while

Právě jsme se dozvěděli o příkazech if, které jsou velmi důležitou součástí programovacího jazyka. Téměř stejně důležité jsou smyčky: schopnost opakovat stejný blok kódu vícekrát s možností přímého ovládání počtu iterací.

V JavaScriptu existují v současné době dva typy struktur smyček: smyčka "for" a smyčka "while". Obě existují v několika variantách a v tomto článku se podrobněji podíváme na to, jak fungují a jak je můžete používat.

Smyčka while

Nejjednodušším typem smyčky pro začátek je smyčka while. Má velmi jednoduchou syntaxi:

while(somethingIsTrue) 
{
	DoStuff();
}

Takže dokud je podmínka v závorkách vyhodnocena jako pravdivá, následující blok kódu se opakuje znovu a znovu. To vyžaduje, abyste v opakovaném bloku provedli něco, co interpretu umožní opustit smyčku - jinak jste vytvořili takzvanou nekonečnou smyčku, která zabrání dokončení vašeho kódu!

Příklad použití smyčky while v reálném životě by mohl vypadat takto:

let counter = 1;
while(counter <= 10)
{
	document.write(counter);
	counter = counter + 1;
}

Bude běžet tak dlouho, dokud proměnná "counter" nebude větší než 10. Pro každou iteraci vypíšeme číslo a zvýšíme proměnnou "counter". Zejména ten poslední krok je důležitý, protože bez něj by "counter" nikdy nebyl větší než 10 a smyčka by běžela nekonečně. Také, jak uvidíme později, smyčka "for" je ve skutečnosti lepší volbou pro úkol jako tento, ale potřeboval jsem jednoduchý, přímý příklad, aby bylo možné ilustrovat, jak smyčka while funguje.

Varianta do..while

S běžnou smyčkou while, jak je vidět v předchozím příkladu, je podmínka vyhodnocena před vstupem do smyčky. To znamená, že do ní možná nikdy nevstoupíme - pokud podmínka nikdy není pravdivá, následující blok kódu se nikdy nevykoná. Pokud si to chcete ověřit sami, jednoduše změňte počáteční hodnotu proměnné "counter" v předchozím příkladu na 11 a znovu ho spusťte!

Varianta smyčky do..while oproti smyčce while obrací věci naruby - namísto vyhodnocení podmínky před spuštěním kódu, vyhodnocení proběhne po provedení kódu smyčky. To zaručí alespoň jednu iteraci, což může být v některých scénářích užitečné. Zde je příklad - všimněte si, jak byla část while přesunuta, jasně ukazující pořadí, ve kterém jsou věci prováděny:

let counter = 11;
do
{
	document.write(counter);
	counter = counter + 1;
} while(counter <= 10);

V tomto příkladu jsem změnil smyčku while na smyčku do..while a poté změnil počáteční hodnotu proměnné počítadla na 11. Kdyby to byla běžná smyčka while, kód uvnitř by se nikdy nespustil, ale protože je to smyčka do..while, podmínka, o které jsme zajistili, že bude vyhodnocena jako nepravdivá, je vyhodnocena po první iteraci, čímž zaručuje alespoň jedno provedení.

Smyčka for

Skvělou alternativou k smyčce while je smyčka for. Vypadá trochu složitěji, ale to je proto, že je flexibilnější a proto se také používá častěji. Smyčka for funguje tak, že deklaruje počítadlo, poté podmínku pro toto počítadlo a poté krok pro počítadlo (zvýšení nebo snížení) při každé iteraci, vše specifikované v jednom řádku - to je důvod, proč to vypadá složitě. Dovolte mi to ilustrovat na příkladu:

for(let counter = 1; counter <= 10; counter = counter + 1)
	document.write(counter);

Zde děláme v podstatě to samé, co jsme dělali s první smyčkou while: Počítáme od 1 do 10. Ale jak vidíte, vyžaduje to méně kódu, protože mechanismus počítadla je v podstatě zabudován do smyčky for. Na prvním řádku instruujeme interpreter, aby provedl následující, přičemž každý příkaz je oddělen středníkem:

• Deklarujeme proměnnou nazvanou counter a přiřadíme jí hodnotu 1.
• Určujeme, že tato smyčka musí běžet, dokud proměnná počítadlo nebude menší nebo rovna 10.
• Určujeme, že při každé iteraci by měla být proměnná počítadlo zvýšena o jedna.

V tomto příkladu jsem záměrně rozvláčný, používám dlouhý název proměnné a nevyužívám operátor inkrementace (o tom později). Příklad blíže reálnému použití by vypadal takto:

for(let i = 1; i <= 10; i++)
	document.write(i);

Je skvělé, kolik toho můžeme dokázat s tak malým množstvím kódu, že?

Všimněte si, že tento příklad smyčky for je velmi podobný naší předchozí smyčce while. To je také proto, že smyčka for není vykonávána přesně v takovém pořadí, jak by kód mohl naznačovat. Mohli byste očekávat, že všechny tři části prvního řádku jsou provedeny nejprve a poté vlastní kód smyčky, ale není tomu tak. Místo toho je smyčka for zpracovávána takto:

1. Proměnná je deklarována
2. Podmínka je ověřena, což znamená, že pokud podmínka na první pokus selže, žádné iterace se nikdy neuskuteční.
3. Pokud podmínka uspěje, kód smyčky (v tomto případě náš document.write()) se provede.
4. Krok (i++), poslední část smyčky, se provede.

To může na první pohled vypadat trochu matoucí, ale nebojte se, zvyknete si!

Varianty smyčky for

Na závěr konkrétně o smyčce for chci ukázat, že je ještě více přizpůsobitelná, než byste možná očekávali: Můžete vynechat části smyčky (všechny části, ve skutečnosti, ale to by vedlo k nekonečné smyčce), a máte úplnou kontrolu nad částí kroku, což znamená, že ji můžete zvýšit nebo snížit o 1 nebo jakékoli jiné kladné číslo při každé iteraci. Zde je příklad:

let counter = 2;
	
for(; counter <= 10;)
{
	document.write(counter);
	counter = counter + 2;
}

Vím, že to může vypadat divně, ale dovolte mi, abych vás tím provedl:

• Ve smyčce for není deklarována žádná proměnná - děláme to před smyčkou. Smyčka for však vyžaduje 3 části, takže jednoduše umístíme středník, aby bylo naznačeno, že není třeba deklarovat proměnnou smyčky.
• Podmínka je stejná jako předtím.
• Ale vynecháme také část kroku.
• Namísto toho přímo pracujeme s proměnnou počítadla uvnitř smyčky, zvyšujeme ji o 2 místo o 1 při každé iteraci.

Výsledkem je seznam sudých čísel od 2 do 10. To hlavně ukazuje na flexibilitu smyčky for - pravděpodobně ji nebudete používat tolik ve srovnání s běžnější verzí, kterou jsem vám ukázal jako první.

Řízení smyčky: break a continue

Někdy se ocitnete ve situaci, kdy potřebujete převzít další kontrolu nad smyčkou, zatímco už v ní jste. JavaScript přichází se dvěma klíčovými slovy, která se (téměř) výhradně používají pro smyčky: break a continue. Pojďme se podívat, co pro vás mohou udělat.

continue

Klíčové slovo continue lze použít uvnitř smyčky k instrukci interpreteru, aby přeskočil zbytek kódu uvnitř smyčky a přešel na další iteraci. Obvykle je to výsledkem nějaké interní kontroly uvnitř smyčky. Zde je jednoduchý příklad, který vám ukáže, jak to funguje:

for(let counter = 1; counter <= 10; counter++)
{
	if(counter % 2 != 0)
		continue;
	document.write(counter);	
}

V podstatě počítáme od 1 do 10, ale uvnitř smyčky kontrolujeme, zda je počítadlo sudé číslo (pomocí operátoru % (zbytek po dělení) - o tom později), a pokud není, přeskočíme na další iteraci pomocí klíčového slova continue. To nám umožňuje vytisknout pouze sudá čísla, a i když tento příklad sám o sobě není strašně užitečný, brzy se ocitnete v situaci, kde je schopnost vrátit se na začátek smyčky a přejít na další iteraci velmi užitečná. Ale co když chcete smyčku úplně opustit?

break

Abychom smyčku předčasně úplně opustili, máme klíčové slovo break. To okamžitě ukončí smyčku a poté přejde na další řádky za smyčkou. Zde je příklad:

for(let counter = 1; counter <= 10; counter++)
{
	document.write(counter);
	if(counter >= 5)
		break;
}
document.write("Five is enough...");

Opět počítáme od 1 do 10, ale uvnitř smyčky se náhle rozhodneme, že chceme počítat jen do 5, takže jakmile tohoto čísla dosáhneme, smyčku opustíme a pokračujeme dál.

A samozřejmě, jak `continue`, tak `break` lze použít i ve smyčce `while`, dokonce i v kombinaci - zde je příklad, který to dokazuje:

let counter = 0;
while(counter <= 20)
{
	counter = counter + 1;
	
	if(counter % 2 != 0)
		continue;
	document.write(counter);
	if(counter >= 10)
		break;
	
}
document.write("Ten is enough...");

Rychlé shrnutí: Počítáme od 0 do 20, ale pokud čítač není sudý, přeskočíme na další iteraci, a jakmile čítač dosáhne 10, smyčku ukončíme. To vše jen proto, abychom vám ukázali kombinaci klíčových slov continue a break uvnitř smyčky while.

Shrnutí

Smyčky vám umožňují opakovat stejný kód vícekrát, ale s různými výsledky, jak jsme viděli na příkladech v tomto článku. Zda použijete smyčku while nebo for, opravdu závisí na situaci, ve které se nacházíte, ale v mnoha případech jsou obě použitelné a to, zda použijete jednu nebo druhou, někdy závisí na osobním vkusu.