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