Smyčky: for..of a for..in

Právě jsme se zabývali základními smyčkami v JavaScriptu nazvanými for a while. Zejména smyčka for je velmi flexibilní a lze ji použít pro prakticky jakýkoli případ použití. Nicméně, v novějších verzích JavaScriptu byly přidány dvě nové verze smyčky for: Smyčka for..of a smyčka for..in.

Smyčka for..of

Můžete použít smyčku for..of k iteraci přes jakýkoli typ iterovatelného objektu, a i když jsme toto konkrétní téma ještě neprobírali, jelikož je poměrně pokročilé, chci, abyste již nyní znali smyčku for..of - o iterovatelných objektech se můžeme vždy bavit později.

V tomto okamžiku stačí vědět, že existuje několik vestavěných objektů, které implementují funkcionalitu potřebnou pro fungování jako iterovatelný objekt. Objekt Array (pole) je nejzřejmějším příkladem, ale ve skutečnosti ho implementuje i objekt String (řetězec). O polích, objektech ani řetězcích jsme dosud podrobně nediskutovali, takže v tuto chvíli udržím příklady jednoduché a ilustrativní - k tomuto článku se můžete vždy vrátit, pokud budete chtít obnovit, jak tyto speciální smyčky for fungují.

Nejprve, abychom ilustrovali rozdíl mezi normální smyčkou for a specializovanou smyčkou for..of, takto bychom dříve procházeli pole:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let i = 0; i < fruits.length; i++)
	alert(fruits[i]);

Díky vlastnosti length pole víme, jak daleko můžeme jít, když chceme přistupovat ke každé položce pole. Tohle funguje úplně normálně a dříve by to rozhodně byl způsob, jakým byste procházeli pole.

Ale díky smyčce for..of můžeme proces značně zjednodušit. Podívejte se na tento příklad, který dělá totéž, ale s mnohem jednodušší syntaxí:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let fruit of fruits)
	alert(fruit);

Způsob, jakým to funguje, je velmi jednoduchý: Je deklarována proměnná nazvaná fruit (samozřejmě ji můžete nazvat jakkoli chcete) a při každé iteraci je tato proměnná aktualizována dalším prvkem pole. Jednoduché a efektivní!

A protože objekt String je také iterovatelný objekt, můžeme snadno iterovat i přes něj:

let text = "Hello!";
for(let c of text)
	console.log(c);
// Expected output:
/*
"H"
"e"
"l"
"l"
"o"
"!"
*/

Smyčka for..in

Máme smyčku for..of pro kolekce (jako jsou pole) a poté máme smyčku for..in pro objekty. Vzhledem k tomu, že objekty v JavaScriptu jsou v podstatě jen sbírkou klíčů a hodnot, můžeme iterovat přes vlastnosti, což může být velmi užitečné. O objektech se později v tomto tutoriálu budeme bavit mnohem více, ale prozatím si jen prohlédněte tento příklad, jak funguje smyčka for..in:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop);
}

// Expected output:
// "name"
// "age"

Jak vidíte, vypadá a chová se velmi podobně jako smyčka for..of, ale v tomto případě získáváme na každé iteraci název vlastnosti. Pokud chceme, můžeme samozřejmě tento název použít k získání skutečné hodnoty vlastnosti, takto:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop + " = " + obj[prop]);
}

// Expected output:
// "name = John Doe"
// "age = 42"

Jak vidíte, je to jak snadné, tak i dosti mocné, a jakmile začnete pracovat s objekty, rychle smyčku for..in. oceníte.

Řízení smyčky: break a continue

Někdy se ocitnete v 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.

let text = "Hello!";
for(let c of text)
{
	if(c == "l")
		continue;
	if(c == "!")
		continue;
	alert(c);
}
// Expected output:
// "H"
// "e"
// "o"

V tomto příkladu používáme jak break, tak continue. Procházíme řetězec "Hello!" a když narazíme na "l", použijeme continue (přeskočíme aktuální iteraci a pokračujeme na další), a pokud narazíme na "!", použijeme break (přeskočíme aktuální iteraci a ukončíme smyčku). Pokud nenarazíme na žádný break nebo continue, výstupem bude aktuální znak, což znamená, že písmena "H", "e" a "o" budou odeslána na výstup.

Shrnutí

Smyčky for..of a for..in jsou příjemným a nedávným přídavkem do jazyka JavaScript, který usnadňuje zejména procházení polí a objektů. Neposkytují žádnou přímou výhodu oproti používání dobrých, starých smyček for a while, kromě toho, že jsou rychleji napsatelné a mohou způsobit, že váš kód vypadá méně složitě.

Jak bylo zmíněno, pole a objekty nebyly v tomto tutoriálu ještě probrány, ale dozvíte se o nich více v nadcházejících kapitolách, takže mějte na paměti naše dvě specializované smyčky, až začnete pracovat s těmito typy.