Moderne JavaScript-Grundlagen

Moderne JavaScript-Grundlagen

0:00 JavaScript ist heute die Sprache, an der praktisch niemand mehr vorbeikommt, der etwas mit dem Web zu tun hat. Sie läuft im Browser, auf dem Server, in mobilen Apps und inzwischen auch in Cloud-Plattformen wie Atlassian Forge. Genau deshalb lohnt es sich, das Fundament noch einmal in Ruhe zu betrachten — bevor wir später React und TypeScript daraufsetzen.

0:20 Denn fast alles, was Menschen an React frustriert, ist in Wahrheit ein JavaScript-Thema: Scoping, Typen, Asynchronität. Wer diese drei Dinge sicher beherrscht, erlebt die Frameworks danach als Erleichterung statt als Rätsel. Heute geht es um dieses Fundament.

Moderne JavaScript-Grundlagen

0:36 Wir haben uns für heute einen Bogen vorgenommen: von den Basics — Werte, Typen, Variablen — über die modernen Sprachfeatures, die seit ES6 den Alltag prägen, hin zu Modulen, zur Arbeit mit Objekten und Arrays und schließlich zur asynchronen Programmierung. Das ist bewusst als Aufstieg gebaut: Jeder Block setzt auf dem vorherigen auf.

0:55 Sie müssen nichts davon auswendig können — wichtig ist, dass Sie die Muster wiedererkennen, wenn sie Ihnen in fremdem Code begegnen. Bevor wir einsteigen, würde ich Sie gern kurz kennenlernen. Drei Fragen: Wie lange arbeiten Sie schon mit JavaScript? Sind Sie eher im Frontend unterwegs, im Backend oder in beidem? Und vor allem: Was möchten Sie heute konkret mitnehmen?

1:17 Das ist keine Höflichkeitsfloskel — je nachdem, ob hier eher Java-Erfahrung oder jahrelange Frontend-Praxis im Raum sitzt, verschieben wir die Schwerpunkte. Wer schon routiniert mit ES6 arbeitet, bekommt mehr Tiefe bei Asynchronität; wer neu einsteigt, mehr Zeit bei den Basics.

JavaScript-Basics auffrischen

1:35 Wir beginnen ganz unten, bei den Werten und Variablen. Das klingt nach Grundschulstoff, ist aber die Ebene, auf der die hartnäckigsten Fehler entstehen — und zwar auch bei erfahrenen Leuten. Nehmen wir uns also einen Moment Zeit für die Frage, was JavaScript eigentlich mit einem Wert macht. JavaScript ist dynamisch typisiert. Das bedeutet: Eine Variable hat keinen festen Typ, sondern der Wert, den Sie hineinlegen, bestimmt ihn — und zwar erst zur Laufzeit.

2:02 Stellen Sie sich eine Schublade vor, die sich der Form ihres Inhalts anpasst. Das ist bequem, weil Sie nichts deklarieren müssen. Und es ist riskant, weil die Sprache Fehler erst dann bemerkt, wenn der Code schon läuft. Grob unterscheidet JavaScript zwei Welten: Primitive wie Zahlen, Zeichenketten oder Wahrheitswerte — und Objekte, zu denen auch Arrays und Funktionen gehören.

2:24 Diese Unterscheidung erklärt später eine Menge scheinbar seltsames Verhalten. Warum lohnt sich diese Auffrischung? Weil sie unter allem liegt, was danach kommt. React, Vue, Node — sie alle sind am Ende JavaScript. Ein Framework nimmt Ihnen Arbeit ab, aber es nimmt Ihnen nicht das Typverständnis ab. Ein großer Teil der Bugs, über die Teams stolpern, geht auf zwei Ursachen zurück: unklare Typumwandlung beim Vergleichen und Variablen, die weiter sichtbar sind, als man denkt.

2:54 Beides kostet erfahrungsgemäß mehr Stunden als jedes komplizierte Architekturthema. Es ist also gut investierte Zeit, hier genau hinzuschauen. Was Sie hier sehen, ist im Grunde die halbe Miete für sauberen modernen Code. Die Faustregel lautet: erst `const`, und nur dann `let`, wenn Sie den Wert wirklich neu zuweisen. `var` brauchen Sie nicht mehr.

