switch

Porównuje wartość z listą przypadków case i wykonuje kod od pierwszego pasującego.

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 taskLabel(type) {
  switch (type) {
    case 'video':
      return 'Film'
    case 'question':
      return 'Quiz'
    case 'gap':
    case 'sort':
      return 'Ćwiczenie'
    default:
      return 'Lekcja'
  }
}

console.log(taskLabel('video'))
console.log(taskLabel('sort'))
console.log(taskLabel('analyze'))

Konsola

Film

Ćwiczenie

Lekcja

Definicja i zastosowanie

Instrukcja switch oblicza wyrażenie raz, a potem porównuje wynik z kolejnymi etykietami case. Gdy znajdzie pasującą, wykonuje kod od tego miejsca. Jeśli nic nie pasuje, przechodzi do opcjonalnego default.

Porównanie odbywa się ścisłym operatorem ===, więc napis "1" nie pasuje do liczby 1. Każdy przypadek zwykle kończy się break albo return. Bez tego wykonanie „przelatuje” (fall-through) do następnego case, co bywa błędem, ale pozwala też połączyć kilka przypadków w jeden.

switch jest czytelny, gdy sprawdzasz jedną zmienną względem wielu konkretnych wartości, np. typu zadania albo nazwy polecenia. Do zakresów liczbowych i złożonych warunków lepiej pasuje if...else.

Składnia

switch (expression) {
  case value1:
    // instrukcje
    break
  case value2:
  case value3:
    // wspólne instrukcje
    break
  default:
    // gdy nic nie pasuje
}

Więcej przykładów

Pułapka: brakujący break

JavaScript

const level = 2

switch (level) {
  case 1:
    console.log('Odblokowano: HTML')
  case 2:
    console.log('Odblokowano: CSS')
  case 3:
    console.log('Odblokowano: JavaScript')
    break
  default:
    console.log('Brak nagród')
}

Konsola

Odblokowano: CSS

Odblokowano: JavaScript

Wykonanie zaczyna się od case 2 i biegnie dalej, aż trafi na break. Czasem to zamierzone, ale znacznie częściej to po prostu zapomniany break.

Ścisłe porównanie

JavaScript

const answer = '1'

switch (answer) {
  case 1:
    console.log('liczba 1')
    break
  case '1':
    console.log('napis "1"')
    break
}

Konsola

napis "1"

switch (true) dla zakresów

JavaScript

const points = 75

switch (true) {
  case points >= 90:
    console.log('Złoty medal')
    break
  case points >= 60:
    console.log('Srebrny medal')
    break
  default:
    console.log('Brązowy medal')
}

Konsola

Srebrny medal

Ten wzorzec działa, bo wynik każdego warunku jest porównywany z true. Wielu programistów woli w takiej sytuacji zwykłe if...else.

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

Kończ każdy przypadek przez break albo return. Jeśli przelatywanie jest celowe, zostaw komentarz, np. // dalej, żeby nikt nie wziął tego za błąd.
Deklarując zmienne wewnątrz case, otocz jego kod klamrami: case "video": { ... }. Wszystkie przypadki dzielą jeden blok, więc dwa const o tej samej nazwie dadzą błąd składni.
Gdy switch tylko zamienia jedną wartość na drugą, prostszy bywa obiekt: const labels = { video: "Film", question: "Quiz" } i odczyt labels[type].

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