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.

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, ""
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
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 •...
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
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