Das beste JavaScript-Meme, das ich je gesehen habe, ausführlich erklärt

TLDR: Zwingen Sie sich, Triple Equals zu verwenden.

Ich habe dieses JavaScript-Mem unbeabsichtigt auf Reddit gefunden und es ist das beste, das ich je gesehen habe.

best-js-meme-to-date-2

Sie können die Richtigkeit dieses Memes überprüfen, indem Sie jedes Codefragment in den Entwicklertools ausführen. Das Ergebnis ist nicht überraschend, aber dennoch enttäuschend.

Natürlich hat mich dieses kleine Experiment dazu gebracht, mich zu wundern ...

Warum passiert das?

warum passiert das

Mit der Erfahrung habe ich gelernt, die glatten Seiten von JavaScript zu akzeptieren und gleichzeitig die stacheligen Kiefern zu bewundern. Trotzdem haben mich die Details dieses Eckfalls immer noch geklaut.

Es ist genau so, wie Kyle Simpson sagt ...

"Ich glaube, niemand kennt JS jemals wirklich, sowieso nicht ganz."

Wenn diese Fälle auftreten, konsultieren Sie am besten die Quelle - die offizielle ECMAScript-Spezifikation, aus der JavaScript erstellt wurde.

Lassen Sie uns anhand der vorliegenden Spezifikation genau verstehen, was hier vor sich geht.

Panel 1 - Einführung in Zwang

Panel-1-1

Wenn Sie 0 == "0"in Ihrer Entwicklerkonsole ausgeführt werden, warum wird diese zurückgegeben true?

0ist eine Zahl und "0"ist eine Zeichenfolge, sie sollten niemals gleich sein! Die meisten Programmiersprachen respektieren das. 0 == "0"In Java wird beispielsweise Folgendes zurückgegeben:

error: incomparable types: int and String 

Das macht durchaus Sinn. Wenn Sie ein int und einen String in Java vergleichen möchten, müssen Sie sie zuerst in denselben Typ konvertieren.

Aber das ist JavaScript!

Dies ist Javascript

Wenn Sie zwei Werte über vergleichen ==, kann einer der Werte einem Zwang ausgesetzt sein .

Zwang - Automatisches Ändern eines Werts von einem Typ zu einem anderen.

Automatisch ist hier das Schlüsselwort. AnstattIhre Typen explizit zu konvertieren, erledigt JavaScript dies hinter den Kulissen für Sie.

Drecksack-Javascript

Dies ist praktisch, wenn Sie es absichtlich ausnutzen, aber möglicherweise schädlich, wenn Sie sich der Auswirkungen nicht bewusst sind.

Hier ist die offizielle ECMAScript-Sprachspezifikation dazu. Ich werde den relevanten Teil umschreiben:

Wenn x Number und y String ist, geben Sie x == ToNumber (y) zurück.

Also für unseren Fall von 0 == "0":

Da 0 Number und "0" String ist, geben Sie 0 == ToNumber ("0") zurück.

Unsere Saite "0"wurde heimlich umgebaut 0und jetzt haben wir ein Match!

0 == "0" // true // The second 0 became a number! // so 0 equals 0 is true.... 

Diese Zeichenfolge wurde heimlich zu einer Nummer

Verrückt oder? Nun gewöhne dich daran, wir sind noch nicht einmal zur Hälfte fertig.

Panel 2 - Arrays werden ebenfalls gezwungen

Panel-2

Dieser Unsinn ist nicht auf Grundelemente wie Zeichenfolgen, Zahlen oder Boolesche Werte beschränkt. Hier ist unser nächster Vergleich:

0 == [] // true // What happened...? 

Wieder Zwang! Ich werde den relevanten Teil der Spezifikation umschreiben:

Wenn x String oder Number und y Object ist, geben Sie x == ToPrimitive (y) zurück.

Drei Dinge hier:

1. Ja, Arrays sind Objekte

