EMZETT.
Login

Emzett Wiki

JavaScript: Operatoren und Vergleiche

Properties1
tagsprogrammiersprachen, javascript

3 Min. Lesezeit

Kurz: Nutze immer = und !. Der lockere Vergleich == führt zu verblüffenden Ergebnissen. Beachte auch: Strings werden Zeichen für Zeichen verglichen (“10” < “9” ist wahr), Zahlen numerisch.

Teil des Kurses JavaScript

Kapitel 6 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Vergleiche

OperatorBedeutung
===gleich (Wert und Typ)
!==ungleich
< > <= >=größer/kleiner
==, !=gleich/ungleich mit Typumwandlung (vermeiden)
console.log(5 === 5, 5 === "5", 5 == "5");
console.log(0 == false, 0 === false);
console.log(null == undefined, null === undefined);
console.log("a" < "b", "B" < "a", "10" < "9", 10 < 9);

Ausgabe:

true false true
true false
true false
true true true false

Nutze immer === und !==. Der lockere Vergleich == führt zu verblüffenden Ergebnissen. Beachte auch: Strings werden Zeichen für Zeichen verglichen ("10" < "9" ist wahr), Zahlen numerisch.

Logische Operatoren

OperatorNameErgebnis
&&undwahr, wenn beide wahr
||oderwahr, wenn mindestens einer wahr
!nichtkehrt um
const alter = 20, hatTicket = true;
console.log(alter >= 18 && hatTicket);
console.log(alter < 18 || hatTicket);
console.log(!hatTicket);

Ausgabe:

true
true
false

Kurzschluss-Auswertung

&& und || liefern nicht nur true/false, sondern einen der beiden Operanden, und werten den rechten nur bei Bedarf aus:

console.log("Mia" || "Standard");     // links truthy
console.log("" || "Standard");        // links falsy
console.log(0 && "wird nie gezeigt"); // links falsy
console.log(5 && "rechts");           // links truthy
const name = "";
console.log(name || "Gast");

Ausgabe:

Mia
Standard
0
rechts
Gast

Nullish Coalescing ?? und Optional Chaining ?.

|| ersetzt jeden falsy Wert, auch 0 und "". ?? ersetzt nur null und undefined:

const punkte = 0;
console.log(punkte || 10);     // 10 (oft ungewollt)
console.log(punkte ?? 10);     // 0
const nutzer = { name: "Mia" };
console.log(nutzer.adresse?.stadt);        // undefined, kein Fehler
console.log(nutzer.adresse?.stadt ?? "unbekannt");

Ausgabe:

10
0
undefined
unbekannt

Mit ?. brichst du den Zugriff ab, sobald ein Wert null oder undefined ist, statt einen Fehler zu werfen.

Ternärer Operator

const alter = 16;
console.log(alter >= 18 ? "volljährig" : "minderjährig");

Ausgabe:

minderjährig

Zuweisungsoperatoren

let x = 10;
x += 5; x -= 3; x *= 2; x /= 4; x **= 2; x %= 7;
console.log(x);
let n = 0;
n++; n++; --n;
console.log(n);
let a = null;
a ??= "neu";       // nur zuweisen, wenn null/undefined
let b = 0;
b ||= 99;          // zuweisen, wenn falsy
console.log(a, b);

Ausgabe:

1
1
neu 99

Rangfolge (Auszug)

Von stark nach schwach: ! und ++, dann **, * / %, + -, Vergleiche, ===, &&, ||, ??, ?:, Zuweisung. Setze im Zweifel Klammern: (a + b) * c.

Bitoperatoren (kurz)

&, |, ^, ~, <<, >> arbeiten auf einzelnen Bits, etwa bei Flags und Masken:

console.log(5 & 3, 5 | 3, 5 ^ 3, 1 << 4, 255 >> 2);

Ausgabe:

1 7 6 16 63

Merke

  • Immer === und !== verwenden
  • &&, || liefern einen der Operanden (Kurzschluss)
  • ?? ersetzt nur null/undefined, || jeden falsy Wert
  • ?. verhindert Fehler bei fehlenden Zwischenwerten
  • bedingung ? a : b ist die Kurzform von if/else

Übungsaufgabe

Gib mit dem ternären Operator "gerade" oder "ungerade" für eine Zahl aus und setze mit ?? einen Standardwert für eine fehlende Eigenschaft.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Zahlen und das Math-Objekt

Weiter: Text: Strings

Alle Kapitel: JavaScript im Überblick

Graphansicht

Backlinks