JS – Teil 5: if Bedingungen

Programmierung bedeutet Dynamik. Unsere bisherigen JavaScript Mittel wie Variablen und Funktionen bilden zwar das Fundament, auf dem wir aufbauen, aber leider noch nicht die Möglichkeit zur Dynamik – unsere Scripts würden nun immer stur von oben nach unten ablaufen und auf demselben Weg ausgeführt werden. Unsere erste Möglichkeit, auf etwas zu reagieren, stellt nun die if Bedingung dar. Wie wir diese in JavaScript verwenden sehen wir uns im Artikel genauer an.

Was ist eine JavaScript if Bedingung?

If Bedingungen folgen einem ganz simplen Prinzip: Wenn eine bestimmte Bedingung erfüllt ist, führe ein Stück Code aus. Zusätzlich haben wir noch die Möglichkeit, optional zu sagen Andernfalls, führe dieses andere Stück Code aus.
In der Praxis sieht das Ganze dann so aus:

Die Bedingungen innerhalb der Klammer werden uns noch länger verfolgen, denn auch später in Schleifen spielen sie eine wichtige Rolle. Sehen wir uns also etwas genauer an, wie sie evaluiert werden.

 

Wie wird eine Bedingung evaluiert?

Grundsätzlich wird eine JavaScript if Bedingung ausgeführt, wenn sie den boolschen Wert true ergibt. Allerdings können wir alle möglichen Werte in die Klammer eintragen – einen String, ein Array, eine Zahl oder auch einen Funktionsaufruf. Woher weiß JavaScript nun, was es tun soll? Woher weiß es, ob der String „Hallo Welt“ bedeutet, dass ich meinen if-Codeblock ausführen möchte oder nicht?

Dafür evaluiert JavaScript die Bedingung nach einem bestimmten Satz Regeln und entscheidet dann ob der Wert nun true oder false ergibt. Jeder andere Datentyp hat ebenfalls ein eingebautes true oder false, das wird auch als truthy und falsy bezeichnet – also kein boolscher Wert aber der Hinweis ob eine if Bedingung mit diesem Wert ausgeführt werden würde oder nicht.

 

 

Eine Bedingung wird nur dann als false interpretiert, wenn sie einen der folgenden Werte hat:

  1. false – klar, das boolsche false
  2. 0 – die Zahl 0
  3. „“ – Ein leerer String
  4. null – Der spezielle null Wert
  5. undefined – Der undefined Wert, der bedeutet, eine Variable hat noch keinen Wert zugewiesen bekommen
  6. NaN – Ein Spezialwert, der für Not a Number steht und ungültige Zahlenwerte darstellt

Alle anderen Werte werden automatisch als true interpretiert. Achtung, dabei sind auch einige Fallstricke wie zum Beispiel:

  • „0“ – Ein String mit der Zahl 0 ist kein leerer String!
  • „false“ – Ein String mit dem Wort false ist kein leerer String!
  • Leere Arrays
  • Leere Objekte

Sehen wir uns noch ein echtes Beispiel an.

In diesem Beispiel geben wir der Variable x einen Wert, der keinem der oben genannten falsys entspricht. Aus diesem Grund interpretiert JavaScript diesen Wert als truthy, führt den Code aus und wir sehen den Text Bedingung wurde ausgeführt in unserer Konsole.

 

 

else und else if

Stellen wir uns folgende Situation vor:

Für den Fall, dass wir mehr als fünf Besucher haben, möchten wir eine Nachricht Juhu, jede Menge Besucher ausgeben. Andernfalls die Nachricht Schade, noch nicht genug Besucher.

Wir könnten das natürlich mit zwei if Bedingungen lösen.

Keine Angst, die Operatoren > und <= schauen wir uns ausführlich im nächsten Artikel an.
Dieser Code funktioniert zwar, ist aber unpraktisch.

  1. Werden jedes mal beide if Bedingungen überprüft, auch wenn nur eine davon überhaupt erfüllt werden kann (eine Zahl kann nicht größer als 5 und kleiner als 5 sein).
  2. Verlängert es den Code und macht ihn unleserlicher.

Genau für solche Fälle gibt es noch das else Schlüsselwort, das wir auch schon im ersten Beispiel ganz oben gesehen haben. Dieses heißt einfach Wenn die Bedingung nicht erfüllt ist, führe folgenden Code aus.
Abgeändert sieht unser Besucherbeispiel dann so aus:

Das sieht schon etwas besser aus und etwas schneller ist es auch, weil nach einer erfolgreichen Prüfung der Bedingung direkt klar ist, welcher der beiden Codeblöcke ausgeführt werden soll.

 

 

Wie sieht es nun mit dem Fall aus, dass wir für mehrere Bedingungen unterschiedliche Dinge ausführen wollen? Vielleicht verschiedene Meilensteine bei unseren Besuchern? Genau aus diesem Fall können wir auch ein else mit einem weiteren if Block zu einem else if verknüpfen.

Dabei werden alle Bedingungen eine nach der anderen geprüft. Sobald eine Bedingung true ergibt wird der dazu gehörige Code ausgeführt und der Rest wird übersprungen. So können wir beliebig viele Bedingungen überprüfen von denen aber nur eine einzige ausgeführt werden kann.

 

Nun kennen wir einen weiteren Baustein in der Programmierung. Im nächsten Artikel werden wir uns hier noch etwas ausgiebiger mit den Bedingungen beschäftigen, aber das war jetzt der Grundstein um unseren Programmen eine gewisse Dynamik zu verpassen. Hast du Anregungen? Hinterlass mir einen Kommentar unter dem Artikel! Möchtest du immer auf dem neuesten Stand bei den Artikeln sein, dann folge mir einfach bei Twitter unter @AbHeuteCoden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*