3:14 Der Unterschied ist nicht kosmetisch — `const` und `let` gelten nur innerhalb ihres Blocks, also zwischen den geschweiften Klammern, in denen sie stehen. Damit ist auf einen Blick klar, wie weit eine Variable reicht. Unten sehen Sie außerdem, wie man den Typ eines Werts abfragt. Merken Sie sich vor allem eines: Für die Prüfung auf „keine Zahl" gibt es eine eigene Funktion, weil der klassische Vergleich hier nicht funktioniert.

3:39 Jetzt sind Sie dran. Das Ziel ist nicht, Regeln auswendig zu lernen, sondern ein Gefühl dafür zu entwickeln, wann JavaScript im Hintergrund still umwandelt. Nehmen Sie sich fünf Ausdrücke vor und sagen Sie vorher — bevor Sie es ausführen —, welchen Typ und welches Ergebnis der doppelte und der dreifache Gleichheitsoperator liefern.

3:58 Erst danach prüfen Sie in der Konsole nach. Genau dieser Moment der Überraschung ist der Lerneffekt. Wenn Sie schnell fertig sind: Versuchen Sie zu erklären, warum ein leeres Array verglichen mit seiner eigenen Negation `true` ergibt. Das ist ein wunderbarer kleiner Abgrund. Drei Fallen, die Ihnen garantiert begegnen. Erstens: Der doppelte Gleichheitsoperator wandelt Typen um, bevor er vergleicht — deshalb im Zweifel immer die strikte Variante mit drei Zeichen nehmen.

4:26 Zweitens: `var` gilt für die ganze Funktion und wird nach oben gezogen. Das führt zu Code, der ausgeführt wird, bevor man ihn erwartet hätte — eine klassische Quelle subtiler Fehler. Und drittens ein Kuriosum: Die Typabfrage liefert für `null` den Wert „object". Das ist schlicht ein historischer Fehler der Sprache, der aus Kompatibilitätsgründen nie korrigiert wurde. Kennen muss man ihn trotzdem.

Moderne Sprachfeatures (ES6+)

4:51 Bis hierhin ging es um das Fundament. Jetzt kommt der Teil, der modernen JavaScript-Code optisch von altem unterscheidet — und der ihn deutlich angenehmer zu lesen macht. Wir schauen uns die Features an, die seit 2015 zum Alltag geworden sind. Mit der Version ES2015, meist ES6 genannt, hat die Sprache einen großen Sprung gemacht — und seither kommt jedes Jahr ein Schub dazu.

5:14 Was damals ankam, prägt das Bild bis heute: Arrow Functions als kompakte Schreibweise für Funktionen, Template Literals für Zeichenketten mit eingebetteten Werten, Destrukturierung, um gezielt einzelne Werte aus Objekten und Arrays herauszuziehen, und Default-Parameter. Man kann sich das wie den Wechsel von einem Werkzeugkasten mit drei Schraubendrehern zu einem gut sortierten Satz vorstellen.

5:35 Die Aufgaben sind dieselben geblieben — aber die Arbeit geht leichter von der Hand und der Code sagt deutlicher, was er meint. Der Gewinn ist konkret. Arrow Functions binden das berüchtigte `this` an die Umgebung, in der sie geschrieben stehen — damit fällt eine ganze Klasse von Tricks weg, die früher nötig waren, um den Kontext zu retten.

5:55 Template Literals ersetzen das Zusammenstückeln von Zeichenketten mit Plus-Zeichen, das schnell unleserlich wird. Und Destrukturierung mit Default-Werten macht Funktionssignaturen selbsterklärend: Man sieht direkt, was hineingeht und was passiert, wenn etwas fehlt. Unterm Strich weniger Zeremonie, mehr Aussage. Das ist kein Schönheitswettbewerb — lesbarer Code ist wartbarer Code.

