JavaScript Operatoren: Rechnen, Vergleichen, Logik & mehr

Operatoren: So verrichten Ausdrücke ihre Arbeit

Jede nicht-triviale Zeile JavaScript besteht aus Operatoren – Symbolen, die einen oder zwei Werte nehmen und daraus einen neuen Wert erzeugen. + addiert, === vergleicht, && verknüpft Booleans, ? : wählt zwischen zwei Werten aus. Viele davon kennst du aus anderen Sprachen; einige wenige haben allerdings JavaScript-typische Eigenheiten, die man gleich zu Anfang kennen sollte.

Wir gehen die JavaScript-Operatoren nach Kategorien durch und schließen mit denen, die du am seltensten brauchst – die aber wichtig sind, wenn der Fall doch mal eintritt.

Arithmetische Operatoren in JavaScript

Die Grundrechenarten verhalten sich so, wie du es erwartest:

Ein paar Dinge, die du im Hinterkopf behalten solltest:

• / liefert immer eine Gleitkommadivision. 7 / 2 ergibt 3.5, nicht 3. Wenn du ein ganzzahliges Ergebnis brauchst, nimm Math.floor(7 / 2) oder Math.trunc(7 / 2).
• % ist der Rest (Remainder), nicht das mathematische Modulo. Das Vorzeichen richtet sich nach dem linken Operanden: -7 % 3 ergibt -1, nicht 2.
• + ist überladen. Sobald eine der beiden Seiten ein String ist, wird verkettet statt addiert: "3" + 1 ergibt "31". Dazu gleich noch mehr.

Inkrement- und Dekrementoperatoren

Der Unterschied zwischen count++ und ++count spielt nur dann eine Rolle, wenn du den Wert des Ausdrucks in derselben Zeile weiterverwendest. Als eigenständige Anweisung machen beide genau dasselbe. Die meisten Style Guides empfehlen aus Gründen der Lesbarkeit ohnehin count += 1.

Der +-Operator hat zwei Gesichter

Darüber stolpert wirklich jeder mindestens einmal:

Sobald einer der beiden Operanden ein String ist, wird aus + eine String-Verkettung – die andere Seite wird dann automatisch in einen String umgewandelt. Alle anderen arithmetischen Operatoren in JavaScript machen es genau umgekehrt: Sie zwingen Strings zu Zahlen:

Kurz gesagt: Wenn du Strings zusammenbaust, nimm lieber Template Literals (`Preis: ${5}`). Und wenn du rechnest, stell sicher, dass deine Werte auch wirklich Zahlen sind – mit Number(x) oder parseInt(x, 10) konvertierst du explizit.

JavaScript Vergleichsoperatoren

Vergleiche liefern immer einen Boolean zurück. Es gibt zwei Varianten: strikt und locker.

=== und !== vergleichen strikt – also denselben Wert und denselben Typ. == und != führen dagegen vorher eine Typumwandlung durch, was zu kuriosen Ergebnissen führt: null == undefined ergibt true, und [] == false ebenfalls true. Greif daher standardmäßig zu === und !==. Die einzige gängige Ausnahme ist x == null – ein praktischer Kurzform-Check, um zu prüfen, ob x entweder null oder undefined ist.

Die Vergleichsoperatoren für die Reihenfolge verhalten sich bei Zahlen wie erwartet, bei Strings wird alphabetisch verglichen:

Strings werden anhand ihrer Zeichencodes verglichen, die Groß- und Kleinschreibung spielt also eine Rolle. Wenn du eine menschenfreundliche Sortierung brauchst, nimm String.prototype.localeCompare.

Logische Operatoren in JavaScript

Die logischen Operatoren && (UND), || (ODER) und ! (NICHT) verknüpfen Boolesche Werte – sie können allerdings deutlich mehr als reine Boolesche Algebra.

Der Clou dabei: && und || geben gar nicht true oder false zurück, sondern einen der Operanden selbst. && liefert den ersten falsy-Wert zurück – oder den letzten, falls alle truthy sind. || wiederum gibt den ersten truthy-Wert zurück, bzw. den letzten, wenn alle falsy sind.

Darum sieht man häufig Muster wie const displayName = user.name || "Guest" – schnapp dir den ersten Wert, der nicht leer ist. Kurz und knackig, aber Vorsicht: || behandelt 0, "" und false ebenfalls als "leer" und springt zum Fallback. Wenn das in deinem Fall gültige Werte sind, nimm lieber ?? (siehe weiter unten).

