Przechodzimy do kolejnego ważnego tematu! W języku JavaScript możesz znaleźć taką konstrukcję co się zwie "instrukcja warunkowa" ℹ️. Ona umożliwia programowanie wielu ścieżek przebiegu programu. To nie jest nic strasznego, jednak gorąco zachęcam do przestudiowania całego materiału, a następnie samodzielnego poćwiczenia sobie konstruowania różnych warunków, aby to weszło w krew 🔥. To jest ABSOLUTNY fundament, żeby zaprogramować cokolwiek sensownego i ciekawszego od wypisywania komunikatów na konsolę. Jesteś gotowy(-a) 🙂?
INSTRUKCJA WARUNKOWA W JĘZYKU JAVASCRIPT ZWIE SIĘ "IF"
Głównym słowem kluczowym jakie będzie rozprzestrzenione po całym artykule jest "if". "if" (czyli "jeżeli") służy do budowania różnych ścieżek jakimi może "pójść" interpreter i móc wykonać przypisane do danej ścieżki instrukcje. Pozwolę zostawić odnośnik do artykułu, w którym tłumaczone są instrukcje warunkowe bardziej ogólnie 🔔.
PRZYKŁAD PISANY ABSTRAKCYJNIE
Opiszmy to sobie teoretycznie. Musisz wybrać się do sklepu, aby zrobić zakupy na obiad. Od domu do sklepu jest jakieś 20 minut piechotą. Na szczęście dysponujesz samochodem, którym możesz szybciej dojechać do celu ⏩. I teraz pojawia się pytanie mające wpływ na dalszy ciąg ⚠️. Czy dysponujesz prawem jazdy?
Jeżeli tak, to wsiadasz do samochodu i jedziesz na zakupy 🚗. Jeżeli odpowiedź brzmi "nie", to trzeba iść z buta 🥾. W pseudokodzie wyglądałoby to tak (pseudokod to "słowny" zapis działania algorytmu lub przebiegu programu omijający dowolne konstrukcje programistyczne):
Pytanie: Czy posiadam prawo jazdy?
- TAK
- wsiądź do samochodu i pojedź do sklepu,
- zrób zakupy,
- zapakuj zakupy do bagażnika,
- wróć do domu.
- NIE
- idź do sklepu na piechotę,
- zrób zakupy,
- wróć do domu i przytargaj samemu torby z zakupami.
Widzisz to rozgałęzienie zdarzeń 🌳? Tym się zajmuje instrukcja warunkowa w języku JavaScript 💡! Kiedy zależy nam na tym, aby w pewnym miejscu aplikacja musiała wybrać którą drogą podążyć, programujemy warunek, który będzie ostatecznie wpływał na decyzję i ciąg wykonywanych instrukcji ☑️.
O TYM SAMYM, TYLKO NIECO PROGRAMISTYCZNIE
To teraz przestawiamy się na kod 🙂. Pierwsze co piszemy to słowo "if". Potem umieszczamy parę nawiasów okrągłych, a wewnątrz nich warunek, wykorzystując operatory relacyjne. Może to być koniunkcja, alternatywa albo pojedynczy warunek 👇:
if([warunek]) {
// instrukcje wykonywane wtedy i tylko wtedy, gdy warunek jest spełniony (wartość "true")
}Dostosowując się do tego szablonu, przykład może wyglądać następująco:
let rating = 4;
if(rating >= 3) {
console.log("Przedmiot zaliczony!");
}To jest zaprogramowanie instrukcji do wykonania, jeśli dojdzie do spełnienia określonego warunku. W tym przypadku sprawdzamy ocenę jaką otrzymano z przedmiotu i jeżeli stopień jest co najmniej dostateczny, to wyświetli się w konsoli tekst o zaliczeniu ✅.
Możemy potrzebować zrobić jak na przykładzie na samej górze, że mamy DWIE ścieżki i chcemy, aby coś się wykonało w stylu "albo, albo". W tym celu musimy napisać kod, który będzie uwzględniał możliwość pójścia jedną z dwóch ścieżek. Korzystamy wtedy ze słowa "else" (ang. w przeciwnym razie) 👇:
let rating = 4;
if(rating >= 3) {
console.log("Przedmiot zaliczony!");
} else {
console.log("Przedmiot niezaliczony...");
}Efekt? Wykonanie jednego z dwóch bloków instrukcji w zależności od postawionego warunku i jego wyniku. Jeżeli ocena z przedmiotu jest przynajmniej 3 (co w naszym przykładzie jest prawdziwe), to zostanie wykonany blok instrukcji dla przypadku zaliczenia przedmiotu ✅. W przeciwnym razie, jeśli ocena nie jest satysfakcjonująca i warunek zwróci wartość fałszywą, to program przejdzie do bloku instrukcji po słowie kluczowym "else", czyli do przypadku niezaliczenia przedmiotu ❌. Na tym to polega!
To nie koniec atrakcji 😊. Poznaj kombinację słów "else if" odpowiadających za zdefiniowanego osobnego warunku w sytuacji, gdy pierwszy "polegnie" 👇:
let rating = 3;
if(rating > 3) {
console.log("Przedmiot zaliczony doskonale!");
} else if(rating == 3) {
console.log("Przedmiot zaliczony!");
} else {
console.log("Przedmiot niezaliczony...");
}Musisz wiedzieć, że instrukcja warunkowa w języku JavaScript jest weryfikowana blok po bloku "schodząc" z góry na dół, dopóki nie natrafi na spełniony warunek albo na słowo "else", jeśli zostało zdefiniowane (jeżeli nie, nic się nie wykona) 👁️. To oznacza, że najpierw zawsze sprawdzany jest warunek po słowie kluczowym "if".
W naszym przypadku zostanie najpierw sprawdzone czy przedmiot zaliczono na ocenę wyższą niż 3. To jest fałsz, więc ten blok nie zostanie wykonany ❌. Natomiast jest reszta bloków do sprawdzenia! Zatem, program przejdzie do następnego warunku, który tym razem weryfikuje czy ocena jest równa 3. Ten warunek przejdzie pozytywny test, zatem zostanie wykonany blok po "else if" i NA TYM SIĘ KOŃCZY 🏁. Blok "else" już nie będzie sprawdzany, gdyż program "natrafił" wcześniej na blok do wykonania ℹ️.
Możesz dać tyle warunków, ile chcesz 🙂👇:
if([warunekA]) {
// blok instrukcji A, wykonywany wtedy i tylko wtedy, gdy [warunekA] jest prawdziwy
} else if([warunekB]) {
// blok instrukcji B, wykonywany wtedy i tylko wtedy, gdy [warunekA] jest fałszywy i [warunekB] jest prawdziwy
} else if([warunekC]) {
// blok instrukcji C, wykonywany wtedy i tylko wtedy, gdy [warunekA] i [warunekB] są fałszywe, a [warunekC] jest prawdziwy
} else {
// blok instrukcji D, wykonywany wtedy i tylko wtedy, gdy [warunekA], [warunekB] i [warunekC] są fałszywe, a [warunekD] jest prawdziwy
}przy czym trzymamy się zawsze tego samego łańcuszka 👇:
if ➡️ else if ➡️ else if ➡️ [...] ➡️ else
Żadna inna kombinacja nie przejdzie i przy próbie zrobienia inaczej, powstanie błąd składniowy ⛔!
 |