6:18 Hier sehen Sie die Werkzeuge im Zusammenspiel. Oben eine Funktion in Kurzform, mit einem Standardwert für den Fall, dass nichts übergeben wird — und einer Zeichenkette, in die ein Wert direkt eingesetzt wird. In der Mitte die Destrukturierung: Statt über den Punkt auf eine Eigenschaft zuzugreifen, holen Sie sich den gewünschten Namen direkt heraus.

6:38 Unten schließlich eine Transformation, die jedes Element einer Liste durch eine Funktion schickt und eine neue Liste zurückgibt. Worauf es ankommt: Diese Schreibweisen sind für kurze, klar umrissene Aufgaben gedacht. Für Methoden an Objekten bleiben Sie besser bei der klassischen Form — warum, sehen wir gleich. In dieser Übung nehmen Sie eine Funktion in altem Stil und übersetzen sie in moderne Syntax.

7:01 Ziel ist, dass Sie die Muster erkennen: Wo lohnt sich eine Arrow Function, wo eine Template-Zeichenkette, wo Destrukturierung? Fertig sind Sie, wenn alle drei Elemente sinnvoll darin vorkommen — und der Code danach kürzer und klarer ist als vorher. Achten Sie dabei besonders auf eine Stelle: Sobald `this` im Spiel ist, ändert die Umstellung nicht nur die Optik, sondern das Verhalten.

7:23 Genau diese Stelle zu finden, ist der eigentliche Lerneffekt der Aufgabe. Das größte Missverständnis bei Arrow Functions: Sie haben kein eigenes `this`. Das ist meistens ein Vorteil — aber als Methode eines Objekts macht es sie unbrauchbar, weil sie dann nicht auf das Objekt selbst zeigen. Zweitens fehlt ihnen das klassische `arguments`-Objekt; wenn Sie beliebig viele Parameter brauchen, nehmen Sie Rest-Parameter.

7:47 Und drittens ein Klassiker, der jeden einmal erwischt: Template Literals funktionieren nur mit Backticks, nicht mit normalen Anführungszeichen. Die Fehlermeldung dazu ist wenig hilfreich — merken Sie sich lieber die Taste.

Module

8:01 Bisher haben wir über einzelne Zeilen gesprochen. Jetzt zoomen wir eine Ebene heraus: Wie schneidet man ein wachsendes Projekt in Teile, die man einzeln verstehen und wiederverwenden kann? Darum geht es bei Modulen. Ein Modul ist im Kern eine Datei mit einer klaren Grenze. Sie entscheidet selbst, was sie nach außen sichtbar macht — alles andere bleibt privat.

8:22 Und sie holt sich gezielt, was sie von anderen braucht. Denken Sie an ein Haus mit Türen: Nicht jeder Raum steht jedem offen, und man betritt ihn über einen definierten Eingang. Genau das ist der Unterschied zur früheren Praxis, bei der alles in einem gemeinsamen globalen Raum lag und man hoffen musste, dass sich niemand mit demselben Namen dazwischenschiebt.

8:42 ES-Module sind heute der Standard — im Browser wie im modernen Node. Der Nutzen zeigt sich, sobald ein Projekt über ein paar hundert Zeilen hinauswächst. Erstens werden Abhängigkeiten sichtbar: Oben in der Datei steht schwarz auf weiß, worauf sie sich stützt. Zweitens greift Kapselung ganz von selbst — was nicht exportiert wird, kann von außen niemand kaputt machen.

9:04 Und drittens gibt es einen sehr praktischen Nebeneffekt: Weil die Abhängigkeiten eindeutig sind, können Bundler ungenutzten Code beim Bauen einfach weglassen. Das nennt sich Tree-Shaking und sorgt dafür, dass Ihre Nutzer am Ende weniger laden müssen. Struktur zahlt hier direkt auf die Ladezeit ein. Der Weg dahin ist kurz. Sie markieren in einer Datei die Werte und Funktionen, die nach außen sollen. In der Zieldatei holen Sie sich gezielt genau diese Namen.

