Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Weird Parts

Weird Parts

Viele Entwickler, die im Web arbeiten, programmieren auch JavaScript. Betonung auf “auch”: Ihre Hauptsprache und/oder Lieblingssprache ist wahrscheinlich eine andere. Gern wird JavaScript in “Geschmacksrichtung Java/Ruby…” geschrieben. Aber JS ist anders. Packt euer Handtuch ein: Ich nehme euch mit auf eine Reise ins JavaScript-Universum, um euch diese seltsame und tolle Sprache und seine Besonderheiten näherzubringen und euch zu helfen, JavaScript zu schreiben, wie es geschrieben werden möchte.

Lucas Dohmen

April 27, 2022
Tweet

More Decks by Lucas Dohmen

Other Decks in Technology

Transcript

  1. JavaScript:
    The Weird Parts
    Lucas Dohmen
    @moonbeamlabs

    View full-size slide

  2. 2
    Design
    1. Brendan mochte gerne Scheme und Self
    2. Marketing-Abteilung wollte Ähnlichkeit zu Java
    3. Es sollte einfach zu benutzen sein, auch für Nicht-
    Programmierer
    4. Er hatte nur 10 Tage Zeit
    So
    hot right
    now

    View full-size slide

  3. Lucas Dohmen
    Senior Consultant
    bei INNOQ Deutschland GmbH
    Web Architektur & Entwicklung
    3

    View full-size slide

  4. Automatic Type
    Conversion
    4

    View full-size slide

  5. 5
    “The ECMAScript runtime system
    performs automatic type conversion
    as needed.”
    ECMAScript 2018 Language Specification, 7.1 Type Conversion

    View full-size slide

  6. Es sieht so aus als würdest du einen
    String brauchen. Ich hab ihn für dich konvertiert.
    Klarer Fall, du willst eine Zahl*!
    * 'hello' als Zahl ist NaN
    '' als Zahl ist 0

    View full-size slide

  7. Klarer Fall! Du willst
    einen Boolean

    View full-size slide

  8. 8
    Die Wahrheit ist irgendwo da draußen
    Alles wird zu true umgewandelt außer
    false, null, undefined, 0, NaN, ""

    View full-size slide

  9. 10
    JavaScript versucht für dich Dinge in den
    richtigen Typen zu verwandeln.
    Dabei stellt es sich nicht immer klug an.

    View full-size slide

  10. 11
    Folglich
    •Immer === statt == benutzen – hier passiert keine Typkonvertierung
    •Bei Gleichheit zudem beachten: Primitive Werte werden anhand ihres
    Wertes verglichen, Objekte anhand ihrer Identiät
    •Was ist ein Objekt? Dazu nun mehr.

    View full-size slide

  11. Kurzschreibweise
    für
    x["a"]

    View full-size slide

  12. cache[lisa] ist nun Lisa
    ...aber cache[lucas] auch
    Wait what?
    Clippy
    strikes
    again

    View full-size slide

  13. 15
    Objekte
    •Ein Objekt ist ein Dictionary
    •Die Schlüssel sind immer* Strings
    •Die Werte können beliebige Typen haben
    •Ist der Schlüssel kein String, wird toString() darauf aufgerufen:
    •lisa.toString() === '[object Object]'
    •lucas.toString() === '[object Object]'
    •lisa.toString() === lucas.toString()
    *oder Symbols, aber das führt zu weit

    View full-size slide

  14. Arrays sind auch Objekte

    View full-size slide

  15. 18
    Fast alles ist ein Objekt
    •Primitive Values: Undefined, Null, Boolean, Number, String, Symbol
    •Alles andere sind Objekte, zB.:
    •Arrays
    •Reguläre Ausdrücke
    •Promises
    •Funktionen
    •...

    View full-size slide

  16. Das fügt die Methode aber nur dieser Liste hinzu

    View full-size slide

  17. person
    ist der
    Prototyp
    von
    person1

    View full-size slide

  18. Prototype: Array
    Prototype: RegExp
    Prototype: Foo

    View full-size slide

  19. (don't do this at home)

    View full-size slide

  20. 24
    class ist nur neue Syntax
    für diese Funktionalität

    View full-size slide

  21. 26
    Objekte sind Dictionaries
    die Strings auf beliebige Objekte abbilden
    und alle nicht definierten Schlüssel an die
    Prototypenkette weitergeben.
    Wird nichts gefunden, wird undefined
    zurückgegeben.

    View full-size slide

  22. person = this

    View full-size slide

  23. bind
    benutzen

    View full-size slide

  24. 31
    this funktioniert nicht wie in anderen
    Sprachen:
    Der Wert von this hängt vom Aufruf ab.

    View full-size slide

  25. 32
    Mehr gefällig?
    Remote-JavaScript Training am 26. & 27. September
    innoq.com/js-training

    View full-size slide

  26. Krischerstr. 100
    40789 Monheim am Rhein
    Germany
    +49 2173 3366-0
    Ohlauer Str. 43
    10999 Berlin
    Germany
    +49 2173 3366-0
    Ludwigstr. 180E
    63067 Offenbach
    Germany
    +49 2173 3366-0
    Kreuzstr. 16
    80331 München
    Germany
    +49 2173 3366-0
    Hermannstrasse 13
    20095 Hamburg
    Germany
    +49 2173 3366-0
    Gewerbestr. 11
    CH-6330 Cham
    Switzerland
    +41 41 743 0116
    innoQ Deutschland GmbH innoQ Schweiz GmbH
    www.innoq.com
    33
    Danke! Fragen?
    Lucas Dohmen
    [email protected]
    +49 151 75062496
    moonbeamlabs

    View full-size slide