Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B3.2 · ca. 30 Min. · Einstieg

switch und der Bedingungsoperator

Nach dieser Lektion wählen Sie mit switch einen von vielen festen Werten, sagen vorher, was ein fehlendes break bewirkt, und entscheiden sich bei zwei Möglichkeiten zwischen cond ? a : b und if.

Lektion 2 von 5 in B3 Kontrollfluss und Schleifen

Danach können Sie

  • Ein switch mit case, break und default schreiben und wissen, dass es mit === vergleicht
  • Fall-through bei fehlendem break vorhersagen und cases gezielt zusammenfassen
  • cond ? a : b für einen Wert schreiben und für eine Aufgabe zwischen ihm und if wählen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Welche Anweisung ist dafür gemacht, zwischen vielen festen Werten einer Variablen zu wählen, etwa dem Namen eines Wochentags?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Keiner der cases hat ein break. Was gibt dieser Code aus?

    const size = "M";
switch (size) {
  case "S":
    console.log("small");
  case "M":
    console.log("medium");
  case "L":
    console.log("large");
}

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie das Schlüsselwort, das den case beendet, sodass das Programm stop und dann done ausgibt, aber nie go.

    const light = "red";
switch (light) {
  case "red":
    console.log("stop");
    ____;
  case "green":
    console.log("go");
}
console.log("done");
    ;

  4. Üben · Aufgabe 4 von 7

    Die Auswahl kommt aus einem Formular, als Text. Was gibt dieser Code aus?

    const choice = "2";
switch (choice) {
  case 1:
    console.log("tea");
    break;
  case 2:
    console.log("coffee");
    break;
  default:
    console.log("unknown");
}

  5. Üben · Aufgabe 5 von 7

    Ordnen Sie jedem Bedingungsausdruck den Wert zu, den er liefert.

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Das default steht nicht am Ende. Was gibt dieser Code aus?

    const code = 7;
switch (code) {
  case 1:
    console.log("one");
    break;
  default:
    console.log("other");
  case 2:
    console.log("two");
    break;
}

  7. Anwenden · Aufgabe 7 von 7

    Kleine Aufgabe. Schreiben Sie einen Tagesplaner. Speichern Sie einen Tag als "mon" bis "sun" in einer Konstante und geben Sie mit einem switch für "sat" und "sun" Weekend: sleep in aus (ein zusammengefasster case), für "fri" Almost weekend und für jeden anderen Tag Workday: alarm at 7. Geben Sie danach aus, wie viele Aufgaben übrig sind, wobei der Bedingungsoperator task oder tasks wählt. Probieren Sie mehrere Tage und Anzahlen.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Eine Paket-Preisliste

Dieses Programm berechnet Paketpreise nach Größe mit einem switch: L und XL teilen sich einen case, und eine unbekannte Größe landet im default. Danach wählt der Bedingungsoperator Wörter: parcel oder parcels, next day oder 3 to 5 days. Führen Sie es aus, setzen Sie dann size auf "XL" oder "XXL", count auf 1 und express auf false, und sagen Sie jede Zeile vorher, bevor Sie es erneut ausführen.

main.js

// Price parcels by their size, and describe the order.
const size = "M";
const count = 3;
const express = true;

let price;
switch (size) {
  case "S":
    price = 3;
    break;
  case "M":
    price = 4.5;
    break;
  case "L":
  case "XL":
    price = 9;
    break;
  default:
    price = 0;
    console.log("Unknown size:", size);
}

console.log(`Size ${size}: ${price} EUR each`);
console.log(`${count} ${count === 1 ? "parcel" : "parcels"}`);
console.log("Delivery:", express ? "next day" : "3 to 5 days");
console.log("Total:", count * price, "EUR");

Ausführen mit

node main.js

Ausgabe