9:31 Der Rest ist Umgebung: Im Browser muss das Skript als Modul eingebunden werden, in Node setzen Sie einen entsprechenden Eintrag in der Projektdatei. Klingt nach vier Schritten, ist in der Praxis eine Minute Arbeit — und in jedem modernen Projekt-Setup ohnehin schon vorbereitet. Eine Konvention noch: höchstens ein Default-Export pro Datei, benannte Exporte so viele Sie brauchen.

9:54 Links sehen Sie die anbietende Seite, rechts die konsumierende. Interessant ist der Unterschied der beiden Export-Arten: Ein benannter Export muss beim Import unter demselben Namen abgeholt werden — er ist gewissermaßen beschriftet. Der Default-Export dagegen ist der Hauptzweck der Datei und darf beim Import frei benannt werden.

10:13 In der Praxis bewährt sich: benannte Exporte für Sammlungen von Hilfsfunktionen, ein Default-Export, wenn eine Datei genau eine Sache liefert. Und eine Kleinigkeit, die viel Zeit kostet: Im nativen Modulbetrieb gehört die Dateiendung in den Pfad. Bundler verzeihen das, der Browser nicht. Bauen Sie eine kleine Werkzeugdatei. Zwei Funktionen genügen — irgendetwas, das Sie tatsächlich öfter bräuchten.

10:37 Diese exportieren Sie, importieren sie in einer Hauptdatei und rufen sie dort auf. Das Lernziel dahinter ist der Schnitt: Was gehört in das Modul, was bleibt draußen? Fertig sind Sie, wenn beide Funktionen aus der Hauptdatei heraus laufen. Wenn Sie mehr wollen: Ziehen Sie zusätzlich einen Default-Export ab und beobachten Sie, wie sich der Import verändert.

10:58 Danach haben Sie beide Varianten einmal selbst in der Hand gehabt. Drei Dinge gehen beim Einstieg regelmäßig schief. Erstens: Benannte Importe müssen zeichengenau passen, inklusive Groß- und Kleinschreibung — der Fehler sieht dann so aus, als gäbe es die Funktion gar nicht. Zweitens: Die alte Node-Welt mit `require` und die Modulwelt lassen sich nicht beliebig mischen; wenn Sie beides in einem Projekt sehen, ist Vorsicht angebracht.

11:24 Und drittens noch einmal die fehlende Dateiendung, weil sie so häufig ist. Wenn ein Import ohne erkennbaren Grund nicht gefunden wird, schauen Sie zuerst auf den Pfad.

Objekte und Arrays

11:35 Jetzt wird es praktisch. In fast jeder Anwendung tun Sie den ganzen Tag dasselbe: Daten entgegennehmen, umformen, filtern, zusammenfassen. Wie das elegant und ohne böse Überraschungen geht, schauen wir uns in diesem Kapitel an. Objekte bündeln benannte Eigenschaften, Arrays halten geordnete Werte — soweit die nüchterne Beschreibung. Spannender ist der Umgang damit.

11:57 Der Spread-Operator und die sogenannten Higher-Order-Methoden erlauben es, Daten zu kopieren und umzuformen, ohne das Original anzufassen. Stellen Sie sich vor, Sie kopieren ein Dokument, ändern die Kopie und legen das Original unberührt zurück ins Regal. Genau das ist die Idee. Warum das so wichtig ist, merkt man spätestens bei React: Dort ist unveränderliche Datenhaltung nicht Stilfrage, sondern Voraussetzung dafür, dass die Oberfläche überhaupt merkt, dass sich etwas geändert hat.

12:27 Der Gewinn liegt in der Vorhersagbarkeit. Wenn niemand fremde Daten heimlich verändert, verschwindet eine ganze Kategorie von Fehlern — jene, bei denen ein Wert sich ändert und keiner weiß, wer schuld war. Dazu kommt Lesbarkeit: `map`, `filter` und `reduce` sagen mit einem Wort, was passiert, während eine Schleife mit Zähler und Zwischenvariable erst gelesen und verstanden werden will.

