Signatur
Beschreibung
Der bedingte (ternäre) Operator ist der einzige JavaScript-Operator, der drei Operanden benötigt: eine bedingung, gefolgt von einem Fragezeichen (?), einem Ausdruck ausdruck1, der ausgeführt wird, wenn die Bedingung truthy ist, einem Doppelpunkt (:) und schließlich einem Ausdruck ausdruck2, der ausgeführt wird, wenn die Bedingung falsy ist.
Er wird häufig als kompakte Alternative zu einem einfachen if...else-Statement eingesetzt, besonders wenn ein Wert inline — etwa in einer Variablenzuweisung, einem Template-Literal oder JSX — berechnet werden soll. Im Gegensatz zu if...else ist der ternäre Operator ein Ausdruck (expression), der immer einen Wert zurückgibt, und kann daher überall verwendet werden, wo ein Ausdruck erwartet wird.
Ternäre Operatoren lassen sich verschachteln, indem ausdruck1 oder ausdruck2 selbst wieder ein ternärer Ausdruck ist. Aus Gründen der Lesbarkeit sollte die Verschachtelung jedoch sparsam eingesetzt werden — bei mehr als zwei Ebenen ist eine if...else if...else-Kette oder ein switch-Statement oft klarer.
Beide Zweige des Operators werden lazy ausgewertet: Es wird immer nur einer der beiden Ausdrücke ausgeführt, niemals beide gleichzeitig. Seiteneffekte (z. B. Funktionsaufrufe) treten also nur im tatsächlich gewählten Zweig auf.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $bedingung Pflicht | any | — | Ein Ausdruck, der zu einem booleschen Wert ausgewertet wird. Truthy-Werte führen zur Ausführung von ausdruck1, falsy-Werte zur Ausführung von ausdruck2. |
| $ausdruck1 Pflicht | any | — | Ausdruck, der ausgewertet und zurückgegeben wird, wenn bedingung truthy ist. |
| $ausdruck2 Pflicht | any | — | Ausdruck, der ausgewertet und zurückgegeben wird, wenn bedingung falsy ist. |
Rückgabewert
ausdruck1, wenn bedingung truthy ist, andernfalls der Wert von ausdruck2.Beispiele
Einfache Zuweisung mit ternärem Operator
const alter = 20;
const status = alter >= 18 ? 'volljährig' : 'minderjährig';
console.log(status);Ternärer Operator in einem Template-Literal
const punkte = 72;
const ergebnis = `Du hast ${punkte} Punkte erreicht und damit ${punkte >= 50 ? 'bestanden' : 'nicht bestanden'}.`;
console.log(ergebnis);Verschachtelte ternäre Operatoren
const note = 85;
const bewertung =
note >= 90 ? 'Sehr gut' :
note >= 75 ? 'Gut' :
note >= 60 ? 'Befriedigend' :
'Nicht bestanden';
console.log(bewertung);Lazy-Auswertung — nur ein Zweig wird ausgeführt
const logTrue = () => { console.log('Wahrer Zweig'); return 'A'; };
const logFalse = () => { console.log('Falscher Zweig'); return 'B'; };
const wert = true ? logTrue() : logFalse();
console.log(wert);Einsatz in React / JSX (konzeptionell)
// Bedingtes Rendern einer Schaltfläche je nach Anmeldestatus
const isLoggedIn = false;
const button = isLoggedIn
? '<button>Abmelden</button>'
: '<button>Anmelden</button>';
console.log(button);// Wichtig · Fallstricke
Lesbarkeit: Ternäre Operatoren sind ideal für einfache, einzeilige Entscheidungen. Sobald die Logik komplexer wird oder mehr als zwei Ebenen verschachtelt sind, sollte auf if...else oder switch zurückgegriffen werden, um die Lesbarkeit zu erhalten.
- Kein Statement, sondern ein Ausdruck: Der ternäre Operator kann nicht direkt zur Steuerung von Kontrollfluss-Statements (z. B.
returnin einer Schleife ersetzen) missbraucht werden — er gibt immer einen Wert zurück. - Seiteneffekte vermeiden: Obwohl technisch möglich, sollte man Ausdrücke mit Seiteneffekten (z. B.
console.log(), DOM-Manipulation) nicht in ternären Operatoren verwenden — hierfür istif...elsebesser geeignet. - Typkoercion bei der Bedingung: Die Bedingung wird implizit in einen Boolean konvertiert. Falsy-Werte sind:
0,"",null,undefined,NaNundfalse. - Browser-Kompatibilität: Der ternäre Operator ist seit den Anfängen von JavaScript (ES1) in allen Umgebungen verfügbar und benötigt keinen Polyfill.