Příkaz `switch` v JavaScriptu představuje konstrukci pro řízení toku programu na základě splnění určité podmínky. Je to efektivní nástroj pro vytváření rozvětveného kódu s více variantami.
Tento článek slouží jako podrobný průvodce příkazem `switch`, jeho použitím a také srovnáním s dalšími podmíněnými strukturami, jako jsou příkazy `if` a ternární operátory, abyste pochopili, kdy je nejvhodnější který z nich použít.
Co je to příkaz `switch` v JavaScriptu?
Příkaz `switch` v JavaScriptu umožňuje rozhodnout, která část kódu se má provést, na základě hodnoty daného výrazu. Jedná se o jednu ze dvou základních konstrukcí pro podmíněné provádění kódu v JavaScriptu.
Druhou je příkaz `if`, a třetí ternární operátor. Příkaz `switch` funguje na podobném principu jako tyto dvě konstrukce, ale má své specifické vlastnosti, díky kterým je vhodný pro určité situace. V tomto článku se podíváme na všechny tyto aspekty detailně.
Jak používat příkaz `switch` v JavaScriptu
V následující části si detailně rozebereme strukturu příkazu `switch` a jeho použití. Budeme používat praktické příklady kódu, proto je vhodné mít k dispozici JavaScriptový kompilátor. Nejjednodušší možností je online JavaScriptový kompilátor. Můžete si také přečíst náš článek o nejlepších online JavaScript IDE.
Obecná syntaxe
Obecná syntaxe příkazu `switch` vypadá následovně:
switch(<výraz>) {
case <hodnota 1>:
<příkazy>
break;
case <hodnota 2>:
<příkazy>
break;
default:
<příkazy>
}
Klíčové slovo `switch` uvozuje začátek bloku příkazu `switch`. Do závorek se vkládá libovolný JavaScriptový výraz. Výraz může být cokoliv, co se vyhodnotí na nějakou hodnotu, například literál (řetězec nebo číslo), proměnná nebo výsledek volání funkce.
Dále následuje tělo příkazu `switch`, které je uzavřeno ve složených závorkách. Tělo se skládá z několika případů (`case`). Každý případ má přiřazenou hodnotu a sadu příkazů. Pokud se hodnota výrazu v závorkách shoduje s hodnotou daného případu, provedou se příkazy z tohoto případu.
V každém případu je možné použít klíčové slovo `break`. Jeho použití je volitelné. Pokud je `break` přítomno, po jeho vykonání se JavaScript vymaní z celého bloku `switch`. Pokud `break` chybí, JavaScript pokračuje v provádění i následujících případů. Tomuto se říká „propad“. Pokud nechcete využít mechanismus propadu, doporučujeme vždy používat klíčové slovo `break`.
Poslední klíčové slovo, které je důležité znát, je `default`. Tento případ se provede v případě, že se hodnota výrazu neshoduje s žádným z předchozích případů.
Příklady
V této části si ukážeme několik praktických příkladů použití příkazu `switch`.
#1. S propadem
Následující příklad ilustruje, jak funguje příkaz `switch` bez použití klíčového slova `break`, a ukazuje, co znamená „propad“.
V tomto příkladu vytvoříme kód, který zpracovává různé HTTP stavové kódy:
const statusCode = <vložte stavový kód zde>
switch (statusCode) {
case 200:
console.log('OK');
case 301:
console.log('Přesměrování');
case 403:
console.log('Zakázáno');
case 404:
console.log('Nenalezeno');
case 500:
console.log('Interní chyba serveru')
}
Ve výše uvedeném kódu kontrolujeme, zda se hodnota `statusCode` rovná určitému stavovému kódu, a následně vypíšeme zprávu popisující tento stavový kód.
Sledujte, co se stane, pokud nastavíme stavový kód na 403.
Po nalezení shody s případem 403, se provedou i všechny následující případy. Tomu se říká propad. To není vždy žádoucí, protože většinou chceme, aby se provedl pouze jeden případ. Právě proto je důležité používat klíčové slovo `break`, aby se zabránilo nežádoucímu propadu.
#2. Bez propadu
Abychom se vyhnuli chybám, přidáváme na konec každého případu klíčové slovo `break`. Následující příklad ukazuje, jak se chování kódu změní, když `break` použijeme.
const statusCode = <vložte stavový kód zde>
switch (statusCode) {
case 200:
console.log('OK');
break;
case 301:
console.log('Přesměrování');
break;
case 403:
console.log('Zakázáno');
break;
case 404:
console.log('Nenalezeno');
break;
case 500:
console.log('Interní chyba serveru')
break;
}
Když tento kód spustíte se stavovým kódem 403, dostanete tento výsledek.
Jak vidíte, kód se nyní shoduje pouze s jedním případem, a vyhnuli jsme se tak propadu.
#3. Užitečný propad
Je důležité si uvědomit, že v některých situacích může být propad užitečný. Představte si následující příklad, kde chceme zjistit, zda se uživatel pohybuje horizontálně nebo vertikálně na základě směrového vstupu.
const direction = '<vložte směr zde>'
switch(direction) {
case 'left':
case 'right':
console.log('horizontální pohyb');
break;
case 'up':
case 'down':
console.log('horizontální pohyb');
break;
}
Pokud nastavíte směr na „left“ a spustíte kód, výsledek je následující:
A když nastavíte směr na „right“, dostanete stejný výsledek:
Děje se tak proto, že pokud se shoda najde v případu „left“, automaticky se provede i kód v případu „right“ a vypíše se „horizontální pohyb“. Díky klíčovému slovu `break` se však už nepokračuje v dalších případech. Stejné chování nastane i pro případy „up“ a „down“.
Propad tedy umožňuje vytvářet v kódu logiku „NEBO“.
#4. Porovnávání rozsahů
Příkaz `switch` v JavaScriptu standardně kontroluje, zda se hodnota `case` přesně rovná hodnotě výrazu. Někdy ale potřebujeme zkontrolovat, zda se hodnota nachází v určitém rozmezí. V následujícím příkladu si ukážeme, jak tento problém vyřešit.
V tomto příkladu vytvoříme program, který vypíše známku na základě zadaného skóre. Pokud je například skóre větší než 90, program vypíše A+. Pokud je skóre větší než 80, ale menší než 90, vypíše A, a tak dále.
Abychom toho dosáhli, vložíme do závorek výraz `true`. Hodnota každého `case` je definována jako logická operace, která platí pouze tehdy, pokud se skóre nachází v příslušném rozsahu. Například hodnota posledního `case` `mark >= 90` bude pravdivá pouze v případě, že je skóre větší nebo rovno 90. Tím pádem se daný případ shoduje s hodnotou výrazu (tedy s `true`).
const mark = <nahraďte libovolným skóre>;
switch (true) {
case mark >= 50 && mark < 60:
console.log('D');
break;
case mark >= 60 && mark < 70:
console.log('C');
break;
case mark >= 70 && mark < 80:
console.log('B');
break;
case mark >= 80 && mark < 90:
console.log('A')
break;
case mark >= 90:
console.log('A+')
break;
default:
console.log('<50')
}
Výstup výše uvedeného kódu, když je skóre nastaveno na 80, je:
A když je skóre nastaveno na 95:
A když je skóre 45:
Lexikální rozsah
Příkazy uvnitř `case` v `switch` nemají vlastní lexikální rozsah. To znamená, že proměnné deklarované v jednom `case` jsou dostupné i v ostatních `case`. Je důležité si to uvědomit při psaní bloků `switch`, kde se může shodovat více případů. Následující příklad tento koncept ilustruje:
switch (true) {
case true:
let num = 10
case true:
console.log(num);
}
V tomto kódu se oba případy shodují. V prvním případě deklarujeme proměnnou `num`, ve druhém k ní přistupujeme. Nedochází k žádné chybě, jak můžete vidět na následujícím obrázku:
Rozdíl mezi příkazem `switch` a jinými podmíněnými konstrukcemi
Příkaz `switch` se hodí pro situace, kdy testujeme více podmínek. Příkaz `if` je vhodný pro situace, kdy potřebujeme testovat 2 nebo 3 podmínky. Ternární operátor je zase vhodný pouze pro případy, kdy chceme podmínku vyjádřit stručně na jednom řádku.
Pro stručnost kódu se doporučuje nejprve zkusit použít ternární operátor. Pokud není možné logiku vyjádřit ternárním operátorem, použijte příkaz `if`. Pokud ani ten není dostatečný, pak je vhodný příkaz `switch`.
Závěr
V tomto článku jsme podrobně probrali příkaz `switch`, jeho použití a specifické vlastnosti. Také jsme si řekli, kdy je nejvhodnější jej použít.
Pokud máte zájem o další zlepšování vašich dovedností v JavaScriptu, můžete se podívat na tyto užitečné tipy a triky pro JavaScript.