Bitte warten...

JavaScript: Vergleiche und Bedingungen

► JavaScript-Referenz: Logische Operatoren Vergleichsoperatoren Kontrollfluss if…else

Um Bedingungen prüfen zu können, werden logische und Vergleichsoperatoren verwendet:

OperatorBedeutung
&&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.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      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.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      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.

Code auswählen
1
2
3
4
5
6
      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:

Code auswählen
1
2
3
4
5
6
7
8
9
      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.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      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 =nullfalsetrue01"""0""1""a"[][null][0][1]
typeof xobjectbooleanbooleannumbernumberstringstringstringstringobjectobjectobjectobject
xnullfalsetrue0101a01
!xtruetruefalsetruefalsetruefalsefalsefalsefalsefalsefalsefalse
x == nulltruefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalse
x === nulltruefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalse
x == truefalsefalsetruefalsetruefalsefalsetruefalsefalsefalsefalsetrue
x === truefalsefalsetruefalsefalsefalsefalsefalsefalsefalsefalsefalsefalse
x == 1falsefalsetruefalsetruefalsefalsetruefalsefalsefalsefalsetrue
x === 1falsefalsefalsefalsetruefalsefalsefalsefalsefalsefalsefalsefalse
isNaN(x)falsefalsefalsefalsefalsefalsefalsefalsetruefalsefalsefalsefalse

Mathematisch wird true wie die Zahl 1 behandelt. Daher lassen sich Vergleiche auch in mathematischen Formeln verwenden:

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
      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.

Code auswählen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      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.

Code auswählen
1
2
3
4
5
6
7
      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.");