JavaScript - Vergleichsoperatoren

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute tauchen wir ein in die magische Welt der Vergleichsoperatoren. Keine Sorge, wenn ihr vorher noch nie eine Zeile Code geschrieben habt – ich werde euer freundlicher Guide auf dieser aufregenden Reise sein. Also, holt euch eure Zauberstäbe (meine ich, Tastaturen) und los geht's!

JavaScript-Vergleichsoperatoren

Vergleichsoperatoren sind wie die Richter in der Programmierwelt. Sie schauen sich zwei Werte an und entscheiden, wie sie zueinander in Beziehung stehen. Sind sie gleich? Ist einer größer als der andere? Diese Operatoren helfen uns dabei, Entscheidungen in unserem Code zu treffen, genau wie wir im echten Leben Entscheidungen treffen.

Schauen wir uns alle Vergleichsoperatoren an, die wir heute behandeln werden:

Operator	Name	Beispiel
==	Gleichheit	x == y
!=	Ungleichheit	x != y
===	Strikte Gleichheit	x === y
!==	Strikte Ungleichheit	x !== y
>	Größer als	x > y
>=	Größer oder gleich	x >= y
<	Kleiner als	x < y
<=	Kleiner oder gleich	x <= y

Wie wird verglichen?

Bevor wir uns mit jedem Operator beschäftigen, lassen Sie uns verstehen, wie JavaScript Werte vergleicht. Es ist nicht allzu unterschiedlich von dem, wie wir Dinge im echten Leben vergleichen!

1. Wenn wir Zahlen vergleichen, ist es einfach. JavaScript überprüft, welche Zahl größer ist.
2. Für Strings vergleicht JavaScript sie zeichenweise, basierend auf ihren Unicode-Werten.
3. Wenn wir verschiedene Typen vergleichen (wie eine Zahl und einen String), versucht JavaScript normalerweise, einen Typ in den anderen zu konvertieren, bevor es vergleicht.

Nun schauen wir uns jeden Operator im Detail an.

JavaScript-Gleichheitsoperator (==)

Der Gleichheitsoperator (==) überprüft, ob zwei Werte gleich sind, aber er ist ein bisschen flexibel. Er kann Typen konvertieren, bevor er vergleicht. Sehen wir uns einige Beispiele an:

console.log(5 == 5);     // true
console.log(5 == "5");   // true
console.log(true == 1);  // true
console.log(null == undefined);  // true

Im ersten Beispiel ist klar, warum wir true erhalten. Im zweiten Beispiel konvertiert JavaScript den String "5" in eine Zahl, bevor er vergleicht. Das dritte Beispiel könnte euch überraschen – JavaScript betrachtet true als 1 und false als 0. Das letzte Beispiel zeigt, dass null und undefined mit dem == Operator als gleich betrachtet werden.

JavaScript-Ungleichheitsoperator (!=)

Der Ungleichheitsoperator (!=) ist wie das Gegenteil von ==. Er überprüft, ob zwei Werte nicht gleich sind.

console.log(5 != 6);     // true
console.log(5 != "5");   // false
console.log(true != 1);  // false

Wie == führt er auch eine Typkonvertierung durch, bevor er vergleicht.

JavaScript-Strikter Gleichheitsoperator (===)

Nun treffen wir den strengen Gleichheitsoperator (===). Dieser Operator ist wie der strikte ältere Bruder des == Operators. Er überprüft nicht nur den Wert, sondern stellt auch sicher, dass die Typen gleich sind.

console.log(5 === 5);     // true
console.log(5 === "5");   // false
console.log(true === 1);  // false
console.log(null === undefined);  // false

Seht ihr, wie die Ergebnisse sich von == unterscheiden? Der strikte Gleichheitsoperator führt keine Typkonvertierung durch.

Strikter Ungleichheitsoperator (!==)

Der strikte Ungleichheitsoperator (!==) ist das Gegenteil von ===. Er überprüft, ob zwei Werte nicht gleich im Wert oder Typ sind.

console.log(5 !== 6);     // true
console.log(5 !== "5");   // true
console.log(true !== 1);  // true

JavaScript-Größer-als-Operator (>)

Der größer-als-Operator (>) überprüft, ob der linke Wert größer als der rechte Wert ist.

console.log(10 > 5);   // true
console.log(5 > 10);   // false
console.log(10 > 10);  // false
console.log("b" > "a");  // true (vergleicht Unicode-Werte)

Denkt daran, wenn wir Strings vergleichen, basiert es auf ihren Unicode-Werten, nicht auf ihrer alphabetischen Ordnung!

Größer oder gleich (>=) Operator

Der größer oder gleich Operator (>=) überprüft, ob der linke Wert größer oder gleich dem rechten Wert ist.

console.log(10 >= 5);   // true
console.log(10 >= 10);  // true
console.log(5 >= 10);   // false

JavaScript-Kleiner-als-Operator (<)

Der kleiner-als-Operator (<) überprüft, ob der linke Wert kleiner als der rechte Wert ist.

console.log(5 < 10);   // true
console.log(10 < 5);   // false
console.log(10 < 10);  // false

JavaScript-Kleiner oder gleich (<=) Operator

Der kleiner oder gleich Operator (<=) überprüft, ob der linke Wert kleiner oder gleich dem rechten Wert ist.

console.log(5 <= 10);   // true
console.log(10 <= 10);  // true
console.log(10 <= 5);   // false

Vergleichen von null, undefined und NaN

Das Vergleichen von besonderen Werten wie null, undefined und NaN kann knifflig sein. Sehen wir uns einige Beispiele an:

console.log(null == undefined);  // true
console.log(null === undefined);  // false
console.log(NaN == NaN);  // false
console.log(NaN === NaN);  // false
console.log(null > 0);  // false
console.log(null == 0);  // false
console.log(null >= 0);  // true

Das Verhalten mit null und undefined kann überraschend sein. NaN ist nicht gleich einem anderen Wert, nicht einmal sich selbst! Und null wird in Vergleichen in 0 umgewandelt, aber nicht in Gleichheitsprüfungen.

Und da habt ihr es, Leute! Wir haben die Welt der JavaScript-Vergleichsoperatoren durchquert. Denkt daran, Übung macht den Meister, also fürchtet euch nicht, diese Operatoren in eurem eigenen Code auszuprobieren. Frohes Coden!

Credits: Image by storyset