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.

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

January 23, 2020
Tweet

Transcript

  1. Per Anhalter durch JavaScript 2 3 . 0 1 .

    2 0 2 0 D ü s s e l d o r f, G e e k t a s t i c C o n n e c t
  2. Und der Petunientopf: „Oh nein, nicht schon wieder“ 2

  3. 3 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
  4. Automatic Type Conversion 4

  5. 5 “The ECMAScript runtime system performs automatic type conversion as

    needed.” ECMAScript 2018 Language Specification, 7.1 Type Conversion
  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
  7. Klarer Fall! Du willst einen Boolean

  8. 8 Die Wahrheit ist irgendwo da draußen Alles wird zu

    true umgewandelt außer false, null, undefined, 0, NaN, ""
  9. None
  10. 10 JavaScript versucht für dich Dinge in den richtigen Typen

    zu verwandeln. Dabei stellt es sich nicht immer klug an.
  11. 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.
  12. Objekte 12

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

  14. cache[lisa] ist nun <h1>Lisa</h1> ...aber cache[lucas] auch Wait what? Clippy

    strikes again
  15. 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()
  16. Arrays sind auch Objekte

  17. None
  18. 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 •...
  19. None
  20. Das fügt die Methode aber nur dieser Liste hinzu

  21. person ist der Prototyp von person1

  22. 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 22
  23. Prototype: Array Prototype: RegExp Prototype: Foo

  24. (don't do this at home)

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

  26. None
  27. 27 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.
  28. this 28

  29. person ist this

  30. Zauberei!

  31. bind benutzen

  32. 32 this funktioniert nicht wie in anderen Sprachen: Der Wert

    von this hängt vom Aufruf ab.
  33. „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.“ 33
  34. Destructuring 34 Photo by Roel van Sabben on Unsplash

  35. 35 Grundlage Umbenennen Default-Wert Kombination

  36. 36 „Cooleres“ Destructuring

  37. 37 Arrays sind Objekte… „Der Rest“ „Ignorieren“

  38. Hoisting 38 Photo by Andrey Kremkov on Unsplash

  39. 39 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
  40. 40 Funktionsaufruf ohne Hoisting

  41. Funktionsaufruf mit Hoisting 41

  42. Hoisting von Variablen 42

  43. let -> kein Hoisting, Text 43 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
  44. let -> kein Hoisting, Beispiel 44

  45. Array-Methoden 45 Photo by Zach Miles on Unsplash

  46. 46 Die bekannten Klassiker, 1

  47. 47 Die bekannten Klassiker, 2

  48. 48 Schleifen -> forEach

  49. 49 Schleifen -> for … of Wartet bei await

  50. 50 Coole Array-Methoden includes

  51. 51 Coole Array-Methoden filter

  52. 52 Coole Array-Methoden map

  53. 53 Coole Array-Methoden reduce

  54. 54 „Das hier ist 'ne verdammt harte Galaxis. Wenn man

    hier überleben will, muss man immer wissen, wo sein Handtuch ist!“
  55. 55 Projekt aufsetzen 1. editorconfig 2. prettier 3. ESLint 4.

    Testing 5. NPM scripts 6. Ein paar Tipps zum Client/Server
  56. 56 editorconfig •Plug-in für die meisten Editoren/IDEs •Konfiguriert einige grundlegende

    Dinge über eine Config Datei
  57. 57 prettier •Plug-in für die meisten Editoren/IDEs •Automatisches Code Formatting

    (zB. beim Speichern) •auch für TypeScript, (S)CSS... •Keine* Config, beachtet die editorconfig ˰
  58. 58 ESLint •Plug-in für die meisten Editoren/IDEs •Feedback zu häufigen

    Fehlern •Hochkonfigurierbar •Kann mit Prettier zusammenarbeiten
  59. 59 Testing •Eine riesige Auswahl an Testing Tools •Die meisten

    sind okay •In jedem Projekt ein neues Testing Tool...
  60. 60 NPM scripts •Der einfachste Task Runner: •Name, Shell Script

    •npm run test (bzw. npm t) •Kann auf CI ausgeführt werden
  61. Client: Asset Pipeline Server: dotenv Logging express 61

  62. 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 62 Danke! Fragen? Lucas Dohmen lucas.dohmen@innoq.com +49 151 75062496 moonbeamlabs Lisa Maria Moritz lisa.moritz@innoq.com +49 176 646 300 28 teapot4181