Per Anhalter
durch
JavaScript
Lisa Moritz
@teapot4181
Lucas Dohmen
@moonbeamlabs
Slide 2
Slide 2 text
Und der Petunientopf:
„Oh nein, nicht schon
wieder“
2
Slide 3
Slide 3 text
Automatic Type
Conversion
3
Slide 4
Slide 4 text
4
“The ECMAScript runtime system
performs automatic type conversion
as needed.”
ECMAScript 2018 Language Specification, 7.1 Type Conversion
Slide 5
Slide 5 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 6
Slide 6 text
Klarer Fall! Du willst
einen Boolean
Slide 7
Slide 7 text
7
Die Wahrheit ist irgendwo da draußen
Alles wird zu true umgewandelt außer
false, null, undefined, 0, NaN, ""
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
9
JavaScript versucht für dich Dinge in den
richtigen Typen zu verwandeln.
Dabei stellt es sich nicht immer klug an.
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
Objekte
11
Slide 12
Slide 12 text
Kurzschreibweise
für
x["a"]
Slide 13
Slide 13 text
cache[lisa] ist nun
Lisa
...aber cache[lucas] auch
Wait what?
Clippy
strikes
again
Slide 14
Slide 14 text
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()
Slide 15
Slide 15 text
Arrays sind auch Objekte
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
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
•...
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Das fügt die Methode aber nur dieser Liste hinzu
Slide 20
Slide 20 text
person
ist der
Prototyp
von
person1
Slide 21
Slide 21 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
21
Slide 22
Slide 22 text
Prototype: Array
Prototype: RegExp
Prototype: Foo
Slide 23
Slide 23 text
(don't do this at home)
Slide 24
Slide 24 text
24
class ist nur neue Syntax
für diese Funktionalität
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 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.“
27
Slide 28
Slide 28 text
Destructuring
28
Photo by Roel van Sabben on Unsplash
Slide 29
Slide 29 text
29
Grundlage
Umbenennen
Default-Wert
Kombination
Slide 30
Slide 30 text
30
„Cooleres“ Destructuring
Slide 31
Slide 31 text
31
Arrays sind Objekte…
„Der Rest“ „Ignorieren“
Slide 32
Slide 32 text
Hoisting
32
Photo by Andrey Kremkov on Unsplash
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
34
Funktionsaufruf ohne Hoisting
Slide 35
Slide 35 text
Funktionsaufruf mit Hoisting
35
Slide 36
Slide 36 text
Hoisting von Variablen
36
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
let -> kein Hoisting, Beispiel
38
Slide 39
Slide 39 text
Array-Methoden
39
Photo by Zach Miles on Unsplash
Slide 40
Slide 40 text
40
Die bekannten Klassiker, 1
Slide 41
Slide 41 text
41
Die bekannten Klassiker, 2
Slide 42
Slide 42 text
42
Schleifen -> forEach
Slide 43
Slide 43 text
43
Schleifen -> for … of
Wartet bei await
Slide 44
Slide 44 text
44
Coole Array-Methoden
includes
Slide 45
Slide 45 text
45
Coole Array-Methoden
filter
Slide 46
Slide 46 text
46
Coole Array-Methoden
map
Slide 47
Slide 47 text
47
Coole Array-Methoden
reduce
Slide 48
Slide 48 text
48
Das Ende unserer
Reise…?
Slide 49
Slide 49 text
49
Mehr gefällig?
Remote-JavaScript Training am 8. & 9. Februar
https://innoq.com/js-training
Slide 50
Slide 50 text
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
lucas.dohmen@innoq.com
+49 151 75062496
moonbeamlabs
Lisa Maria Moritz
lisa.moritz@innoq.com
+49 176 646 300 28
teapot4181