12:48 Und Spread macht das Kopieren und Zusammenführen von Objekten zu einer Zeile. Das ist einer der Bereiche, in denen moderner Stil messbar weniger Fehler produziert. Oben das Muster, das Sie in React tausendfach schreiben werden: ein neues Objekt aus einem bestehenden erzeugen und dabei einzelne Felder überschreiben. Die Reihenfolge zählt — was später kommt, gewinnt.

13:10 Unten die drei Arbeitstiere für Listen: eine Methode, die jeden Eintrag umformt, eine, die aussortiert, und eine, die alles zu einem einzigen Wert zusammenzieht. Worauf es ankommt: Alle drei geben etwas Neues zurück und lassen das Original in Ruhe. Und bei der letzten immer den Startwert angeben — hier die Null. Ohne ihn verhält sie sich bei leeren Listen anders, als man erwartet.

13:33 Ihre Aufgabe: Aus einer Liste von Bestellungen ermitteln Sie die Summe aller bezahlten. Das klingt banal, verlangt aber genau die Kombination, um die es hier geht — erst aussortieren, dann zusammenrechnen. Die Auflage lautet: keine einzige `for`-Schleife. Diese Einschränkung ist Absicht. Sie zwingt dazu, in Transformationen zu denken statt in Durchläufen, und genau dieses Denken brauchen Sie später bei React-Komponenten, die Listen rendern.

14:00 Fertig sind Sie, wenn die Summe stimmt und der Code in zwei, drei Zeilen lesbar dasteht. Der wichtigste Punkt zuerst: Spread kopiert nur die oberste Ebene. Verschachtelte Objekte sind in der Kopie dieselben wie im Original — wer dort etwas ändert, ändert es an beiden Stellen. Das ist die häufigste Ursache für „ich habe doch kopiert, und trotzdem ist das Original verändert".

14:23 Zweitens: Bei `map` muss aus jedem Durchgang etwas zurückkommen, sonst erhalten Sie eine Liste voller undefinierter Werte. Und drittens: `forEach` gibt nichts zurück. Es ist für Nebeneffekte gedacht, nicht für Transformationen — dafür nehmen Sie `map`.

Asynchrone Programmierung

14:39 Und damit zum letzten und vielleicht wichtigsten Kapitel des Tages. Sobald Ihre Anwendung mit der Außenwelt spricht — mit einer Schnittstelle, einer Datenbank, einem fremden Dienst —, müssen Sie warten können, ohne alles andere anzuhalten. JavaScript hat nur einen Ausführungsstrang. Alles, was dauert — ein Netzwerkaufruf etwa —, würde also die gesamte Oberfläche blockieren, wenn man einfach wartete.

15:02 Deshalb funktioniert es anders: Man erhält sofort ein Versprechen auf ein künftiges Ergebnis, ein Promise, und arbeitet weiter. Wie im Restaurant: Sie geben die Bestellung auf, bekommen keine Suppe in die Hand, aber die Zusage, dass sie kommt — und unterhalten sich in der Zwischenzeit weiter. `async` und `await` sind die Schreibweise, die diesen Ablauf wieder so aussehen lässt wie normalen Code von oben nach unten. Genau das macht ihn lesbar.

15:28 Drei Gründe, warum sich das lohnt. Der offensichtliche: Die Oberfläche bleibt bedienbar, während im Hintergrund Daten geladen werden — für die Nutzer ist das der Unterschied zwischen „lädt" und „hängt". Der zweite: Die moderne Schreibweise ersetzt die verschachtelten Callback-Konstruktionen, die man früher scherzhaft Pyramide des Grauens nannte.

15:48 Und der dritte, oft unterschätzte: Fehler lassen sich mit dem gewohnten `try`/`catch` behandeln, statt in jedem Rückruf einzeln. Das macht Fehlerbehandlung überhaupt erst praktikabel — und Fehler passieren im Netzwerk nun einmal ständig. Der Ablauf ist immer derselbe. Sie kennzeichnen die Funktion als asynchron, warten darin an den Stellen, an denen ein Ergebnis gebraucht wird, und legen einen `try`/`catch`-Rahmen darum.

