Die `==`-Falle und Type Coercion in JavaScript

Stell dir drei simple Codezeilen vor: Ist ein leerer String gleich null ("" == 0)? Ist ein leeres Array gleich false ([] == false)? Und ist NaN gleich sich selbst (NaN == NaN)?

Wenn du JavaScript diese Fragen mit dem Operator == (lose Gleichheit) stellst, liefern die ersten beiden true, die letzte false. Als wäre das nicht schon seltsam genug: Obwohl ein leerer String gleich null ist, ist der String null ("0") nicht gleich einem leeren String (""). Und null == 0? False. Prüfst du aber null >= 0, ist das Ergebnis true.

Auf den ersten Blick wirken diese Ergebnisse völlig willkürlich und kaputt, aber nichts davon ist Zufall. Jedes einzelne folgt einer dokumentierten Regel.

Algorithmus und Type Coercion

Der Mechanismus hinter all diesen Merkwürdigkeiten ist die Type Coercion (implizite Typumwandlung). Wenn du zwei Werte mit == vergleichst und ihre Typen sich unterscheiden, wandelt JavaScript sie unter der Haube um, um sie auf einen gemeinsamen Typ zu bringen.

Nimm zum Beispiel [] == false:

• false wird zuerst in eine Zahl umgewandelt und wird zu 0. ([] == 0)
• Das leere Array ([]) wird in einen primitiven Wert umgewandelt, was einen leeren String ("") ergibt. ("" == 0)
• Der leere String wird dann in eine Zahl umgewandelt und wird zu 0.
• Zum Schluss läuft der Vergleich 0 == 0, der zu true ausgewertet wird.

Die einzige Ausnahme von der üblichen numerischen Umwandlung ist null. Bei der losen Gleichheit (==) ist null nur gleich undefined; es wird nicht in eine Zahl umgewandelt. Relationale Operatoren wie >= (größer oder gleich) machen diese Ausnahme dagegen nicht und wandeln null in null um. Deshalb ist null == 0 false, aber null >= 0 true!

Die Regel und die Lösung

Du musst nicht jeden Umwandlungsschritt und jeden Sonderfall auswendig lernen. Die Lösung besteht aus einer einzigen Gewohnheit und einer goldenen Regel: Nutze immer das dreifache Gleichheitszeichen (===).

Der Operator === prüft auf strikte Gleichheit. Er wandelt nie Typen um. Passen die Typen auf beiden Seiten nicht zusammen, gibt er sofort false zurück, ohne irgendeine Umwandlung durchzuführen.

Es gibt nur eine praktische Ausnahme: Wenn du bewusst gleichzeitig auf null und undefined prüfen willst, ist deger == null in Ordnung. Überall sonst erspart dir === diese Kopfschmerzen.

Fazit

Wenn du die Diskussionen „Warum hat sich das so verhalten?“ in deinem Team beenden willst, aktiviere in deinem Projekt die ESLint-Regel eqeqeq. So räumst du zufällige lose Gleichheitsprüfungen in deiner gesamten Codebasis ein für alle Mal auf.