Jak uprościć instrukcje if w JavaScript

Instrukcje warunkowe są istotną częścią JavaScript. Pozwalają wykonywać kod na podstawie tego, czy dany warunek jest prawdziwy, czy fałszywy, i można zagnieżdżać wiele elseif oświadczenia (i w przeciwnym razie), aby ocenić więcej niż jeden warunek.

Ale tutaj jest problem — podczas pisania złożonych Jeśli inaczej łańcuchy, rzeczy mogą szybko się zabrudzić i łatwo skończyć z kodem, który jest trudny do odczytania i zrozumienia.

Nauczmy się refaktoryzować długie i złożone jeśli… inaczej, jeśli… inaczej łańcuchy warunkowe w bardziej zwięzłą, czystszą i łatwiejszą do zrozumienia wersję.

Złożone łańcuchy if…else

Podczas pisania złożonych instrukcji if...else w JavaScript konieczne jest pisanie czysty, zwięzły i zrozumiały kod. Na przykład spójrz na Jeśli inaczej łańcuch warunkowy wewnątrz funkcji poniżej:

funkcjonowaćmożePić(osoba) {
Jeśli(osoba?.wiek != zero) {
Jeśli(osoba.wiek < 18) {
konsola.dziennik(„Jeszcze za młody”)
 } w przeciwnym razie





instagram viewer

Jeśli(osoba.wiek < 21) {
konsola.dziennik(„Nie w USA”)
 } w przeciwnym razie {
konsola.dziennik(„Pozwolono pić”)
 }
 } w przeciwnym razie {
konsola.dziennik(„Nie jesteś osobą”)
 }
}
konst osoba = {
 wiek: 22
}
canDrink (osoba)

Logika jest tutaj prosta. Pierwszy Jeśli oświadczenie gwarantuje, że osoba obiekt posiada wiek własność (inaczej on lub ona nie jest osobą). Wewnątrz tego Jeśli blok, dodałeś jeśli… inaczej… jeśli łańcuch, który w zasadzie mówi:

Jeśli osoba ma mniej niż 18 lat, jest za młoda, by się napić. Jeśli mają mniej niż 21 lat, nadal są poniżej wieku uprawniającego do legalnego spożywania alkoholu w Stanach Zjednoczonych. W przeciwnym razie mogą legalnie dostać drinka.

Chociaż powyższy kod jest prawidłowy, zagnieżdżanie utrudnia zrozumienie kodu. Na szczęście możesz zrefaktoryzować kod, aby był zwięzły i łatwiejszy do odczytania, używając a klauzula ochronna.

Klauzule ochronne

Zawsze, gdy masz Jeśli instrukcja, która zawija cały twój kod, możesz użyć a klauzula ochronna aby usunąć wszystkie zagnieżdżenia:

funkcjonowaćmożePićLepiej() {
Jeśli(osoba?.wiek == zero) powrótkonsola.dziennik(„Nie jesteś osobą”) 
Jeśli(osoba.wiek < 18) {
konsola.dziennik(„Jeszcze za młody”)
 } w przeciwnym razieJeśli(osoba.wiek < 21) {
konsola.dziennik(„Nie w USA”)
 } w przeciwnym razie {
konsola.dziennik(„Pozwolono pić”)
 }
}

Na początku funkcji zdefiniowałeś klauzulę ochronną stwierdzającą, że jeśli ten konkretny warunek nie jest spełniony, chcesz wyjść z funkcji możePićLepiej() działać natychmiast (i logować „Nie jesteś osobą” na konsoli).

Ale jeśli warunek jest spełniony, oceniasz Jeśli inaczej łańcuch, aby zobaczyć, który blok ma zastosowanie. Uruchomienie kodu daje taki sam wynik jak w pierwszym przykładzie, ale ten kod jest łatwiejszy do odczytania.

Nie używaj pojedynczego zwrotu

Możesz argumentować, że powyższa technika nie jest dobra zasada programowania ponieważ używamy wielu zwrotów w tej samej funkcji, a Ty uważasz, że lepiej jest mieć tylko jedną instrukcję zwrotu (inaczej politykę jednego zwrotu).

Ale to okropny sposób pisania kodu, ponieważ zmusza cię do tych samych szalonych sytuacji zagnieżdżania, które widzieliśmy w pierwszej próbce kodu.

Powiedziawszy to, możesz użyć wielu powrót instrukcje, aby jeszcze bardziej uprościć kod (i pozbyć się zagnieżdżania):

funkcjonowaćmożePićLepiej() {
Jeśli(osoba?.wiek == zero) powrótkonsola.dziennik(„Nie jesteś osobą”) 
Jeśli(osoba.wiek < 18) {
konsola.dziennik(„Jeszcze za młody”)
powrót
 } 
Jeśli(osoba.wiek < 21) {
konsola.dziennik(„Nie w USA”)
powrót
 }
konsola.dziennik(„Pozwolono pić”) 
}

Ten kod działa tak samo, jak dwa poprzednie przykłady, a także jest nieco czystszy.

Wyodrębnij funkcje dla czystszego kodu

Nasz ostatni blok kodu był czystszy niż pierwsze dwa, ale nadal nie jest tak dobry, jak mógłby być.

Zamiast mieć długi Jeśli inaczej łańcuch wewnątrz jednej funkcji, możesz utworzyć oddzielną funkcję canDrinkResult() który sprawdza za ciebie i zwraca wynik:

funkcjonowaćmożePićRezultat(wiek) {
Jeśli(wiek < 18) powrót„Jeszcze za młody”
Jeśli(wiek < 21) powrót„Nie w USA”
powrót„Pozwolono pić”
}

Następnie wewnątrz funkcji main wszystko, co musisz zrobić, to najpierw zastosować klauzulę ochronną przed wywołaniem funkcji canDrinkResult() funkcji (z wiekiem jako parametrem), aby uzyskać wynik:

funkcjonowaćmożePićLepiej() { 
Jeśli(osoba?.wiek == zero) powrótkonsola.dziennik(„Nie jesteś osobą”) 
pozwalać wynik = canDrinkResult (osoba.wiek)
konsola.log (wynik)
}

Tak więc w tym przypadku delegowałeś zadanie sprawdzania wieku picia do osobnej funkcji i wywoływałeś ją tylko wtedy, gdy było to konieczne. Dzięki temu Twój kod jest zwięzły i prostszy w obsłudze niż we wszystkich poprzednich przykładach.

Trzymaj else z dala od instrukcji warunkowych

Nauczyłeś się, jak refaktoryzować złożone, zagnieżdżone łańcuchy warunkowe na krótsze, łatwiejsze do odczytania łańcuchy przy użyciu klauzul ochronnych i techniki wyodrębniania funkcji.

Staraj się zachować w przeciwnym razie jak najdalej od instrukcji warunkowych, używając zarówno klauzul ochronnych, jak i techniki ekstrakcji funkcji.

Jeśli nadal nie znasz się na JavaScript Jeśli inaczej oświadczenie, zacznij od podstaw.