Size M: 4.5 EUR each
3 parcels
Delivery: next day
Total: 13.5 EUR
  • size ist "M", also führt das switch case "M" aus, setzt den Preis und verlässt es bei dessen break.
  • case "L" hat keinen eigenen Code: Er fällt zum Code von case "XL" durch, also kosten beide Größen 9.
  • count === 1 ist false, also liefert ? : seinen zweiten Wert, "parcels".
  • express ist true, also bekommt die Lieferzeile den Wert nach ?.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Die Getränkekarte reparieren

Die Auswahl kommt aus einem Formular als Text "2", und die Karte soll You chose coffee. und dann Thank you! antworten. Stattdessen sagt sie Please choose 1, 2 or 3., und sobald das behoben ist, gibt sie auch jedes Getränk unter coffee aus. Lassen Sie das switch Zahlen vergleichen und beenden Sie jeden case an seinem Ende. Die cases bleiben Zahlen.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    switch vergleicht mit ===, und "2" === 2 ist false. Wandeln Sie den Text mit Number() um, bevor das switch ihn vergleicht.

  2. Hinweis 2

    Sobald ein case passt, läuft das switch in die cases darunter weiter, bis es auf ein break trifft.

  3. Hinweis 3

    Setzen Sie break; als letzte Zeile in die cases 1, 2 und 3.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const typed = "2";

switch (Number(typed)) {
  case 1:
    console.log("You chose tea.");
    break;
  case 2:
    console.log("You chose coffee.");
    break;
  case 3:
    console.log("You chose juice.");
    break;
  default:
    console.log("Please choose 1, 2 or 3.");
}
console.log("Thank you!");
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const typed = "2";

switch (typed) {
  case 1:
    console.log("You chose tea.");
  case 2:
    console.log("You chose coffee.");
  case 3:
    console.log("You chose juice.");
  default:
    console.log("Please choose 1, 2 or 3.");
}
console.log("Thank you!");

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('der Text "2" wählt coffee', async () => {
  const got = await lines();
  assert.equal(got[0], 'You chose coffee.', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "You chose coffee."`);
});

test('kein anderes Getränk wird ausgegeben', async () => {
  const got = await lines();
  assert.deepEqual(got, ['You chose coffee.', 'Thank you!'], `das Programm gab ${JSON.stringify(got)} aus`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Wörter, die zum Wert passen

Eine Statusleiste gibt 1 messages, Status: false und Battery: 15 aus. Verwenden Sie den Bedingungsoperator so, dass sie 1 message ausgibt (messages bei jeder anderen Zahl), Status: offline (online, wenn online true ist) und Battery: low, wenn der Akku unter 20 liegt (sonst ok). Behalten Sie die drei Konstanten und ihre Werte.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    Das Muster ist bedingung ? wertWennWahr : wertWennFalsch, und es liefert einen Wert, den Sie ausgeben können.

  2. Hinweis 2

    In einem Template-Literal: `${messages} ${messages === 1 ? "message" : "messages"}`.

  3. Hinweis 3

    online ist schon true oder false und kann allein die Bedingung sein: online ? "online" : "offline".

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const messages = 1;
const online = false;
const battery = 15;

console.log(`${messages} ${messages === 1 ? "message" : "messages"}`);
console.log("Status:", online ? "online" : "offline");
console.log("Battery:", battery < 20 ? "low" : "ok");
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const messages = 1;
const online = false;
const battery = 15;

console.log(`${messages} messages`);
console.log("Status:", online);
console.log("Battery:", battery);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('eine Nachricht steht im Singular', async () => {
  const got = await lines();
  assert.equal(got[0], '1 message', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "1 message"`);
});

