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 😲!
Zacznijmy od postaci składniowej!
JAK UTWORZYĆ INSTRUKCJĘ "SWITCH" W JĘZYKU JAVASCRIPT?
Oto postać instrukcji "switch" w języku JavaScript 👇:
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.
Mamy następne słowo kluczowe, "case"!!!
CZYM JEST "CASE" W INSTRUKCJI "SWITCH" W JĘZYKU JAVASCRIPT?
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, aby podnieść czytelność i niejako podkreślić "przynależność" tychże instrukcji do warunku (bo ono nie jest obowiązkowe 👍).
Kiedy skończysz definiować blok instrukcji, musisz dodać na sam koniec istotny drobiazg 🧨.
JAK DZIAŁA "BREAK" W INSTRUKCJI "SWITCH" W JĘZYKU JAVASCRIPT?
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ć.
Na samym końcu możesz ujrzeć jeszcze jedno słowo kluczowe: "default".
CZYM JEST SŁOWO "DEFAULT" W INSTRUKCJI "SWITCH" W JĘZYKU JAVASCRIPT?
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
}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 🤯!!!
JAKIE SĄ WADY INSTRUKCJI "SWITCH" W JĘZYKU JAVASCRIPT?
2 wady jakie dotyczą instrukcji "switch" w języku JavaScript, to 👇:
- ograniczenie się do porównywania jedynie konkretnych wartości,
- brak powiadomienia o zapomnieniu wstawienia słowa "break" dla bloku "case".
Weźmy teraz przybliżmy sobie szczegóły 🔍!
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"...
Teraz o wiele gorsza rzecz 😥.
UWAŻAJ NA SŁOWO "BREAK"!!!
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!