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

Per Anhalter durch JavaScript

Per Anhalter durch JavaScript

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: Wir nehmen 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

October 29, 2020
Tweet

More Decks by Lucas Dohmen

Other Decks in Programming

Transcript

  1. Per Anhalter
    durch
    JavaScript
    Lisa Moritz
    @teapot4181
    Lucas Dohmen
    @moonbeamlabs

    View full-size slide

  2. Und der Petunientopf:
    „Oh nein, nicht schon
    wieder“
    2

    View full-size slide

  3. Automatic Type
    Conversion
    3

    View full-size slide

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

    View full-size slide

  5. 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

  6. Klarer Fall! Du willst
    einen Boolean

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 10
    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

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

    View full-size slide

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

    View full-size slide

  12. 14
    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()

    View full-size slide

  13. Arrays sind auch Objekte

    View full-size slide

  14. 17
    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

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

    View full-size slide

  16. person
    ist der
    Prototyp
    von
    person1

    View full-size slide

  17. You can think of a prototype as a
    “hidden” property on every object
    that determines “where to look
    next”. So if there’s no taste
    property on iceCream, JavaScript
    will look for a taste property on its
    prototype, then on that object’s
    prototype, and so on, and will only
    give us undefined if it reaches the
    end of this “prototype chain”
    without finding .taste
    Dan Abramov
    21

    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. „Seht mich an. Ein Hirn von
    der Größe eines Planeten,…
    und man schickt mich, um
    euch in die
    Kommandozentrale zu
    bringen. Nennt man das
    vielleicht berufliche
    Erfüllung? Also ich nicht.“
    27

    View full-size slide

  23. Destructuring
    28
    Photo by Roel van Sabben on Unsplash

    View full-size slide

  24. 29
    Grundlage
    Umbenennen
    Default-Wert
    Kombination

    View full-size slide

  25. 30
    „Cooleres“ Destructuring

    View full-size slide

  26. 31
    Arrays sind Objekte…
    „Der Rest“ „Ignorieren“

    View full-size slide

  27. Hoisting
    32
    Photo by Andrey Kremkov on Unsplash

    View full-size slide

  28. 33
    Definition
    Mit Hoisting (engl., Hochziehen) bezeichnet man
    das Verhalten des JavaScript-Interpreters bei der
    Deklaration von Variablen und Funktionen.
    Wikipedia
    21.01.20, https://de.wikipedia.org/wiki/Hoisting

    View full-size slide

  29. 34
    Funktionsaufruf ohne Hoisting

    View full-size slide

  30. Funktionsaufruf mit Hoisting
    35

    View full-size slide

  31. Hoisting von Variablen
    36

    View full-size slide

  32. let -> kein Hoisting, Text
    37
    In ECMAScript 2015, werden Deklarationen mit let
    nicht an den Anfang des Blocks verschoben (hoist).
    MDN
    22.01.20, https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/let

    View full-size slide

  33. let -> kein Hoisting, Beispiel
    38

    View full-size slide

  34. Array-Methoden
    39
    Photo by Zach Miles on Unsplash

    View full-size slide

  35. 40
    Die bekannten Klassiker, 1

    View full-size slide

  36. 41
    Die bekannten Klassiker, 2

    View full-size slide

  37. 42
    Schleifen -> forEach

    View full-size slide

  38. 43
    Schleifen -> for … of
    Wartet bei await

    View full-size slide

  39. 44
    Coole Array-Methoden
    includes

    View full-size slide

  40. 45
    Coole Array-Methoden
    filter

    View full-size slide

  41. 46
    Coole Array-Methoden
    map

    View full-size slide

  42. 47
    Coole Array-Methoden
    reduce

    View full-size slide

  43. 48
    Das Ende unserer
    Reise…?

    View full-size slide

  44. 49
    Mehr gefällig?
    Remote-JavaScript Training am 8. & 9. Februar
    https://innoq.com/js-training

    View full-size slide

  45. 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
    50
    Danke! Fragen?
    Lucas Dohmen
    [email protected]
    +49 151 75062496
    moonbeamlabs
    Lisa Maria Moritz
    [email protected]
    +49 176 646 300 28
    teapot4181

    View full-size slide