Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

True alias truthy versus false alias falsy – wichtig für das Verständnis von Bedingungen

Als Bedingung in einer if-Abfrage können wir jede Art von Wert schreiben – egal ob ein String (sprich eine Zeichenkette), eine Zahl oder auch ein logischer Wert (Boolean).

if ( vergleichsvariable == 3 ) { … }
if ( vergleichsvariable == "Hallo" ) { … }
if ( vergleichsvariable == true ) { … }

Warum funktioniert das eigentlich?

Um die Möglichkeiten der if-Abfragen voll ausnutzen zu können und um Fehler zu vermeiden, sollte man das Konzept von truthy und falsy kennen (und können). Was steckt nun dahinter.

Wir haben bei den if-Bedingungen gesehen, dass die folgende Bedingung zur Ausführung des Codes in den Klammern führt:

var vergleichszahl = 3;
if ( vergleichszahl == 3 ) {
    // Bedingung war erfüllt
}

Wenn unsere Bedingung erfüllt war, dann ging es innerhalb der geschweiften Klammern weiter. Jetzt greift die erste Überlegung, dass die Bedingung erfüllt ist, wenn der Ausdruck korrekt, sprich wahr ist. Bei Computermenschen nennt sich das „true“.

Für das Ergebnis einer Bedingung haben wir nur 2 Zustände:

  • Erfüllt, sprich korrekt bzw. „true“
  • Nicht erfüllt, sprich falsch bzw. „false“

Wir haben hier also durch diese 2 Zustände einen logischen Datentyp – ein Boolean. Mehr dazu folgt weiter unten.

Was ist aber, wenn unser Vergleich wie folgt aussieht?

var vergleichszahl = "";
if ( vergleichszahl == 3 ) { console.log("innerhalb geschweiften Klammern")}
    // Bedingung war erfüllt
}

Der Variablen „vergleichszahl“ wurde ein leerer String zugewiesen was somit nicht 3 ist – daher wird der Code zwischen den geschweiften Klammern nicht ausgeführt. Das ist ein korrektes und vorhersehbares Verhalten.

Wenn unserer Abfrage vereinfacht so aussieht, dass wir nur wissen wollen, ob die Variable „vergleichszahl“ gesetzt ist? Unser JavaScript-Code würde wie folgt aussehen.

var vergleichszahl = "";
if ( vergleichszahl ) { console.log("innerhalb geschweiften Klammern")}

Beim Ausführen des Programmes wird der Code innerhalb der Klammern nicht ausgeführt. Die Abfrage ergab somit „false“.

Eigentlich schon einmal merkwürdig. Wir haben die Variable „vergleichszahl“ gesetzt, aber für unsere if-Abfrage scheint diese nicht zu existieren.

Nennen wir das Ergebnis des Vergleichs jetzt lieber „falsy“ – den von der Logik her wiederspricht die Reaktion des Programmes erst einmal dem bisher gewohnten Verhalten.

Setzen wir ein Leerzeichen in unsere Abfrage, dann ergibt die Abfrage „true“ und der Code in den geschweiften Klammern wird ausgeführt. Nennen wir das Ergebnis des Vergleichs jetzt lieber „truthy“ – den von der Logik her wiederspricht das Verhalten erst einmal.

var vergleichszahl = " ";
if ( vergleichszahl ) { console.log("innerhalb geschweiften Klammern")}

Ein weiteres schönes Beispiel – wir setzen die Vergleichszahl auf den Wert 0. Es ist also nun ein Wert gesetzt. Was wird bei unserer Abfrage passieren?

var vergleichszahl = 0;
if ( vergleichszahl ) { console.log("innerhalb geschweiften Klammern")}

Das Ergebnis ist „falsy“ – wir kommen also nicht in die geschweifte Klammer und der Code wird dort nicht ausgeführt.

Wäre eine andere Zahl (egal was) gesetzt, würde die Klammer ausgeführt!

var vergleichszahl = 2;
if ( vergleichszahl ) { console.log("innerhalb geschweiften Klammern")}

Was ist passiert? Die Zahl 0 wird als „false“ interpretiert und die Zahl 1 als „true“. Eigentlich haben wir im Vergleich eine Zahl gemeint und nicht eine Bolean (sprich „true“ bzw. „false“).

Und jetzt können wir einfach einmal ansehen, wie JavaScript auf verschiedene Zustände reagiert.

Was passiert da eigentlich?

Intern führt JavaScript automatisch eine Konvertierung des Datentyps durch – wir brauchen als Ergebnis nur „wahr“ oder „falsch“ als Rückmeldung für die Bedingung. Durch diese Typ-Konvertierung (engl. „Typecasting“) erhalten wir dieses anfangs nicht direkt einleuchtende Verhalten – daher spricht man gerne von „truthy“ und „falsy“ anstelle von „true“ und „false“.

In einer Tabelle wird das Verhalten dann schnell durchschaubar:

truthy falsy
Zeichenketten (string) alle nichtleeren Strings ""
Zahlen (number) alle Zahlen außer 0 0, NaN
undefined undefined

Tabelle mit Beispielen:

truthy falsy
if (true)
if (" ")
if (9)
if (5.12)
if (-2.1)
if ({})
if ([])
if ("foo")
if (new Date())
if (Infinity)
if (-Infinity)
if (false)
if ("")
if ('')
if (``)
if (0)
if (null)
if (undefined)
if (NaN)
if (document.all)

Die wichtigste Erkenntnis ist: JavaScript denkt positiv – erst einmal werden alle Werte als „truthy“ angesehen, solange diese nicht „falsy“ sind. Oder nach der üblichen Rechtsprechung: Jeder Angeklagte vor Gericht muss als unschuldig angesehen werden, solange seine Schuld nicht bewiesen ist.

Das Verhalten bei einer Abfrage mit truthy und falsy sollte verstanden sein um Logikprobleme zu vermeiden.