Javascript größer, kleiner, gleich

Javascript Vergleichen und Fehlerfallen

Javascript gleich, größer, kleiner, true und false vergleichen Werte, Variablen oder Anweisungen. Ausgerechnet was am einfachsten klingt, lauert mit versteckten Fehlern: Das doppelte Gleichheitszeichen birgt jede Menge Fallen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Werte vergleichen

Vergleiche von Werten sind das A und O für Javascript – immer wieder wird geprüft, ob zwei Strings gleich sind, ein bestimmter Wert erreicht wurde oder eine Bedingung true oder false ist. Vergleichs-Operatoren werden in Logik-Operationen benutzt, um Gleichheit oder Unterschiede zwischen Variablen oder Werten festzustellen. Gebraucht werden die Vergleiche vor allem in Bedingungen wie while (a < b) und if (x > 0).

Gleich ==

== gibt true zurück, wenn beide Werte gleich sind.

const x = 17;
const y = 17;
if (x === y) // gibt true zurück

Das sieht einfach aus, ist aber nicht immer ohne Heimtücke … besser immer gleich das Trio mit drei Gleichheitszeichen ===

Nicht gleich !=

!= gibt true zurück, wenn die beiden Werte nicht gleich sind.

const x = 17;
const y = 23;
if (x != y) // gibt true zurück

Liest sich: Wenn x nicht gleich y ist …

Drei Gleichheitszeichen, strenges Gleich oder identisch ===

=== Gibt true zurück, wenn die beiden Werte gleich und vom selben Datentyp sind.

const x = 17;
const y = "17";
if (x === y) // gibt false zuück

Liest sich: Wenn x identisch mit y ist, also auch vom selben Datentyp …

Strenges Nicht Gleich !==

!== gibt true zurück, wenn die beiden Werte nicht gleich oder nicht vom selben Datentyp sind.

const x = 17;
const y = 17;
if (x !== y) // gibt false zurück, denn beide Werte sind gleich und vom selben Datentyp.

Liest sich: Wenn x nicht identisch mit y und nicht vom selben Datentyp …

Größer als >

> Gibt true zurück, wenn der Wert auf der linken Seite größer als der Wert auf der rechten Seite ist.

const x = 27;
const y = 23;
if (x > y) // true, denn 27 ist größer als 23

Liest sich: Wenn x größer als y ist …

Kleiner als <

< Gibt true zurück, wenn der Wert auf der linken Seite kleiner als der Wert auf der rechten Seite ist.

const x = 700;
const y = 2000;
if (x < y) // true, denn 700 ist kleiner als 2000

Liest sich: Wenn x kleiner als y ist …

Größer Gleich >=

>= gibt true zurück, wenn der Wert auf der linken Seite größer oder gleich dem Wert auf der rechten Seite ist.

const x = 400;
const y = 400;
if (x >= y) // true, denn 400 ist größer oder gleich 400

Liest sich: Wenn x größer oder gleich y ist …

Kleiner Gleich <=

<= gibt true zurück, wenn der Wert auf der linken Seite kleiner oder gleich dem Wert auf der rechten Seite ist.

const x = 100;
const y = 200;
if (x <= y) // false, denn 200 ist nicht kleiner oder gleich 100

Liest sich: Wenn x kleiner oder gleich y ist …

== und != sind heimtückisch

Das doppelte Gleichheitszeichen == liest sich: Wenn x gleich y ist …. Klingt das nicht einfach?

const a = 2;
const b = "2";
if (a == b) {
	console.log ("Dumm gelaufen")
}

Man spricht von einer lockeren Gleichheit, wenn sich zwei Werte ähneln wie 2 und "2".



			

Das doppelte Gleichheitszeichen ist die Quelle vieler heimtückischer Fehler in Javascript. Das strenge ist gleich (=== Operator) ist die besser Wahl, denn es schützt vor versteckten Fehlern. Das lockere ist gleich (== Operator) liefert zahlreiche unerwartete Ergebnisse aufgrund von Typ-Missverständnissen. Zum Glück gibt es das dreifache Gleichheitszeichen.

Dasselbe gilt auch für das einfache ungleich !=. Also lieber gleich ein Gleichheitszeichen mehr !==.

Und das ist ein Klassiker unter den Fehlern, und ein gemeiner dazu, denn die zwei Fehler in diesem Snippet heben einander auf:

const myObject = { };

const val = myObject.name;
if (val === null) {
   console.log (name + " nicht gefunden");
}

Die Variable val existiert (ist nicht null), denn sie wurde deklariert, aber sie hat keinen sinnvollen Wert, denn myObject.name ist undefined. Eine Variable mit dem Wert undefined führt erst mal nicht zu einer Fehlermeldung.

Richtig wäre

const myObject = { };
const val = myObject.name;
if (val === undefined) {
   console.log (name + " nicht  gefunden");
}

Das könnte man jetzt einfacher gestalten:

const myObject = {};
const val = myObject.name;

if (val) {
	console.log ("val", val + " gefunden");
} 

myObject.name ist undefined, also wird val zu undefined entwickelt. In einem boolschen Kontext (in der if-Abfrage) ist undefined ein falsy. Die Anweisungen im folgenden Block werden nur ausgeführt, wenn myObjekt.name einen truthy ist.

truthy und falsy – wahr oder falsch

Mathematisch zwischen

Wie herausfinden, ob ein Wert zwischen zwei Werten liegt?

const X = 300;
const Y = 521;
const Z = 800;

if (Y < Z && Y > X) {
    console.log(`Y ist kleiner als Z aber größer als X oder mathematisch
	'X < Y < Z' or 'Z > Y > X'
	`);
}

Weitere Operatoren

OperatorBeschreibung
?: (Ternary)"?:" (auch »conditional«, »bedingter« oder Ternary-Operator) führt Zuweisungen abhängig vom Ergebnis einer Abfrage durch und kann als Kurzschrift für if then else benutzt werde.
typeofTestet den Datentyp seines Operanden – z.B. ob eine Variable ein String, eine Zahl oder undefiniert ist.
instanceofTestet ob der linke Operand vom gleichen Typ ist wie der rechte Operand.
deleteLöscht ein selbstgemachtes Objekt, Eigenschaft, Methode oder Array-Element
inPrüft, ob ein Element in einem Objekt enthalten ist
newErzeugt eine Instanz von einem Objekt
thisErzeugt eine Instanz von einem Objekt
voidEvaluiert einen Ausdruck, ohne das Ergebnis zurückzugeben