JavaScript – verstehen, nicht nur benutzen
Vom ersten let bis zur Event Loop: Typen und Gleichheit, Scope und Closures,this, Prototypen, Promises und async/await – interaktiv, Schritt für Schritt, auf dem Stand von ECMAScript 2026.
🗺️Kapitel
Grundlagen
Werte und Typen, typeof-Tabelle, let/const/var mit Hoisting-Debugger und TDZ, Operatoren, Truthy/Falsy, Kontrollfluss.
== vs ===
Interaktive 18×18-Vergleichsmatrix: jede Zelle mit Schritt-für-Schritt-Erklärung der Typumwandlung.
Funktionen
Deklaration, Ausdruck, Arrow; Default- und Rest-Parameter, Destructuring, Spread, Template-Literals.
Arrays & Objekte
map, filter, reduce, find, some, every animiert – plus moderne Methoden wie toSorted und Object.groupBy.
Klassen, Module, Fehler
class, extends, private Felder, Getter; import/export; try/catch/finally und eigene Fehlerklassen.
Event Loop im Debugger
Call Stack, Microtasks, Tasks und Timer live – 8 Programme, deren Ausgabereihenfolge gegen echtes Node geprüft ist.
Scope, Closures, this
Scope-Kette als verschachtelte Kästen, Closures, this-Entscheidungsbaum und die Prototypenkette.
Asynchron
Callbacks → Promises → async/await, Promise-Zustände, all/allSettled/race/any als Zeitleiste, fetch gegen die Beispiel-API.
Browser & Node.js
DOM-Baum, Capturing und Bubbling live, localStorage – und kurz Node.js und npm.
Spielplatz
Code-Editor mit Konsole – ausgeführt im Web Worker mit Zeitlimit gegen Endlosschleifen.
Übungen
25 Aufgaben mit automatischer Prüfung durch Testfälle – vom Quadrat bis Promise.any.
Spickzettel
Die wichtigsten Syntax-Bausteine auf einen Blick, durchsuchbar.
🧠Wie JavaScript läuft – das Modell in einem Bild
┌──────────── JavaScript-Engine ────────────┐ ┌──── Umgebung (Browser/Node) ────┐
│ Heap (Objekte) Call Stack │ │ Timer · fetch · DOM-Events │
│ ┌─────────────┐ ┌──────────────┐ │ │ (Web-APIs bzw. libuv) │
│ │ {…} [ … ] │ │ innen() │ │ └───────────────┬─────────────────┘
│ │ ƒ "…" │ │ aussen() │ │ │ fertig → Callback
│ └─────────────┘ │ Skript │ │ ▼
│ └──────▲───────┘ │ ┌─ Microtask-Queue ─┐ ┌─ Task-Queue ──┐
└───────────────────────────────┼───────────┘ │ then · await · │ │ setTimeout · │
│ │ queueMicrotask │ │ Events · I/O │
└── Event Loop ─┴───── zuerst ──────┴─┴── danach ─────┘1. Synchroner Code läuft komplett durch – nichts unterbricht ihn.
2. Ist der Call Stack leer, leert die Event Loop die Microtask-Queue vollständig.
3. Dann holt sie einen Task (z. B. einen abgelaufenen Timer) – und danach wieder alle Microtasks.
4. Im Browser wird zwischendurch gerendert. Ein langer synchroner Block friert deshalb die Seite ein.
Im Debugger ansehen →🆕Neu in ECMAScript 2025 und 2026
RegExp.escape
nicht prüfbarText sicher in einen regulären Ausdruck einbauen – Sonderzeichen werden maskiert.
1RegExp.escape("1.5 + 2");
"\\x31\\.5\\x20\\+\\x202"Array.fromAsync
nicht prüfbarWie Array.from, aber für asynchrone Iterables – liefert ein Promise auf das Array.
1async function* quelle() { yield 1; yield 2; }2await Array.fromAsync(quelle());
[1, 2]Error.isError
nicht prüfbarErkennt echte Error-Objekte zuverlässig – auch aus anderen Realms (iframes), anders als instanceof.
1Error.isError(new TypeError());2Error.isError({ message: "x" });
true · falseMath.sumPrecise
nicht prüfbarSummiert ohne Zwischenrundungsfehler.
10.1 + 0.2 + 0.3;2Math.sumPrecise([0.1, 0.2, 0.3]);
0.6000000000000001 · 0.6Uint8Array ↔ Base64/Hex
nicht prüfbarBytes direkt in Base64 bzw. Hex umwandeln und zurück.
1new Uint8Array([72, 97, 108, 108, 111]).toBase64();2Uint8Array.fromBase64("SGFsbG8=");
"SGFsbG8=" · Uint8Array [72, 97, 108, 108, 111]Iterator.concat
nicht prüfbarMehrere Iterables hintereinander als einen Iterator durchlaufen.
1[...Iterator.concat([1, 2], [3])];
[1, 2, 3]JSON.parse mit Quelltext
nicht prüfbarDer Reviver bekommt den Original-Text – große Zahlen gehen nicht mehr verloren.
1JSON.parse("12345678901234567890", (k, v, ctx) => ctx.source);
"12345678901234567890"Map.prototype.getOrInsert (Upsert)
nicht prüfbarWert holen oder – falls noch nicht vorhanden – einfügen, in einem Schritt.
1const m = new Map();2m.getOrInsert("a", 1);3m.getOrInsert("a", 2); // bleibt 1
1🕰️Zeitleiste
Brendan Eich entwickelt die Sprache in 10 Tagen für Netscape.
Erster ECMA-Standard (ECMA-262).
Strict Mode, JSON, Array-Methoden wie forEach/map/filter.
let/const, Arrow-Funktionen, Klassen, Module, Promises, Destructuring, Template-Literals.
async/await.
Optional Chaining ?., Nullish Coalescing ??, BigInt, Promise.allSettled.
Top-level await, private Felder #x, .at().
toSorted, toReversed, with, findLast.
Object.groupBy, Promise.withResolvers.
Iterator-Helfer, Set-Methoden, Promise.try, JSON-Module.
RegExp.escape, Array.fromAsync, Error.isError, Math.sumPrecise, Base64.