JavaScript: Vergleiche und Bedingungen
► JavaScript-Referenz: Logische Operatoren Vergleichsoperatoren Kontrollfluss if…else
Um Bedingungen prüfen zu können, werden logische und Vergleichsoperatoren verwendet:
Operator | Bedeutung |
&& | und |
|| | oder |
! | nicht |
< | kleiner als |
<= | kleiner oder gleich |
== | gleich |
!= | ungleich |
=== | identisch |
!== | nicht identisch |
>= | größer oder gleich |
> | größer als |
Mit der Anweisung if kann der Programmfluss entsprechend einer Wahrheitsaussage kontrolliert werden. Auf if folgt in runden Klammern die Bedingung, die erfüllt sein muss (wahr bzw. true), damit die folgende Anweisung ausgeführt wird. Eine Anweisung, die im alternativen Fall von false (unwahr) ausgeführt werden soll, kann mit der Anweisung else ergänzt werden. Zusammengehörige Anweisungen werden in Codeblöcken zusammengefasst, die von geschweiften Klammern {} begrenzt werden.
a = 1;
b = 2;
if (a == b) console.log("a ist gleich b.");
if (a == b) console.log("a ist gleich b.");
else console.log("a ist ungleich b.");
if (a == b) console.log("a ist gleich b.");
else if (a < b) console.log("a ist kleiner als b.");
else console.log("a ist größer als b.");
if (a == b) {
console.log("a ist gleich b.");
check = 0;
} else if (a < b) {
console.log("a ist kleiner als b.");
check = -1;
} else {
console.log("a ist größer als b.");
check = 1;
}
Mit den logischen Operatoren && („und“) und || („oder“) können Bedingungen verknüpft werden.
a = 1;
b = 2;
c = 3;
if (a == c && b == c) { // Verknüpfung mit "und"
console.log("a und b sind gleich c.");
} else {
console.log("a und b sind nicht gemeinsam gleich c.");
}
if (a == c || b == c) { // Verknüpfung mit "oder"
console.log("a oder b ist gleich c.");
} else {
console.log("Weder a noch b ist gleich c.");
}
Dabei ist zu beachten, dass Vergleiche nicht fortgeführt werden, sobald der Rest der Kette für das Ergebnis unbedeutend ist.
Im ersten Beispiel (AND-Verknüpfung) ist a < 0 bereits false und damit sofort die gesamte Klammer. Der Wert von b < 0 ist hier unerheblich. Es wird abgebrochen und es gibt daher auch keine Fehlermeldung aufgrund der nicht deklarierten Variable b.
Im zweiten Beispiel (OR-Verknüpfung) ist a > 0 bereits true und damit sofort die gesamte Klammer. Der Wert von b > 0 ist hier unerheblich. Es wird abgebrochen.
a = 100;
if (a < 0 && b < 0) console.log("wahr"); else console.log("falsch"); // falsch, keine Fehlermeldung
if (b < 0) console.log("wahr"); else console.log("falsch"); // ReferenceError
if (a > 0 || b > 0) console.log("wahr"); else console.log("falsch"); // wahr, keine Fehlermeldung
if (b > 0) console.log("wahr"); else console.log("falsch"); // ReferenceError
In JavaScript gibt es kein exklusives Oder (XOR), bei dem nur eine der verglichenen Bedingungen wahr sein darf, aber nicht beide gemeinsam („entweder…oder“). Damit der Vergleich zweier Bedingungen mit dem Operator || true ergibt, muss lediglich mindestens eine der Bedingungen true ergeben, oder auch beide gemeinsam.
XOR lässt sich aber mit folgender Konstruktion mit dem Operator != („ungleich“) simulieren:
a = 1;
b = 2;
c = 3;
if ((a == c) != (b == c)) { // ein Vergleich ist true, der andere false
console.log("Entweder a oder b ist gleich c, aber nicht beide gemeinsam.");
} else { // beide Vergleiche sind gemeinsam entweder true oder false
console.log("Entweder a und b sind gemeinsam gleich c, oder weder a noch b ist gleich c.");
}
Das Prinzip dahinter ist ja, dass der Codeblock einer if-Anweisung nur ausgeführt wird, wenn die Bedingung insgesamt true ergibt. Je nach Vergleich kann es aber zu unerwarteten Ergebnissen kommen, wenn man bestimmte Verhältnisse nicht beachtet. Im Beispiel wird geprüft, ob x gleich true ist. Das trifft zu, da 1 mit true gleichgesetzt wird. Dieser Umstand kann je nach Anwendungsfall erwünscht sein oder nicht. Möchte man nun sicherstellen, dass x nicht gleich, sondern identisch mit true ist, muss man den Operator === verwenden, denn 1 !== true.
x = 1;
if (x === true) console.log(true);
else console.log(false); // false
if (x == true) console.log(true); // true
else console.log(false);
if (x) console.log(true); // true
else console.log(false);
if (true) console.log(true); // true
else console.log(false);
if (1) console.log(true); // true
else console.log(false);
Welche Vergleiche true oder false sind, ist aus folgender Tabelle zu entnehmen:
x = | null | false | true | 0 | 1 | "" | "0" | "1" | "a" | [] | [null] | [0] | [1] |
typeof x | object | boolean | boolean | number | number | string | string | string | string | object | object | object | object |
x | null | false | true | 0 | 1 | 0 | 1 | a | 0 | 1 | |||
!x | true | true | false | true | false | true | false | false | false | false | false | false | false |
x == null | true | false | false | false | false | false | false | false | false | false | false | false | false |
x === null | true | false | false | false | false | false | false | false | false | false | false | false | false |
x == true | false | false | true | false | true | false | false | true | false | false | false | false | true |
x === true | false | false | true | false | false | false | false | false | false | false | false | false | false |
x == 1 | false | false | true | false | true | false | false | true | false | false | false | false | true |
x === 1 | false | false | false | false | true | false | false | false | false | false | false | false | false |
isNaN(x) | false | false | false | false | false | false | false | false | true | false | false | false | false |
Mathematisch wird true wie die Zahl 1 behandelt. Daher lassen sich Vergleiche auch in mathematischen Formeln verwenden:
console.log(false + false); // 0
console.log(false + true); // 1
console.log(true + true); // 2
x = 1;
a = 1;
if (x < .5) r = a + 25;
else if (x > .5) r = a + 75;
else r = a - 25;
// ist equivalent zu:
r =
(x < .5) * (a + 25) +
(x > .5) * (a + 75) +
(x == .5) * (a - 25);
► JavaScript-Referenz: switch try…catch
SInd für den Verlauf des Programmablaufes keine Vergleiche, sondern lediglich bestimmte Werte einer Variable relevant, kann man auch auf eine Konstruktion mit der Anweisung switch zurückgreifen. Als Argument wird der Anweisung die betreffende Variable (hier: expr) übergeben. Dann wird für einen möglichen Fall der entsprechende Wert hinter dem Schlüsselwort case notiert, gefolgt von einem Doppelpunkt. Darauf folgen alle Anweisungen, die ausgeführt werden sollen, wenn expr den entsprechenden Wert besitzt. Sollen keine weiteren Anweisungen ausgeführt werden, kann man den switch-Block mit break verlassen. So verfährt man mit jedem relevanten Wert. Für alle übrigen nicht erfasste Werte kann nach default: ebenfalls festgelegt werden, welche Anweisungen ausgeführt werden sollen.
expr = "Italien";
switch (expr) {
case "Frankreich":
console.log("Quiche Lorraine");
break;
case "Italien":
console.log("Lasagne al forno");
break;
case "Deutschland":
console.log("Sauerkraut");
break;
default:
console.log("Heute bleibt die Küche kalt.");
}
Der ternäre Operator
► JavaScript-Referenz: Bedingter Operator
In vielen Programmiersprachen existiert der sogenannte ternäre (dreiteilige) oder bedingte Operator (ternary / conditional operator), mit dem einfache if/else-Verhältnisse beschrieben werden können. Im ersten Teil wird die zu prüfende Bedingung formuliert, auf die ein Fragezeichen ? folgt. Darauf folgt das Resultat, wenn die Prüfung true ergibt, ein Doppelpunkt : und das Resultat bei false.
Diese Schreibweise kann den Quelltext vereinfachen, erhöht aber nicht unbedingt die Lesbarkeit des Skripts.
x = 500;
console.log("Alles im " + (x < 1000 ? "grünen" : "roten") + " Bereich.");
// ist gleichbedeutend mit
if (x < 1000) out = "grünen"; else out = "roten";
console.log("Alles im " + out + " Bereich.");