Beide Operatoren arbeiten außerdem mit Short-Circuit-Evaluation: Steht das Ergebnis schon durch den linken Ausdruck fest, wird der rechte gar nicht erst ausgewertet.

Der Nullish Coalescing Operator ??

?? funktioniert ähnlich wie ||, springt aber ausschließlich bei null oder undefined an — nicht bei 0, "" oder false.

Setze ?? ein, wenn ein gültiger Wert durchaus falsy sein kann – etwa Zählwerte, leere Strings oder ein explizites false. || passt dagegen, wenn jeder falsy-Wert als "fehlt" interpretiert werden soll. In modernem Code ist ?? meist die sicherere Wahl, sobald es um optionale Werte mit einem Default ungleich null geht.

Zuweisungsoperatoren in JavaScript

= weist einen Wert zu. Die kombinierten Varianten verbinden die Zuweisung mit einem weiteren Operator:

Es gibt auch die sogenannten logischen Zuweisungsoperatoren — ||=, &&= und ??= —, die nur dann zuweisen, wenn der aktuelle Wert eine bestimmte Bedingung erfüllt:

Praktisch, um Default-Werte zu setzen, ohne umständliche if-Blöcke schreiben zu müssen.

Der ternäre Operator in JavaScript

condition ? a : b ist im Grunde die Ausdrucks-Variante von if/else. Ist die Bedingung truthy, wird a zurückgegeben, sonst b:

Ternaries spielen ihre Stärke aus, wenn es darum geht, kurz und knapp einen Wert auszuwählen. Sobald du sie verschachtelst, wird's allerdings schnell unleserlich – wenn du also a ? b : c ? d : e tippst, greif lieber zu if/else oder einem Lookup-Objekt.

typeof und instanceof

typeof gibt einen String zurück, der den Typ des Operanden beschreibt:

Zwei Stolperfallen solltest du dir einmerken: typeof null liefert "object" (ein Bug aus dem Jahr 1995, der uns für immer erhalten bleibt), und auch Arrays geben "object" zurück. Für Arrays nimmst du deshalb Array.isArray(x), und für null prüfst du mit x === null.

Mit instanceof lässt sich dagegen prüfen, ob ein Objekt aus einem bestimmten Konstruktor hervorgegangen ist:

Spread und Rest benutzen dasselbe ...

Das ... begegnet dir an zwei Stellen. Als Spread entpackt es ein Iterable in einzelne Elemente:

Als Rest fasst er mehrere Werte zu einem Array zusammen – typischerweise in Funktionsparametern oder beim Destructuring:

Gleiche Syntax, gegensätzliche Aufgaben. Spread entpackt, Rest sammelt ein. Welcher von beiden gerade aktiv ist, entscheidet der Kontext: In einem Funktionsaufruf oder Literal wird entpackt, in einer Parameterliste oder einem Destructuring-Pattern wird gesammelt.

Operator-Präzedenz in JavaScript (im Zweifel: Klammern setzen)

Operatoren in JavaScript haben eine feste Rangfolge, die bestimmt, welcher zuerst ausgewertet wird, wenn du sie kombinierst. Multiplikation schlägt Addition, Vergleich schlägt Logik, und so weiter:

Die vollständige Tabelle ist lang, und kein Mensch hat sie komplett im Kopf. Mit einer simplen Gewohnheit deckst du 99 % aller Fälle ab: Sobald du Operatoren mischst und dir bei der Reihenfolge nicht hundertprozentig sicher bist, setz Klammern. Der Code liest sich besser und hängt nicht vom Gedächtnis der Lesenden ab.

Bitweise Operatoren (selten das, was du brauchst)

Der Vollständigkeit halber: &, |, ^, ~, <<, >> und >>> arbeiten auf der Binärdarstellung ganzer Zahlen. Begegnen wirst du ihnen vor allem in Grafik-Code, hardwarenahen Protokollen und ab und zu in APIs mit Flag-Bitmasken.

Ein verbreiteter, aber zweifelhafter Trick: n | 0 schneidet eine Zahl auf einen 32-Bit-Integer zurecht – früher wurde das gerne als schnellerer Ersatz für Math.trunc missbraucht. Lass es lieber sein – Math.trunc ist klarer und funktioniert auch für Zahlen außerhalb des 32-Bit-Bereichs.

Weiter geht's: if/else

Operatoren liefern Werte; if/else nutzt diese Werte, um zu entscheiden, welcher Code-Zweig ausgeführt wird. Das meiste, was du mit den oben gezeigten Vergleichs- und logischen Operatoren machst, landet früher oder später als Bedingung in einem if – und genau darum geht es auf der nächsten Seite.