Java Script Fun und Curiosities

In diesem Post möchte ich ein paar der lustigeren Seiten von JavaScript aufzeigen.

Man kennt „null“ für etwas, das nicht wirklich da ist. Wenn man JavaScript aber fragt, was für ein Typ dieses „nichts“ ist, dann erhält man als Antwort, dass es ein Object ist. Fragt man aber weiter, ob nun dieses null auch eine Instanz von einem Object ist, erhält man ein Nein, da es ja „nichts“ ist.

Was auch so einige Entwickler kennen, ist NaN (not a number).
Auch hier kann man JavaScript fragen, was für ein Typ denn NaN ist. Als Antwort erhält man dann aber die erstaunliche Antwort, dass es eine Number ist. Aber NaN steht doch für „not a number“?

Man kann noch eine Frage an JavaScript stellen, wobei uns die Antwort auch hier wieder etwas verwundert. Fragt man, ob NaN === NaN ist, so erhält man die Antwort: Nein. Da JavaScript einem gewisse Freiheiten lässt, sollte man auch immer bedenken, was man macht.

Ein gutes Beispiel ist das undefined. Undefined steht ja für undefiniert, also z.B. eine erstellte, aber noch nicht initialisierte Variable. Somit kann man in JavaScript folgenden Code schreiben:

var variable;
variable == undefined

Auf den Vergleich antwortet JavaScript, wie erwartet, mit: True. Baut man den Code aber wie folgt um, so erhält man eine andere Antwort:

undefined = „not defined“;
var variable;
variable == undefined

Nun wird JavaScript mit False antworten, da die Variable zwar immer noch undefined ist, aber halt nicht „not defined“.

JavaScript unterstützt einen aber auch in mancher Hinsicht. Man kann den typischen Vergleich der Äpfel und Birnen veranstalten und erhält eine sinnvolle Antwort, wie man im folgenden Code-Beispiel sehen kann:

var a = 5;
var b = „5“;
a == b;

Hier wird versucht zu prüfen, ob die Zahl 5 gleich dem Text 5 ist. JavaScript erkennt, dass jemand wahrscheinlich einfach nur nicht aufgepasst hat, und hilft uns, indem es im Hintergrund beide Variablen zu Zahlen formt und erkennt, dass 5 gleich 5 ist.
Als Entwickler kann es ja aber auch gewollt sein, diesen Vergleich wirklich korrekt auszuführen. Dafür gibt es einen kleinen Trick:

var a = 5;
var b = „5“;
a === b;

Bei dem Vergleich fügt man ein weiteres = an. Dadurch prüft man nicht nur, was in der Variablen steht, sondern auch noch, ob ihr Datentyp überhaupt gleich ist. Somit erhält man als Antwort der Abfrage False, da zwar 5 irgendwie ja der Text 5 ist, aber eine Zahl nun mal kein Text ist.
Leider hat JavaScript an manchen Stellen aber auch leichte Probleme mit dem Rechnen. Jeder von uns weiß, dass 1 + 2 = 3 ist. JavaScript ist auch dieser Meinung. Verändert man diese Rechnung aber nur ein wenig, so wird die Antwort doch etwas erstaunlicher: Rechnet man 0,1 + 0,2 und erwartet 0,3 als Ergebnis, so wird man von JavaScript enttäuscht, da dieses behauptet, Annahme stimme nicht.
Dies liegt an der Maschinengenauigkeit. Diese baut leider Rundungsfehler in die Rechnung ein, so dass die obere Gleitkommarechnung als Ergebnis folgendes hat: 0,30000000000000004.

JavaScript kann aber auch sehr lustige Sachen rechnen, dies müssen auch nicht immer ersichtliche Zahlen sein. So kann man true zu true addieren und erhält… richtig, 2.
Das ist aber sehr einfach zu erklären. Im Hintergrund ist die Darstellung von true eine 1.

