To na czym się skupię w dzisiejszym materiale o języku JavaScript, nawiązuje do artykułu o instrukcjach warunkowych i jest ono całkowicie opcjonalne. Nie będzie się wymagało od Ciebie koniecznie wiedzy na ten temat, aczkolwiek jest to coś, co w niektórych sytuacjach sprawi, że kod stanie się piękniejszy ❤️. Chodzi mi o instrukcję wielokrotnego wyboru, a rozpoznasz ją po słowie "switch" w języku JavaScript ✨!
"SWITCH" W JĘZYKU JAVASCRIPT WCALE NICZEGO NIE PRZEŁĄCZA
Nie sugeruj się angielskim w tym przypadku tak dosłownie 😄! Chodzi o zdefiniowanie wielu ścieżek, którymi program może podążyć w zależności od warunku 💡. Czy nie dotyczy do instrukcji warunkowych? Prawda, aczkolwiek pisze się inaczej i zachowuje się nieco inaczej 😲!
ANALIZA SKŁADNI
Zacznijmy od postaci składniowej 👇:
switch ([zmienna]) {
case A:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa A
break;
case B:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa B
break;
default:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] posiada inną wartość niż A oraz B
break;
}Mamy tu dużo szczegółów niepokazywanych w żadnej z poprzednich części, więc wszystko powolutku wytłumaczę wiersz po wierszu.
Pierwszą rzeczą jaką zawsze dajemy, to jest słowo kluczowe "switch" w języku JavaScript. Zaraz po nim, wprowadzamy parę nawiasów okrągłych, a wewnątrz nich umieszczamy uwaga…samą nazwę zmiennej! Nie warunek, jak to było przy instrukcji "if". SAMĄ ZMIENNĄ 🚨!
Następnie otwieramy klamerki, a wewnątrz nich definiujemy ścieżki razem z blokami instrukcji.
SŁOWO "CASE"
Mamy następne słowo kluczowe, "case"!!! To jest "otwarcie" nowego bloku instrukcji dla określonej sytuacji i to TUTAJ umieszczamy warunek tylko...jest to ograniczone 😳. O tym już za chwilę, a na razie popatrzmy na to, co się dzieje dalej.
Po słowie "case" wstawiamy stałą wartość, tak samo jakbyśmy porównywali wartość zmiennej do jakiejś stałej (np. czy zmienna "kilogramy" jest równa 54), a zaraz po niej ląduje dwukropek ℹ️!
case A:Pamiętaj o nim bowiem pominięcie go, zostanie potraktowane jako błąd składniowy ⛔.
Po dwukropku, od nowego wiersza wprowadzasz instrukcje jakie się mają wykonać w przypadku, gdy wartość podanej zmiennej w "switch" będzie taka sama, jak stała wartość podana po "case" ⚠️. Najlepiej sobie zrobić dodatkowe wcięcie, żeby podnieść czytelność i niejako podkreślić "przynależność" tychże instrukcji do warunku (bo ono nie jest obowiązkowe 👍).
SŁOWO "BREAK"
Kiedy skończysz definiować blok instrukcji, musisz dodać na sam koniec istotny drobiazg 🧨. Słowo kluczowe "break", które działa jak kropka w zdaniu:
breakSamo słowo "break" ma kilka znaczeń, a jednym z nich jest ustalenie granicy dla instrukcji w przypadku spełnienia określonego "przypadku" (trzymając się hasła "case").
Niech dopisywanie tego słowa wejdzie Ci w krew ASAP 🚨🚨🚨!!! O tym, dlaczego to jest cholernie ważne, piszę w dalszej części artykułu 👇!
W przypadku zażyczenia sobie zdefiniowania więcej takich bloków instrukcji, zaczynamy tak samo:
- słowo kluczowe "case",
- wartość stała,
- dwukropek,
- blok instrukcji z wcięciem,
- słowo kluczowe "break",
- powtórzyć.
SŁOWO "DEFAULT"
Na samym końcu możesz ujrzeć jeszcze jedno słowo kluczowe: "default". Nic strasznego, to jest po prostu odpowiednik słowa "else" w instrukcji warunkowej. Jeżeli wszystkie przypadki zawodzą, wtedy "odzywa się" to i wykonuje wszystko zawarte wewnątrz bloku ze słowem "default" 👍.
Dla tych, którzy potrzebują porównania z zapisem tradycyjnym, tak wyglądałby odpowiednik instrukcji "if", kropka w kropkę 👇:
if([zmienna] === A) {
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa A
} else if([zmienna] === B) {
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa B
} else {
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] posiada inną wartość niż A oraz B
}BĘDĘ SZCZERY, SĄ DWA "ALE"!
Zanim pozmieniasz wszystkie "if-else" na "switch" w języku JavaScript, muszę Cię uświadomić i ostrzec ⚠️! Instrukcja wielokrotnego wyboru nie składa się wyłącznie z zalety "ładniejszego wyglądania w kodzie" 😮.
Poza falą nowych niespotykanych dotąd słówek kluczowych i składni mogącej sprawić ogromne trudności początkującym, posiada też w sobie pewne ograniczenie oraz perfidną pułapkę, która może spowodować mnóstwo zmarnowanych godzin i kilkaset wyrwanych włosów z głowy 🤯!!! Weźmy na razie tę lżejszą część na klatę.
1. TYLKO SAME PORÓWNANIA!
Instrukcja "switch" dopuści tylko te bloki "case", które sprawdzają konkretną wartość. Innymi słowy, wolno Ci umieścić tylko wartość stałą!
Na przykład postać:
6 > 3
będzie już błędem składniowym ⛔! Zatem ze sprawdzaniem jakichś przedziałów czy wartość znajduje się w zakresie od A do B, musisz się pożegnać 😢. Wtedy trzeba wrócić do instrukcji "if"...
2. UWAŻAJ NA SŁOWO "BREAK"!!!
Teraz o wiele gorsza rzecz. Jak sprawdziłem, instrukcja "switch" w języku JavaScript jest taka sama, jak w języku C i niestety ma w sobie tę samą pułapkę, na którą sam się dałem nabrać wielokrotnie, jak się uczyłem programowania lata temu.
Przypuśćmy, że wyleci Ci z głowy wstawienie słowa "break" przed kolejnym blokiem "case" 👇:
case 1:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa 1
case 2:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] jest równa 2
default:
// instrukcje wykonywane wtedy i tylko wtedy, gdy [zmienna] nie jest równa ani 1, ani 2Zdajesz sobie sprawę co to spowoduje 🤔? "Kaskadowe" wykonywanie kolejnych bloków jak leci, dopóki program nie natrafi na pierwsze słowo "break" albo koniec instrukcji "switch" 😱! Oznacza to, że w przypadku, gdy jakaś zmienna będzie posiadała wartość 1, to wykona się pierwszy blok "case"...a zaraz po nim wykona się też drugi ("case 2:") i wykona się cały blok "default", bo przed nim także nie ma słowa "break" 💥!!!
Dlatego to jest takie ważne. "break" traktuj jako taki znak STOP 🛑 dla przepływu działania programu mówiący: "granica instrukcji leży tu i dalej nie idziesz!" ✋.
Jak wspomniałem, jest to perfidne, bo instrukcja "switch" w języku JavaScript wcale Cię nie uprzedzi ⛔! W żaden sposób, bo nie jest to błąd w rozumieniu błędu składniowego, tylko bardziej błąd semantyczny (błąd polegający na działaniu programu odmiennym od zaplanowanego np. program miał policzyć pole trójkąta prostokątnego, a obliczył przeciwprostokątną ℹ️).
Można zatem sobie śmieszkować, że jeżeli nie umieścisz słowa "break", to kod "złamie" Ciebie 💔.
 |
Instrukcja wielokrotnego wyboru tworzona jest w języku JavaScript za pomocą słowa kluczowego "switch". Potrafi uwydatnić wygląd kodu kosztem wstawiania przedziałów liczbowych w warunku.
Zostałeś(-aś) uprzedzony(-a) na temat zapisu, składni, ograniczeń i konsekwencji z tym związanych ✔️. Właśnie dlatego, że ma to swoje wady i tę pułapkę, uznaję to za wiedzę opcjonalną do opanowania. To może pomóc, jednak jeżeli jesteś nieostrożny(-a), to tylko sobie zaszkodzisz!