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
Slide 2
Slide 2 text
Und der Petunientopf:
„Oh nein, nicht schon
wieder“
2
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Automatic Type
Conversion
4
Slide 5
Slide 5 text
5
“The ECMAScript runtime system
performs automatic type conversion
as needed.”
ECMAScript 2018 Language Specification, 7.1 Type Conversion
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Klarer Fall! Du willst
einen Boolean
Slide 8
Slide 8 text
8
Die Wahrheit ist irgendwo da draußen
Alles wird zu true umgewandelt außer
false, null, undefined, 0, NaN, ""
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
10
JavaScript versucht für dich Dinge in den
richtigen Typen zu verwandeln.
Dabei stellt es sich nicht immer klug an.
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
Objekte
12
Slide 13
Slide 13 text
Kurzschreibweise
für
x["a"]
Slide 14
Slide 14 text
cache[lisa] ist nun
Lisa
...aber cache[lucas] auch
Wait what?
Clippy
strikes
again
Slide 15
Slide 15 text
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()
Slide 16
Slide 16 text
Arrays sind auch Objekte
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
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
•...
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Das fügt die Methode aber nur dieser Liste hinzu
Slide 21
Slide 21 text
person
ist der
Prototyp
von
person1
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Prototype: Array
Prototype: RegExp
Prototype: Foo
Slide 24
Slide 24 text
(don't do this at home)
Slide 25
Slide 25 text
25
class ist nur neue Syntax
für diese Funktionalität
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
this
28
Slide 29
Slide 29 text
person ist this
Slide 30
Slide 30 text
Zauberei!
Slide 31
Slide 31 text
bind
benutzen
Slide 32
Slide 32 text
32
this funktioniert nicht wie in anderen
Sprachen:
Der Wert von this hängt vom Aufruf ab.
Slide 33
Slide 33 text
„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
Slide 34
Slide 34 text
Destructuring
34
Photo by Roel van Sabben on Unsplash
Slide 35
Slide 35 text
35
Grundlage
Umbenennen
Default-Wert
Kombination
Slide 36
Slide 36 text
36
„Cooleres“ Destructuring
Slide 37
Slide 37 text
37
Arrays sind Objekte…
„Der Rest“ „Ignorieren“
Slide 38
Slide 38 text
Hoisting
38
Photo by Andrey Kremkov on Unsplash
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
40
Funktionsaufruf ohne Hoisting
Slide 41
Slide 41 text
Funktionsaufruf mit Hoisting
41
Slide 42
Slide 42 text
Hoisting von Variablen
42
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
let -> kein Hoisting, Beispiel
44
Slide 45
Slide 45 text
Array-Methoden
45
Photo by Zach Miles on Unsplash
Slide 46
Slide 46 text
46
Die bekannten Klassiker, 1
Slide 47
Slide 47 text
47
Die bekannten Klassiker, 2
Slide 48
Slide 48 text
48
Schleifen -> forEach
Slide 49
Slide 49 text
49
Schleifen -> for … of
Wartet bei await
Slide 50
Slide 50 text
50
Coole Array-Methoden
includes
Slide 51
Slide 51 text
51
Coole Array-Methoden
filter
Slide 52
Slide 52 text
52
Coole Array-Methoden
map
Slide 53
Slide 53 text
53
Coole Array-Methoden
reduce
Slide 54
Slide 54 text
54
„Das hier ist 'ne verdammt
harte Galaxis. Wenn man
hier überleben will, muss
man immer wissen, wo sein
Handtuch ist!“
Slide 55
Slide 55 text
55
Projekt aufsetzen
1. editorconfig
2. prettier
3. ESLint
4. Testing
5. NPM scripts
6. Ein paar Tipps zum Client/Server
Slide 56
Slide 56 text
56
editorconfig
•Plug-in für die meisten Editoren/IDEs
•Konfiguriert einige grundlegende Dinge über
eine Config Datei
Slide 57
Slide 57 text
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
˰
Slide 58
Slide 58 text
58
ESLint
•Plug-in für die meisten Editoren/IDEs
•Feedback zu häufigen Fehlern
•Hochkonfigurierbar
•Kann mit Prettier zusammenarbeiten
Slide 59
Slide 59 text
59
Testing
•Eine riesige Auswahl an Testing Tools
•Die meisten sind okay
•In jedem Projekt ein neues Testing Tool...
Slide 60
Slide 60 text
60
NPM scripts
•Der einfachste Task Runner:
•Name, Shell Script
•npm run test (bzw. npm t)
•Kann auf CI ausgeführt werden