Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

October 29, 2020
Tweet

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, ""
  8. None
  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

  16. None
  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 •...
  18. None
  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

  25. None
  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