Instrukcja warunkowa w języku JavaScript pozwala zaprogramować różne ścieżki jakimi może "pójść" aplikacja.
JEST COŚ JESZCZE!
Instrukcja warunkowa w języku JavaScript posiada w sobie coś "exclusive". Mianowicie, wewnątrz nawiasów instrukcji "if" niekoniecznie musi być umieszczony warunek. To może być też...zmienna! Spójrz 👇:
let rating = 5;
if(rating) {
// instrukcje
}
Czy wiesz co to oznacza 🤔? Wykonanie poszczególnych instrukcji wtedy i tylko wtedy, gdy podana zmienna została zdefiniowana! To ma związek z transformacją wartości na logiczny typ danych i na wytłumaczenie tego zjawiska poświęciłem odrębny artykuł ℹ️.
OPERATOR WARUNKOWY
Ostatnie wtrącenie, które ma związek z tematem. Gdy jesteś w sytuacji konieczności przypisania jednej z dwóch wartości jakiejś zmiennej bądź stałej, możesz zamienić "if else" na niejaki operator warunkowy, którego zaletą jest znacznie zmniejszenie liczby wierszy kodu ✅. Więcej informacji zostawiam w osobnym artykule ℹ️.
Finito 😎! To wszystkie szczegóły dotyczące instrukcji warunkowych 👍.