16:13 Bleibt der vierte Punkt, den viele übersehen: Wenn mehrere Aufrufe nicht voneinander abhängen, sollten Sie sie nicht nacheinander abwarten, sondern gebündelt starten. Drei Anfragen zu je 300 Millisekunden sind dann eben nicht 900, sondern 300. Und noch eine Klarstellung, weil sie oft falsch verstanden wird: Das Warten hält nur diese eine Funktion an, nicht das ganze Programm.

16:36 Dieses Muster werden Sie sehr oft brauchen — es lohnt sich, es einmal wirklich zu verstehen. Zuerst der Aufruf nach draußen, auf dessen Antwort gewartet wird. Dann eine Prüfung, die viele weglassen: Eine Antwort vom Server ist nicht automatisch eine erfolgreiche Antwort. Ein 404 oder 500 kommt hier ganz normal an und muss von Ihnen erkannt werden — sonst arbeiten Sie fröhlich mit einer Fehlerseite weiter.

17:00 Danach das Auspacken der Daten, ebenfalls mit Warten. Und um alles herum der Fehlerrahmen. Merken Sie sich vor allem: Ohne das Warten halten Sie nicht die Daten in der Hand, sondern nur das Versprechen darauf. Jetzt setzen Sie das Gelernte zusammen. Schreiben Sie eine Funktion, die Daten von einer Schnittstelle holt, sie zurückgibt und dabei Netzwerkfehler sauber abfängt.

17:22 Nehmen Sie ruhig eine der frei zugänglichen Test-APIs. Das Erfolgskriterium ist bewusst zweiteilig: Es reicht nicht, dass es im Gutfall funktioniert — schalten Sie testweise das Netzwerk ab oder verfälschen Sie die Adresse und schauen Sie, ob Ihr Code sich anständig verhält. Wenn Sie noch Luft haben: Laden Sie zwei Ressourcen parallel statt nacheinander und vergleichen Sie die Dauer.

17:44 Die drei häufigsten Stolperfallen im asynchronen Code. Erstens das vergessene Warten — Sie bekommen dann ein Promise-Objekt statt Ihrer Daten, und die Fehlermeldung kommt erst viel später an ganz anderer Stelle. Zweitens: Gewartet werden darf nur innerhalb einer asynchronen Funktion, oder auf oberster Ebene eines Moduls.

18:04 Und drittens, der leiseste und gefährlichste: Ein Fehler in einem Promise, das niemand abfängt, verschwindet unter Umständen einfach. Kein Absturz, keine Meldung — nur Daten, die nie ankommen. Deshalb gehört die Fehlerbehandlung von Anfang an dazu, nicht am Ende dazugebaut. Halten wir fest, was heute zusammengekommen ist.

18:24 Sie haben das Fundament wieder fest unter den Füßen: Variablen mit klarem Gültigkeitsbereich, ein Gefühl für Typen und den strikten Vergleich. Darauf sitzen die modernen Sprachmittel, Module als Ordnungsprinzip und die unveränderliche Datenverarbeitung — drei Dinge, die Sie ab jetzt jeden Tag nutzen werden. Und schließlich das asynchrone Arbeiten mit ordentlicher Fehlerbehandlung.

18:45 Der nächste Schritt ist, das alles einmal in einem kleinen Projekt zusammenzuführen — und genau darauf setzen die folgenden Module auf.

Danke!

18:54 Damit sind wir am Ende dieses Moduls. Alle Materialien — Folien, Codebeispiele und Aufgaben — finden Sie in der Freigabe; nehmen Sie sie mit, sie sind zum Nachschlagen gedacht. Bei Fragen, die heute offen geblieben sind, erreichen Sie uns jederzeit unter der angegebenen Adresse. Im nächsten Modul kommt TypeScript dazu — und Sie werden sehen, dass sich viele der heute besprochenen Stolpersteine damit schon beim Tippen zeigen statt erst zur Laufzeit.

19:20 Vielen Dank fürs Mitmachen.