Arrays sind Objekte

Tut mir leid, dass du es kaputt gemacht hast.

2. Leeres Array wird zu leerer Zeichenfolge

Entsprechend der Spezifikation sucht JS zunächst nach der toStringMethode eines Objekts , um es zu erzwingen.

Verbindet bei Arrays toStringalle Elemente und gibt sie als Zeichenfolge zurück.

[1, 2, 3].toString() // "1,2,3" ['hello', 'world'].toString() // "hello,world" 

Da unser Array leer ist, haben wir nichts zu verbinden! Deshalb...

[].toString() // "" 

leeres Array zwingt zu leerem String-1

Die Spezifikation ToPrimitiveverwandelt dieses leere Array in eine leere Zeichenfolge. Referenzen sind hier und hier für Ihre Bequemlichkeit (oder Verwirrung).

3. Die leere Zeichenfolge wird dann zu 0

leere Zeichenketten werden zu 0

Sie können dieses Zeug nicht erfinden. Nachdem wir das Array dazu gezwungen haben "", kehren wir zum ersten Algorithmus zurück ...

Wenn x Number und y String ist, geben Sie x == ToNumber (y) zurück.

So für 0 == ""

Da 0 Number und "" String ist, geben Sie 0 == ToNumber ("") zurück.

ToNumber("") gibt 0 zurück.

Deshalb 0 == 0noch einmal ...

Zwang jedes Mal-2

Panel 3 - Kurzer Rückblick

Panel-3-1

Das ist wahr

0 == "0" // true 

Weil Zwang dies zu etwas macht 0 == ToNumber("0").

Das ist wahr

0 == [] // true 

Weil Zwang zweimal läuft:

  1. ToPrimitive([]) gibt leere Zeichenfolge
  2. Dann ToNumber("")gibt 0.

Also dann sag mir ... nach den oben genannten Regeln, was soll das zurückgeben?

"0" == [] 

Panel 4 - FALSE!

Panel-4-1

FALSCH! Richtig.

Dieser Teil ist sinnvoll, wenn Sie die Regeln verstanden haben.

Hier ist unser Vergleich:

"0" == [] // false 

Nochmals auf die Spezifikation verweisen:

Wenn x String oder Number und y Object ist, geben Sie x == ToPrimitive (y) zurück.

Das bedeutet...

Da "0" String und [] Object ist, geben Sie x == ToPrimitive ([]) zurück.

ToPrimitive([])Gibt eine leere Zeichenfolge zurück. Der Vergleich ist jetzt geworden

"0" == "" 

"0"und ""sind beide Zeichenfolgen, so dass JavaScript sagt, dass kein Zwang mehr erforderlich ist . Deshalb bekommen wir false.

Fazit

Just-Use-Triple-Equals

Verwenden Sie Triple Equals und schlafen Sie nachts tief und fest.

0 === "0" // false 0 === [] // false "0" === [] // false 

Es vermeidet Zwang vollständig, also denke ich, dass es auch effizienter ist!

Die Leistungssteigerung ist jedoch nahezu bedeutungslos. Der eigentliche Gewinn ist das erhöhte Vertrauen, das Sie in Ihren Code haben, sodass sich dieser zusätzliche Tastendruck absolut lohnt.

Willst du kostenloses Coaching?

Wenn Sie einen kostenlosen Anruf von 15 bis 30 Minuten einplanen möchten, um Fragen zur Front-End-Entwicklung in Bezug auf Code, Interviews, Karriere oder andere Themen zu besprechen, folgen Sie mir auf Twitter und DM me.

Wenn Sie danach unser erstes Treffen genießen, können wir eine laufende Coaching-Beziehung besprechen, die Ihnen hilft, Ihre Front-End-Entwicklungsziele zu erreichen!

Danke fürs Lesen

Weitere Inhalte wie diesen finden Sie unter //yazeedb.com!

Bis zum nächsten Mal!