JavaScript else if – jak poprawnie sterować kodem?

Jeśli programujesz w JavaScript, na pewno spotkałeś się z instrukcjami warunkowymi. A jeśli warunki, to oczywiście if, ale co, jeśli mamy kilka możliwości? Właśnie tutaj wchodzi do gry else if. W tym artykule dowiesz się, jak działa JavaScript else if, jakie są najlepsze praktyki i zobaczysz javascript else if przykłady.

Podstawy instrukcji warunkowych w JavaScript

Instrukcja if pozwala na wykonanie kodu tylko wtedy, gdy określony warunek jest spełniony. Gdy chcemy dodać alternatywną ścieżkę wykonania, używamy else. Jednak czasem mamy więcej niż dwie opcje i wtedy przydaje się właśnie else if.

Podstawowy przykład if, else if i else

Załóżmy, że piszemy aplikację, która ocenia wyniki testu użytkownika i wyświetla odpowiednią ocenę:

let wynik = 85;

if (wynik >= 90) {
    console.log("Ocena: A");
} else if (wynik >= 80) {
    console.log("Ocena: B");
} else if (wynik >= 70) {
    console.log("Ocena: C");
} else if (wynik >= 60) {
    console.log("Ocena: D");
} else {
    console.log("Ocena: F");
}

W powyższym kodzie, jeśli wynik to 85, pierwsza instrukcja if zostanie pominięta, ale zadziała druga instrukcja else if i zostanie wyświetlona ocena „B”.

Jak działa else if?

Mechanizm działania jest prosty:

1. Najpierw sprawdzany jest warunek w if.
2. Jeśli jest spełniony, kolejne else if i else są ignorowane.
3. Jeśli nie, sprawdzany jest pierwszy else if.
4. Jeśli żaden z warunków nie zostanie spełniony, wykonuje się kod w else.

JavaScript else if – przykłady w praktyce

Przyjrzyjmy się kilku sytuacjom, w których else if jest szczególnie użyteczne.

1. Wybór odpowiedniego rabatu dla klienta

Załóżmy, że mamy sklep internetowy i chcemy przyznawać klientom rabaty w zależności od kwoty zakupów:

let kwotaZakupow = 500;
let rabat;

if (kwotaZakupow > 1000) {
    rabat = "20%";
} else if (kwotaZakupow > 500) {
    rabat = "10%";
} else if (kwotaZakupow > 200) {
    rabat = "5%";
} else {
    rabat = "Brak rabatu";
}

console.log("Twój rabat: " + rabat);

W tym przypadku, jeśli klient wydał 500 zł, otrzyma rabat 10%.

2. Sprawdzanie pory dnia i dostosowanie wiadomości

Chcemy, aby nasza strona internetowa witała użytkownika w zależności od pory dnia:

let godzina = new Date().getHours();
let powitanie;

if (godzina < 12) {
    powitanie = "Dzień dobry!";
} else if (godzina < 18) {
    powitanie = "Dobre popołudnie!";
} else {
    powitanie = "Dobry wieczór!";
}

console.log(powitanie);

Jeśli użytkownik odwiedzi stronę o godzinie 15:00, zobaczy wiadomość „Dobre popołudnie!”.

3. Obsługa poziomów trudności w grze

W grach komputerowych często ustawiamy poziom trudności. Zróbmy prostą logikę wyboru poziomu:

let poziom = "średni";

if (poziom === "łatwy") {
    console.log("Wybrałeś łatwy poziom gry.");
} else if (poziom === "średni") {
    console.log("Wybrałeś średni poziom gry.");
} else if (poziom === "trudny") {
    console.log("Wybrałeś trudny poziom gry.");
} else {
    console.log("Nieznany poziom trudności.");
}

Jeśli gracz wybierze „średni”, zobaczy stosowny komunikat.

Alternatywy dla else if

Czasem zamiast else if można użyć innych konstrukcji.

1. Operator ternarny

Gdy mamy prosty warunek, możemy skrócić zapis, używając operatora ?:

let wiek = 18;
let status = (wiek >= 18) ? "Dorosły" : "Niepełnoletni";
console.log(status);

To świetne rozwiązanie, gdy mamy tylko dwie możliwości.

2. Switch zamiast else if

Gdy sprawdzamy konkretną wartość, warto zastąpić else if instrukcją switch:

let dzien = "poniedziałek";

switch (dzien) {
    case "poniedziałek":
        console.log("Początek tygodnia!");
        break;
    case "piątek":
        console.log("Prawie weekend!");
        break;
    default:
        console.log("Zwykły dzień.");
}

Switch może być bardziej czytelny przy wielu wartościach.

Najczęstsze błędy przy używaniu else if

• Brak nawiasów klamrowych – jeśli nie używasz nawiasów klamrowych dla warunków, może to prowadzić do błędów.
• Złe kolejności warunków – zawsze zaczynaj od najbardziej ogólnych warunków.
• Niepełna logika – upewnij się, że obsłużyłeś wszystkie możliwe przypadki.

Podsumowanie

Instrukcja else if w JavaScript to kluczowe narzędzie do kontrolowania przepływu programu. Dzięki niej możesz obsługiwać wiele warunków i podejmować decyzje w sposób uporządkowany. Warto znać alternatywy, takie jak operator ternarny czy switch, ale w wielu przypadkach klasyczny if - else if - else pozostaje najlepszym rozwiązaniem.

A Ty? W jaki sposób najczęściej używasz else if w JavaScript? Podziel się swoimi przykładami w komentarzach!