Man kann auch fleißig Zahlen und Texte verrechnen, da wir ja vorher schon gelernt haben, dass JavaScript bei solchen Aktionen mitdenkt. Nur ist das Problem, dass es nicht immer gleich mitdenkt. Im Fall folgender Rechnung ist die Antwort doch etwas suspekt:

1 + „23“ – 10

Ist ja ganz einfach: Wir haben schon gelernt das JavaScript den Text zu einer Zahl machen kann. Also muss ich nur 1 + 23 = 24 und 24 – 10 = 14 rechnen. Leider sieht das JavaScript etwas anders. Die Antwort von JavaScript ist 113, da folgendes errechnet wird: 1 + „23“ = 123 (der Text wird nur an die erste Zahl angehängt) und 123 – 10 = 113.Somit haben wir verstanden das JavaScript Texte und Zahlen nicht immer verrechnet, sondern auch manchmal anhängt. Dann ist folgendes ja auch klar:

„2“ + 1

Hier ist nach unserem jetzigen Wissen die Antwort 21, was uns JavaScript auch bestätigt.
Was passiert aber in folgendem Fall?

„2“ – 1

Hier lautet die Antwort 1, da nun der String wieder in eine Zahl geformt wird. Schon etwas verwirrend, dass JavaScript ab und zu mitdenkt und dann auch wieder nicht.

Aber nicht nur beim Rechnen, sondern auch beim Vergleichen antwortet JavaScript nicht immer so, wie wir es erwarten.

3 > 2

Wir wissen alle, auch JavaScript, dass das korrekt ist. Aber wie sieht es mit folgender Frage aus?

3 > 2 > 1

Das ist eindeutig auch richtig. JavaScript sieht das aber anders: 3 > 2 ist richtig für JavaScript also true, und wir haben schon gelernt das true ja auch im Hintergrund eine 1 ist. Somit wäre der zweite Teil der Abfrage 1 > 1 und das ist ja nicht korrekt.

JavaScript bietet uns aber auch diverse Funktionen an. Eine davon ist das Sortieren einer Liste.
Wenn man nun also folgende List sortiert, dann wissen wir alle was das Ergebnis ist, hoffen wir jedenfalls:

[10, 1, 3].sort()

Wie wir vorher schon gelernt haben wäre es ja zu einfach, wenn die Antwort [1, 3, 10] wäre. Nein die Antwort lautet [1, 10, 3]. Aber warum denn das jetzt?
Leider formt die sort Funktion die Zahlen in Strings, also Texte, und sortiert dann. Und als String steht halt bei der 10 vorne eine 1, die natürlich kleiner als eine 3 ist. JavaScript kann einen schon ganz schon verwirren.

Zum Schluss machen wir einfach mal aus einem Bakterium eine Banane. Wie das geht, ist ganz einfach: Wir hängen Buchstaben aneinander, um das Wort bacteria zu bilden und schreiben es klein:

(„b“ + „a“ ++“cteri“ + „a“).toLowerCase()

Ja gut, ich habe da zwar zweimal auf das + gedrückt, aber das wird doch nicht so schlimm sein.
So JavaScript antwortet nun „banana“.
Wie konnte das nun aber passieren?
Was passiert denn, wenn wir das einfach mal nicht klein schreiben?

(„b“ + „a“ ++“cteri“ + „a“)

Nun lautet die Antwort „baNaNa“.

Nun erkennt man, dass ja komischerweise NaN, also not a number, enthalten ist. Aber da stehen doch nur Texte? Leider hat das ++ hier nun die Auswirkung das JavaScript versucht die cteri um 1 hochzuzählen. Das geht aber nicht, da das ja keine Zahl ist.

Ich hoffe ich konnte Sie ein wenig zum Schmunzeln bringen. Dies sind zwar einige Kuriositäten von JavaScript, soll aber in keiner Weise JavaScript schlecht reden. JavaScript ist eine sehr mächtige und auch heutzutage wichtige Sprache, die ihre Fallstricke hat.

Autor: René Haberstroh, Senior Developer

Autor: René Haberstroh, Senior Developer