test('der Status ist ein Wort', async () => {
  const got = await lines();
  assert.equal(got[1], 'Status: offline', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "Status: offline"`);
});

test('ein Akku von 15 ist niedrig', async () => {
  const got = await lines();
  assert.equal(got[2], 'Battery: low', `die dritte Zeile ist ${JSON.stringify(got[2])}, erwartet: "Battery: low"`);
});

test('gibt genau drei Zeilen aus', async () => {
  const got = await lines();
  assert.equal(got.length, 3, `das Programm gab ${got.length} Zeile(n) aus, erwartet: 3`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Ein Vergleich als case

const score = 75;
switch (score) {
  case > 50:
    console.log("pass");
    break;
}

Was Node.js ausgibt

SyntaxError: Unexpected token '>'

Warum, und die Lösung

Ein case enthält einen Wert, den das switch mit === vergleicht; er ist keine Bedingung. case > 50: kann nicht gelesen werden, also läuft keine Zeile der Datei. Für Bereiche schreiben Sie eine if-Kette: if (score > 50) { … } else { … }.

Dasselbe let in zwei cases

const size = "S";
switch (size) {
  case "S":
    let label = "small";
    console.log(label);
    break;
  case "L":
    let label = "large";
    console.log(label);
    break;
}

Was Node.js ausgibt

SyntaxError: Identifier 'label' has already been declared

Warum, und die Lösung

Alle cases eines switch teilen sich einen Block, die geschweiften Klammern des switch, also deklariert das zweite let label denselben Namen darin ein zweites Mal. Geben Sie jedem case einen eigenen Block mit Klammern, case "S": { let label = "small"; … break; }, oder deklarieren Sie die Variable einmal über dem switch.

Ein Bedingungsoperator ohne Doppelpunkt

const online = true;
const label = online ? "online";
console.log(label);

Was Node.js ausgibt

SyntaxError: Unexpected token ';'

Warum, und die Lösung

Der Bedingungsoperator hat immer drei Teile: einen Wert für eine truthy-Bedingung nach ? und einen für eine falsy-Bedingung nach :. Ohne den :-Teil kann die Zeile nicht gelesen werden. Schreiben Sie online ? "online" : "offline". Gibt es im anderen Fall nichts zu tun, nehmen Sie stattdessen ein if.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

switch vergleicht einen Wert mit ===

switch (day) { case "sat": … break; default: … } wertet day einmal aus und sucht dann den ersten case, dessen Wert strikt gleich ist, mit ===, und läuft ab dort. Nichts wird umgewandelt: switch ("1") passt nie zu case 1. Passt kein case, läuft die default-Klausel; ohne default läuft im switch nichts, und das Programm macht danach weiter. Jeder case enthält einen Wert, keine Prüfung: case > 50: ist ein SyntaxError. Für Bereiche, etwa Punkte über 50, nehmen Sie if und else if.

Ohne break fällt es durch

Ein case ist nur ein Einstiegspunkt. Sobald ein case passt, führt JavaScript jede Anweisung danach aus, durch die cases darunter hindurch, bis es auf ein break oder das Ende des switch trifft. Das heißt Fall-through. Fehlt ein break, läuft der nächste case mit, egal welchen Wert er hat, und das gilt auch für default. Gezielt eingesetzt fasst es Werte zusammen: case "sat": case "sun": console.log("weekend"); break; führt eine Zeile für beide aus. Beenden Sie jeden case mit break, auch den letzten, dann ist ein später ergänzter case sicher.

cond ? a : b wählt einen Wert

Der Bedingungsoperator ist der einzige mit drei Teilen: bedingung ? wertWennTruthy : wertWennFalsy. Er ist ein Ausdruck, sein Ergebnis kann also direkt in eine const, ein console.log oder ein Template-Literal: const word = count === 1 ? "item" : "items";. Nehmen Sie ihn, wenn beide Zweige einen Wert für dieselbe Stelle liefern. Nehmen Sie if, wenn die Zweige etwas tun, etwa mehrere Zeilen ausgeben, oder wenn es mehr als zwei Fälle gibt. Man kann ihn verketten, a ? b : c ? d : e, aber eine else-if-Kette liest sich leichter.

Quellen

Zuletzt geprüft am 1. Oktober 2026