Operatoren & Ausdrücke

Ein Ausdruck ist jedes Stück Code, das einen Wert ergibt, zum Beispiel 2 + 3, user.name oder fn(). Operatoren verknüpfen Werte zu neuen Ausdrücken. Wer ihre Regeln kennt, besonders bei Typumwandlung und Kurzschlussauswertung, vermeidet viele typische Bugs.

Arithmetik und Zuweisung

Neben + - * / gibt es % (Rest) und ** (Potenz). Vorsicht: + verkettet Strings, sobald einer der Operanden ein String ist.

const a = 7 % 3;      // 1
const b = 2 ** 10;    // 1024
const c = '5' + 1;    // '51' (String!)
const d = '5' - 1;    // 4 (Zahl)

let count = 0;
count += 5;           // 5
count++;              // 6

Vergleiche: === statt ==

== wandelt Typen vor dem Vergleich um und liefert dadurch überraschende Ergebnisse. Nimm standardmäßig === und !==. Objekte werden über ihre Referenz verglichen, nicht über ihren Inhalt.

0 == '';          // true  (Typumwandlung)
0 === '';         // false
null == undefined; // true
[1] === [1];      // false (verschiedene Referenzen)
Number.isNaN(NaN); // true – NaN === NaN ist false

Logische Operatoren, ?? und ?.

&& und || werten per Kurzschluss aus und geben einen der Operanden zurück, nicht zwingend true oder false. ?? greift nur bei null oder undefined. Dadurch bleiben gültige Werte wie 0 oder '' erhalten. ?. bricht den Zugriff ab, wenn ein Zwischenwert fehlt, und ergibt dann undefined.

const config = { retries: 0 };

const r1 = config.retries || 3;  // 3 – 0 ist falsy
const r2 = config.retries ?? 3;  // 0 – korrekt

const city = user?.address?.city ?? 'unbekannt';
const result = api.fetch?.();    // nur aufrufen, wenn vorhanden

// Logische Zuweisung (ES2021)
config.timeout ??= 5000;
isReady &&= checkState();

Hinweis: ?? darf nicht ohne Klammern mit && oder || kombiniert werden, sonst gibt es einen SyntaxError.

Ternärer Operator und Rangfolge

bedingung ? a : b ist ein Ausdruck und passt deshalb in Template Literals oder Rückgabewerte. Verschachtelte Ternaries werden schnell unleserlich. Im Zweifel lieber if verwenden oder mit Klammern arbeiten.

const label = `${items.length} ${items.length === 1 ? 'Eintrag' : 'Einträge'}`;

const x = 2 + 3 * 4;     // 14 – * vor +
const y = (2 + 3) * 4;   // 20
const z = typeof null;   // 'object' (historischer Fehler)

Best Practice: Setze Klammern, wo die Rangfolge nicht sofort klar ist. Sie kosten nichts und machen die Absicht eindeutig.