Abschnitt 3 · Lektion 7
Der Fragezeichen-Operator
Es gibt eine zweite Art, eine Entscheidung zu schreiben, und sie unterscheidet sich vom if in einem Punkt, der wichtiger ist als die Kürze.
Ein Ausdruck, keine Anweisung
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const punkte = 42;
// Mit if: vier Zeilen, und der Name braucht ein let.
let stufeMitIf;
if (punkte >= 40) {
stufeMitIf = "Profi";
} else {
stufeMitIf = "Einstieg";
}
console.log("Mit if: ", stufeMitIf);
// Mit Fragezeichen: eine Zeile, und const reicht.
const stufeKurz = punkte >= 40 ? "Profi" : "Einstieg";
console.log("Mit ? : ", stufeKurz); Die Schreibweise ist: Bedingung, Fragezeichen, der Wert für ja, Doppelpunkt, der Wert für nein.
Was sie vom if unterscheidet, ist nicht die Zeilenzahl. Es ist, dass sie einen Wert ergibt. Ein if tut etwas, der Fragezeichen-Operator ist etwas.
Deshalb kannst du ihn rechts vom Gleichheitszeichen hinschreiben, und deshalb reicht dort const. Mit if musst du den Namen erst leer anlegen, ihn also mit let deklarieren, und in beiden Zweigen füllen. Das ist mehr Text, und es öffnet die Tür für den Fall, in dem du einen Zweig vergisst.
Der offizielle Name ist ternärer Operator, weil er als einziger Operator der Sprache drei Teile hat. Man nennt ihn deshalb auch einfach „der Ternäre”.
Wo ein if nicht hinpasst
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const angemeldet = true;
const name = "";
// In die geschweiften Klammern passt jeder Ausdruck, aber kein if.
console.log(`Status: ${angemeldet ? "angemeldet" : "abgemeldet"}`);
console.log(`Hallo ${name ? name : "Gast"}!`);
// Auch mehrere in einer Zeile sind in Ordnung, solange sie
// unabhängig voneinander sind.
const anzahl = 1;
console.log(`${anzahl} ${anzahl === 1 ? "Nachricht" : "Nachrichten"}`); Das ist der Ort, an dem er unersetzlich wird.
In die geschweiften Klammern eines Template Literals passt jeder Ausdruck, aber keine Anweisung. Ein if gehört zu den Anweisungen, es ergibt keinen Wert und darf dort nicht stehen.
Ohne den Fragezeichen-Operator müsstest du den Text vorher in einer eigenen Variablen zusammenbauen und ihn dann einsetzen. Mit ihm steht die Entscheidung genau dort, wo ihr Ergebnis hingehört.
Dieselbe Regel gilt später an weiteren Stellen: bei Werten in einem Objekt, als Argument eines Aufrufs, und in Abschnitt 6 in den Funktionen, die Listen umformen.
Einzahl und Mehrzahl
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> function zeile(anzahl) {
return `${anzahl} ${anzahl === 1 ? "Nachricht" : "Nachrichten"}`;
}
console.log(zeile(0));
console.log(zeile(1));
console.log(zeile(2));
console.log(zeile(17)); Das ist die häufigste sinnvolle Anwendung, und sie kommt in jeder Oberfläche vor.
1 Nachricht und 2 Nachrichten unterscheiden sich in genau einem Buchstaben, und dafür lohnt sich kein if. Ein Fragezeichen mitten im Text erledigt das.
Beachte, dass hier gegen 1 verglichen wird und nicht gegen „größer als 1”. Die Null bekommt im Deutschen die Mehrzahl: 0 Nachrichten ist richtig, 0 Nachricht nicht. Wer das mit anzahl > 1 schreibt, bekommt bei null den falschen Fall.
Wo die Grenze liegt
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> const punkte = 75;
// Zwei Ebenen verschachtelt. Lesbar? Entscheide selbst.
const note = punkte >= 90 ? "sehr gut" : punkte >= 80 ? "gut" : punkte >= 70 ? "befriedigend" : "durchgefallen";
console.log("Verschachtelt:", note);
// Dasselbe mit if, und plötzlich sieht man die Stufen.
function noteMitIf(p) {
if (p >= 90) {
return "sehr gut";
}
if (p >= 80) {
return "gut";
}
if (p >= 70) {
return "befriedigend";
}
return "durchgefallen";
}
console.log("Mit if: ", noteMitIf(punkte)); Man kann Fragezeichen verschachteln. Die erste Zeile im Beispiel tut das dreimal, und sie funktioniert einwandfrei.
Lesen kann sie trotzdem niemand. Beim Überfliegen weißt du nicht, welcher Doppelpunkt zu welchem Fragezeichen gehört, und beim Ändern triffst du die falsche Stelle.
Die Faustregel: eine Ebene ja, ab der zweiten nimmst du if. Der frühe Ausstieg aus Lektion 3.5 macht daraus vier lesbare Zeilen, und die Notenskala ist ohnehin ein Fall für eine Funktion.
Eine Ausnahme, die du in fremdem Code sehen wirst: Wenn die verschachtelten Fragezeichen als Kette untereinander formatiert werden, also jedes auf einer eigenen Zeile, liest es sich wieder gut. Das ist Geschmackssache und keine Regel, an die du dich halten musst.
Und noch eine Grenze, die wichtiger ist als die Verschachtelung: Der Fragezeichen-Operator ist für Werte da, nicht für Handlungen. Wenn in beiden Zweigen ein Funktionsaufruf steht, der etwas verändert, gehört dort ein if hin. Er soll dir sagen, was etwas ist, nicht was passieren soll.
Zum Mitnehmen
Ein if tut etwas, der Fragezeichen-Operator ergibt etwas. Deshalb steht er rechts vom Gleichheitszeichen und in Template Literals, wo ein if gar nicht hinpasst.
Jetzt du
Basis Konto, kostenlosZu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.
Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.
Was in dieser Lektion steckt
-
Artikel mit 4 Beispielen zum Ausprobieren
Steht hier, ohne Konto lesbar.
-
Aufgabe im Editor, direkt im Browser geprüft
Öffnet sich mit dem Basis Konto.