if...else

Wykonuje blok kodu tylko wtedy, gdy warunek jest prawdziwy, a w przeciwnym razie opcjonalny blok else.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

function grade(points) {
  if (points >= 90) {
    return 'celujący'
  } else if (points >= 70) {
    return 'dobry'
  } else if (points >= 50) {
    return 'dostateczny'
  } else {
    return 'do poprawy'
  }
}

console.log(grade(95))
console.log(grade(72))
console.log(grade(30))

Konsola

celujący

dobry

do poprawy

Definicja i zastosowanie

Instrukcja if sprawdza warunek w nawiasach. Jeśli jest prawdziwy, wykonuje blok zapisany zaraz za nim. Opcjonalny else zawiera kod na wypadek, gdy warunek jest fałszywy, a else if pozwala sprawdzać kolejne warunki po kolei.

Warunek nie musi być wartością true ani false. JavaScript sam zamienia go na wartość logiczną. Fałszywe (falsy) są tylko: false, 0, -0, 0n, "", null, undefined i NaN. Wszystko inne, także pusta tablica [] i pusty obiekt {}, liczy się jako prawda (truthy).

Warunki w łańcuchu else if są sprawdzane od góry i wykonuje się tylko pierwszy pasujący blok. Dlatego układaj je od najbardziej szczegółowego do najogólniejszego.

Składnia

if (condition) {
  // gdy prawda
}

if (condition) {
  // gdy prawda
} else {
  // gdy fałsz
}

if (condition1) {
  // ...
} else if (condition2) {
  // ...
} else {
  // ...
}

Więcej przykładów

Wartości truthy i falsy w warunku

JavaScript

function welcome(name) {
  if (name) {
    return `Witaj, ${name}!`
  }
  return 'Witaj, nieznajomy!'
}

console.log(welcome('Ola'))
console.log(welcome(''))
console.log(welcome())

Konsola

Witaj, Ola!

Witaj, nieznajomy!

Pusty napis i undefined są fałszywe, więc oba trafiają do drugiej gałęzi. Uważaj na liczbę 0: ona też jest fałszywa, choć często bywa poprawną wartością.

Wczesny return zamiast zagnieżdżeń

JavaScript

function buyItem(user, price) {
  if (!user) {
    return 'Zaloguj się'
  }
  if (user.coins < price) {
    return 'Za mało monet'
  }
  user.coins -= price
  return `Kupiono, zostało ${user.coins} monet`
}

console.log(buyItem(null, 50))
console.log(buyItem({ coins: 30 }, 50))
console.log(buyItem({ coins: 80 }, 50))

Konsola

Zaloguj się

Za mało monet

Kupiono, zostało 30 monet

Łączenie warunków

JavaScript

const age = 16
const hasConsent = true

if (age >= 18 || hasConsent) {
  console.log('Możesz dołączyć do kursu')
} else {
  console.log('Potrzebna zgoda rodzica')
}

Konsola

Możesz dołączyć do kursu

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Zawsze używaj nawiasów klamrowych, nawet przy jednej instrukcji. Zapis bez nich łatwo zepsuć, dopisując drugą linię, która wykona się zawsze.
Zamiast głęboko zagnieżdżonych if sprawdzaj błędne przypadki na początku funkcji i od razu z niej wychodź przez return.
Do wyboru jednej z dwóch wartości wystarczy operator warunkowy warunek ? a : b, a przy wielu stałych wartościach czytelniejszy bywa switch.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs