JavaScript im Detail Die Sprache, ihre Laufzeit und alles dazwischen

// Diese Schleife friert die gesamte Seite für 3 Sekunden ein.
const ende = Date.now() + 3000;
while (Date.now() < ende) { /* nichts tun, aber beschäftigt */ }

// Ein Stack Overflow entsteht, wenn der Stapel nicht mehr abgebaut wird:
function endlos() { return endlos(); }
// endlos();  →  RangeError: Maximum call stack size exceeded

console.log('1 – synchron');

setTimeout(() => console.log('4 – Makrotask'), 0);

Promise.resolve().then(() => console.log('3 – Mikrotask'));

console.log('2 – synchron');

// Ausgabe: 1, 2, 3, 4
// Obwohl setTimeout mit 0 ms vorher registriert wurde, kommt der
// Promise-Callback zuerst: Mikrotasks haben immer Vorrang.

// 1) return beendet die Zeile — immer.
function falsch() {
  return
    { wert: 42 };      // unerreichbar
}
falsch();              // undefined, nicht { wert: 42 }

// 2) Eine Zeile, die mit ( oder [ beginnt, hängt sich an die vorherige.
const a = 1
const b = 2
const c = a + b
;[a, b, c].forEach(n => console.log(n))   // führendes ; nötig

// einzeilig

/* mehrzeilig,
   nicht schachtelbar */

/**
 * JSDoc: wird von Editoren und TypeScript ausgewertet.
 * @param {string} name  Anzuzeigender Name
 * @param {number} [alter]  Optional
 * @returns {string}
 */
function begruessung(name, alter) {
  return alter ? `${name} (${alter})` : name;
}

console.log(a);       // undefined  — var ist da, aber leer
console.log(fn());    // "ok"       — Funktionsdeklaration ist vollständig da
console.log(b);       // ReferenceError: Cannot access 'b' before initialization

var a = 1;
function fn() { return 'ok'; }
let b = 2;

function zaehlerErzeugen(start = 0) {
  let stand = start;                    // lebt weiter, ist aber von außen unerreichbar
  return {
    hoch:  () => ++stand,
    runter:() => --stand,
    lesen: () => stand,
  };
}

const z = zaehlerErzeugen(10);
z.hoch();          // 11
z.hoch();          // 12
z.lesen();         // 12
z.stand;           // undefined — kein Zugriff von außen

// 1) Dezimalbrüche sind binär nicht exakt darstellbar
0.1 + 0.2;                      // 0.30000000000000004
0.1 + 0.2 === 0.3;              // false
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON;   // true — so vergleicht man

// 2) Oberhalb von 2^53 gehen Ganzzahlen verloren
Number.MAX_SAFE_INTEGER;        // 9007199254740991
9007199254740992 === 9007199254740993;        // true (!)
9007199254740993n;              // BigInt — exakt

// 3) NaN ist zu nichts gleich, auch nicht zu sich selbst
NaN === NaN;                    // false
Number.isNaN(NaN);              // true      — korrekt
isNaN('abc');                   // true      — wandelt vorher um, irreführend
Object.is(NaN, NaN);            // true

const name = 'Welt';

// Template Literal: Interpolation und Mehrzeiligkeit
const text = `Hallo ${name},
es ist ${new Date().getFullYear()}.`;

// Unveränderlichkeit
let s = 'abc';
s[0] = 'x';            // still wirkungslos (bzw. TypeError im strict mode)
s = 'x' + s.slice(1);  // so geht es

// UTF-16 zeigt sich bei Emoji
'😀'.length;            // 2 — zwei Code Units
[...'😀'].length;       // 1 — der Iterator läuft über Code Points
Intl.Segmenter && [...new Intl.Segmenter().segment('👨‍👩‍👧')].length;  // 1 — echte Graphem-Cluster

// Nützliche Methoden
'  x '.trim();                 // 'x'
'a-b-c'.split('-');            // ['a','b','c']
'abc'.at(-1);                  // 'c'
'5'.padStart(3, '0');          // '005'
'ab'.repeat(3);                // 'ababab'
'Straße'.localeCompare('Strasse', 'de');   // sprachbewusster Vergleich

const id = Symbol('id');           // Der Text ist nur eine Beschreibung
Symbol('id') === Symbol('id');     // false — jedes Symbol ist eindeutig

const nutzer = { name: 'Ada', [id]: 7 };
Object.keys(nutzer);               // ['name'] — Symbole tauchen nicht auf
JSON.stringify(nutzer);            // '{"name":"Ada"}'
nutzer[id];                        // 7

// Well-known Symbols greifen in Sprachmechanismen ein
class Bereich {
  constructor(a, b) { this.a = a; this.b = b; }
  *[Symbol.iterator]() { for (let i = this.a; i <= this.b; i++) yield i; }
  get [Symbol.toStringTag]() { return 'Bereich'; }
}
[...new Bereich(1, 4)];            // [1, 2, 3, 4]

let a = 1, b = a;  b++;            // a bleibt 1 — Primitive werden kopiert

const o1 = { n: 1 };
const o2 = o1;  o2.n = 99;
o1.n;                              // 99 — beide zeigen auf dasselbe Objekt
o1 === o2;                         // true — Identität, nicht Inhalt

{ n: 1 } === { n: 1 };             // false — zwei verschiedene Objekte

// Flache Kopie
const flach = { ...o1 };
// Tiefe Kopie (Browser & Node ≥ 17, kein Teil der Sprachnorm)
const tief = structuredClone({ a: { b: [1, 2] } });

false, 0, -0, 0n, '', null, undefined, NaN

// Alles andere ist truthy — auch das hier:
Boolean([]);          // true  — leeres Array
Boolean({});          // true  — leeres Objekt
Boolean('0');         // true  — nicht-leerer String
Boolean('false');     // true
Boolean(function(){});// true

0 == '';          // true
0 == '0';         // true
'' == '0';        // false      ← nicht transitiv!

null == undefined;  // true
null == 0;          // false
null >= 0;          // true     ← Vergleich wandelt anders um als Gleichheit

[] == false;      // true
[] == ![];        // true
'\n\t ' == 0;     // true

[] + [];        // ''                — beide werden zu ''
[] + {};        // '[object Object]'
[1,2] + [3];    // '1,23'            — Array.toString() fügt Kommas ein

'5' - 2;        // 3   — Minus kennt nur Zahlen
'5' + 2;        // '52' — Plus bevorzugt Strings, sobald einer beteiligt ist
+'5';           // 5   — unäres Plus wandelt in eine Zahl

const geld = {
  betrag: 12.5,
  [Symbol.toPrimitive](hinweis) {
    return hinweis === 'number' ? this.betrag : `${this.betrag} €`;
  },
};
+geld;          // 12.5
`${geld}`;      // '12.5 €'

Number('42');         // 42
Number('42px');       // NaN        — streng
parseInt('42px', 10); // 42         — liest, solange es passt; Basis immer angeben
parseFloat('3.5rem'); // 3.5

String(42);           // '42'
(42).toString(2);     // '101010'   — Binärdarstellung
(1234.5).toFixed(2);  // '1234.50'  — als String, kaufmännisch nicht exakt

Boolean(wert);        // explizit
!!wert;               // dasselbe, kürzer, verbreitet

// Zahlen lesbar formatieren — sprachbewusst
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' })
  .format(1234.5);    // '1.234,50 €'

7 / 2;        // 3.5   — keine Ganzzahldivision
7 % 3;        // 1     — Rest, behält das Vorzeichen des Dividenden
-7 % 3;       // -1    (nicht 2, wie in Python)
2 ** 10;      // 1024  — Potenz, rechtsassoziativ
Math.trunc(7 / 2);   // 3   — Ganzzahlanteil

let n = 5;
n += 2;  n **= 2;  n %= 10;   // alle Operatoren haben eine Zuweisungsform
n++;     // gibt den alten Wert zurück, erhöht dann
++n;     // erhöht, gibt dann den neuen Wert zurück

'a' || 'b';       // 'a'   — erster truthy Wert
null || 'b';      // 'b'
'a' && 'b';       // 'b'   — letzter Wert, wenn alle truthy
0 && 'b';         // 0

// ?? reagiert NUR auf null und undefined — nicht auf 0 oder ''
const limit1 = eingabe || 10;   // 0 wird zu 10  ← meist ein Bug
const limit2 = eingabe ?? 10;   // 0 bleibt 0    ← meist gemeint

// Logische Zuweisung (ES2021)
optionen.tiefe ??= 3;    // nur setzen, wenn null/undefined
cache.wert ||= teuer();  // nur setzen, wenn falsy
flag &&= pruefe();       // nur setzen, wenn truthy

antwort?.daten?.nutzer?.name;      // undefined statt TypeError
antwort?.liste?.[0];               // auch für Indexzugriffe
objekt.methode?.();                // ruft nur auf, wenn die Methode existiert

// Kombination mit ?? ist das übliche Muster
const name = antwort?.daten?.nutzer?.name ?? 'Unbekannt';

// Spread — auseinanderziehen
const zusammen = [...a, ...b];
const kopie   = { ...original, ueberschrieben: 1 };   // spätere gewinnen
Math.max(...zahlen);
[...'abc'];                     // ['a','b','c']

// Rest — einsammeln
function summe(...werte) { return werte.reduce((s, w) => s + w, 0); }
const [erstes, ...restliche] = liste;
const { id, ...uebrige } = objekt;

if (punkte >= 90)      note = 1;
else if (punkte >= 75) note = 2;
else                   note = 3;

// Ternär — ein Ausdruck, also überall verwendbar
const status = punkte >= 50 ? 'bestanden' : 'nicht bestanden';

// switch vergleicht mit === und fällt ohne break durch
switch (typ) {
  case 'a':
  case 'b':                    // gewollter Durchfall: a und b gleich behandeln
    behandleAB();
    break;
  case 'c': {
    const temp = 1;            // Block nötig, sonst gilt die Deklaration
    behandleC(temp);           // für den ganzen switch
    break;
  }
  default:
    unbekannt();
}

const liste = ['a', 'b', 'c'];
liste.extra = 'x';

for (const wert of liste) console.log(wert);   // 'a','b','c'   — nur Elemente
for (const key  in liste) console.log(key);    // '0','1','2','extra' — Strings!

// Index und Wert zugleich
for (const [i, wert] of liste.entries()) console.log(i, wert);

// Objekte durchlaufen
for (const [k, v] of Object.entries({ a: 1, b: 2 })) console.log(k, v);

aussen:
for (const zeile of matrix) {
  for (const zelle of zeile) {
    if (zelle === ziel) break aussen;    // verlässt beide Schleifen
    if (zelle == null) continue aussen;  // nächste Zeile
  }
}

function deklaration(a, b) { return a + b; }        // gehoistet, hat eigenes this
const ausdruck = function (a, b) { return a + b; }; // nicht gehoistet
const pfeil = (a, b) => a + b;                      // kein eigenes this, implizites return
const methode = { addiere(a, b) { return a + b; } };// Kurzform in Objekten

// Arrow-Feinheiten
const quadrat = n => n * n;             // ein Parameter: Klammern optional
const leer    = () => ({});             // Objektliteral in Klammern, sonst Block
const async_  = async () => await f();

// Default greift nur bei undefined, nicht bei null oder 0
function gruss(name = 'Welt') { return `Hallo ${name}`; }
gruss();            // 'Hallo Welt'
gruss(undefined);   // 'Hallo Welt'
gruss(null);        // 'Hallo null'

// Defaults dürfen frühere Parameter verwenden
function bereich(start, ende = start + 10) { /* … */ }

// Benannte Parameter per Destructuring — die übliche Lösung für viele Optionen
function verbinde(url, { timeout = 5000, wiederholungen = 3, kopfzeilen = {} } = {}) {
  // …
}
verbinde('/api', { timeout: 1000 });

// Rest sammelt den Überhang
function protokolliere(stufe, ...teile) { console.log(stufe, ...teile); }

const zaehler = {
  stand: 0,
  hoch() { this.stand++; },
};

zaehler.hoch();                       // ✓ this === zaehler

const losgeloest = zaehler.hoch;
losgeloest();                         // ✗ TypeError — this ist undefined

setTimeout(zaehler.hoch, 100);        // ✗ dasselbe Problem

// Auswege
setTimeout(() => zaehler.hoch(), 100);        // 1) Arrow als Hülle
setTimeout(zaehler.hoch.bind(zaehler), 100);  // 2) fest binden
class Z { stand = 0; hoch = () => { this.stand++; }; }  // 3) Feld mit Arrow

// Funktion als Argument
const verdoppelt = zahlen.map(n => n * 2);

// Funktion als Rückgabe
const multiplizierer = faktor => n => n * faktor;
const verdreifache = multiplizierer(3);
verdreifache(7);                       // 21

// Praktische Bausteine
function entprellen(fn, ms = 300) {
  let marke;
  return (...args) => {
    clearTimeout(marke);
    marke = setTimeout(() => fn(...args), ms);
  };
}

function merken(fn) {
  const cache = new Map();
  return (...args) => {
    const schluessel = JSON.stringify(args);
    if (!cache.has(schluessel)) cache.set(schluessel, fn(...args));
    return cache.get(schluessel);
  };
}

const schluessel = 'dynamisch';
const wert = 42;

const obj = {
  name: 'Ada',                  // normale Eigenschaft
  wert,                         // Kurzform für wert: wert
  [schluessel]: true,           // berechneter Schlüssel
  begruesse() { return `Hallo ${this.name}`; },   // Methodenkurzform
  get initialen() { return this.name[0]; },       // Getter
  set initialen(v) { this.name = v; },            // Setter
};

obj.name;            // Punktnotation
obj['name'];         // Klammernotation — nötig für dynamische/ungültige Schlüssel
obj?.fehlt?.tief;    // sicher

'name' in obj;                              // true — auch geerbte
Object.hasOwn(obj, 'name');                 // true — nur eigene (ES2022)

const { name, alter = 0, adresse: { stadt } = {} } = nutzer;
//      ^ direkt    ^ Default        ^ verschachtelt + umbenannt

const [erstes, , drittes = 0, ...rest] = werte;
//              ^ übersprungen

// Tausch ohne Hilfsvariable
[a, b] = [b, a];

// In Parametern und Schleifen
function zeichne({ x = 0, y = 0 } = {}) { /* … */ }
for (const { id, name } of nutzerListe) { /* … */ }

// Rückgabe mehrerer Werte
function teilen(text) { return { kopf: text[0], rumpf: text.slice(1) }; }
const { kopf, rumpf } = teilen('Hallo');

Object.keys(obj);        // ['a','b']         eigene, aufzählbare String-Schlüssel
Object.values(obj);      // [1, 2]
Object.entries(obj);     // [['a',1], ['b',2]]
Object.fromEntries(paare);  // Rückweg — auch für Map und URLSearchParams

Object.assign(ziel, q1, q2);     // mutiert das Ziel
const neu = { ...q1, ...q2 };    // erzeugt ein neues Objekt — meist besser

Object.freeze(obj);      // flach einfrieren; Verschachteltes bleibt änderbar
Object.isFrozen(obj);

// Feinsteuerung über Property Descriptors
Object.defineProperty(obj, 'id', {
  value: 7,
  writable: false,       // nicht überschreibbar
  enumerable: false,     // taucht nicht in Object.keys / for…in auf
  configurable: false,   // nicht löschbar, nicht neu definierbar
});

// Objekt ganz ohne Prototyp — sicher als Wörterbuch
const woerterbuch = Object.create(null);
woerterbuch.toString;    // undefined — keine geerbten Überraschungen

const original = { a: 1, tief: { b: 2 }, datum: new Date() };

// 1) Flach — verschachtelte Objekte bleiben geteilt
const flach = { ...original };
flach.tief.b = 99;
original.tief.b;         // 99 — dieselbe Referenz

// 2) JSON-Umweg — funktioniert, verliert aber viel
const json = JSON.parse(JSON.stringify(original));
json.datum;              // String, kein Date
// verliert außerdem: undefined, Funktionen, Symbole, Map, Set, BigInt (wirft),
// und scheitert an zyklischen Strukturen

// 3) structuredClone — der richtige Weg (Browser & Node ≥ 17)
const tief = structuredClone(original);
tief.datum instanceof Date;   // true — Date, Map, Set, zyklische Referenzen bleiben
// Ausnahme: Funktionen und DOM-Knoten können nicht geklont werden

const tier = {
  atmet: true,
  beschreibe() { return `${this.name} atmet: ${this.atmet}`; },
};

const hund = Object.create(tier);     // hund.[[Prototype]] === tier
hund.name = 'Rex';

hund.atmet;                // true — nicht eigen, über die Kette gefunden
hund.beschreibe();         // 'Rex atmet: true' — this bleibt hund
Object.hasOwn(hund, 'atmet');   // false

Object.getPrototypeOf(hund) === tier;               // true
Object.getPrototypeOf(tier) === Object.prototype;   // true
Object.getPrototypeOf(Object.prototype);            // null — Ende der Kette

// Schreiben legt IMMER eine eigene Eigenschaft an, nie auf dem Prototyp
hund.atmet = false;
tier.atmet;                // true — unberührt

class Konto {
  #saldo = 0;                      // privat — nur innerhalb der Klasse sichtbar
  static #anzahl = 0;              // privat und statisch
  static WAEHRUNG = 'EUR';         // öffentliches statisches Feld

  static { /* statischer Initialisierungsblock, ES2022 */ }

  constructor(inhaber, start = 0) {
    this.inhaber = inhaber;
    this.#saldo = start;
    Konto.#anzahl++;
  }

  get saldo() { return this.#saldo; }            // nur lesbar von außen

  einzahlen(betrag) {
    if (betrag <= 0) throw new RangeError('Betrag muss positiv sein');
    this.#saldo += betrag;
    return this;                                 // ermöglicht Verkettung
  }

  static anzahl() { return Konto.#anzahl; }
  static von(daten) { return new Konto(daten.inhaber, daten.start); }  // Factory

  toString() { return `${this.inhaber}: ${this.#saldo} ${Konto.WAEHRUNG}`; }
}

const k = new Konto('Ada', 100).einzahlen(50);
k.saldo;          // 150
k.#saldo;         // SyntaxError — echte Kapselung, nicht nur Konvention

class Sparkonto extends Konto {
  constructor(inhaber, start, zins) {
    super(inhaber, start);     // MUSS vor jedem this-Zugriff stehen
    this.zins = zins;
  }

  verzinsen() {
    this.einzahlen(this.saldo * this.zins);
  }

  toString() {
    return `${super.toString()} (${this.zins * 100} %)`;   // Basisversion aufrufen
  }
}

const s = new Sparkonto('Grace', 1000, 0.02);
s instanceof Sparkonto;   // true
s instanceof Konto;       // true — instanceof prüft die ganze Prototypenkette

// Eingebaute Klassen sind erweiterbar
class ValidierungsFehler extends Error {
  constructor(feld, ursache) {
    super(`Feld "${feld}" ist ungültig`, { cause: ursache });
    this.name = 'ValidierungsFehler';
    this.feld = feld;
  }
}

const a = [1, 2, 3];
Array.from({ length: 5 }, (_, i) => i * i);   // [0,1,4,9,16]
Array.of(7);                                   // [7]
new Array(7);                                  // [ leer × 7 ] — Falle, kein [7]

a.length = 1;        // kürzt destruktiv: a ist jetzt [1]
a[10] = 'x';         // erzeugt Lücken; a.length ist 11

Array.isArray(a);    // true — typeof a wäre nur 'object'

const nutzer = [
  { name: 'Ada',   alter: 36, rolle: 'admin' },
  { name: 'Grace', alter: 45, rolle: 'nutzer' },
  { name: 'Linus', alter: 28, rolle: 'admin' },
];

// Transformieren
nutzer.map(n => n.name);                      // ['Ada','Grace','Linus']
nutzer.filter(n => n.rolle === 'admin');      // zwei Einträge
nutzer.flatMap(n => [n.name, n.rolle]);       // map + eine Ebene flach

// Suchen
nutzer.find(n => n.alter > 40);               // das Objekt Grace
nutzer.findIndex(n => n.name === 'Ada');      // 0
nutzer.findLast(n => n.rolle === 'admin');    // Linus (ES2023)
nutzer.some(n => n.alter > 40);               // true — mindestens einer
nutzer.every(n => n.alter > 20);              // true — alle
[1,2,3].includes(2);                          // true — findet auch NaN

// Zusammenfassen
nutzer.reduce((summe, n) => summe + n.alter, 0);        // 109
nutzer.map(n => n.name).join(', ');                     // 'Ada, Grace, Linus'

// Gruppieren (ES2024)
Object.groupBy(nutzer, n => n.rolle);
// { admin: [Ada, Linus], nutzer: [Grace] }

// Zugriff
nutzer.at(-1);                                // letztes Element (ES2022)
[[1,[2]],[3]].flat(2);                        // [1,2,3]

const m = new Map([['a', 1], ['b', 2]]);
m.set(objektAlsSchluessel, 'geht auch').get('a');   // 1
m.has('a'); m.delete('a'); m.size;
for (const [k, v] of m) { /* … */ }
Object.fromEntries(m);                 // zurück in ein Objekt

const s = new Set([1, 2, 2, 3]);       // [1,2,3] — Duplikate entfallen
[...new Set(liste)];                   // der Standardweg zum Entduplizieren

// Mengenoperationen (ES2025)
const a = new Set([1,2,3]), b = new Set([2,3,4]);
a.union(b);              // {1,2,3,4}
a.intersection(b);       // {2,3}
a.difference(b);         // {1}
a.symmetricDifference(b);// {1,4}
a.isSubsetOf(b);         // false

// WeakMap / WeakSet: Schlüssel dürfen vom Garbage Collector eingesammelt werden.
// Ideal für Metadaten zu Objekten, ohne deren Lebensdauer zu verlängern.
const meta = new WeakMap();
meta.set(domKnoten, { besucht: true });   // hält den Knoten nicht am Leben

try {
  riskant();
} catch (fehler) {              // Bindung seit ES2019 weglassbar: catch { … }
  if (fehler instanceof TypeError) behandle(fehler);
  else throw fehler;            // nicht Zuständiges weiterreichen
} finally {
  aufraeumen();                 // läuft immer — auch nach return oder throw
}

class ApiFehler extends Error {
  constructor(nachricht, { status, ...rest } = {}) {
    super(nachricht, rest);        // rest kann { cause } enthalten (ES2022)
    this.name = 'ApiFehler';
    this.status = status;
  }
}

try {
  await abrufen('/nutzer/7');
} catch (ursache) {
  throw new ApiFehler('Nutzer konnte nicht geladen werden', {
    status: 502,
    cause: ursache,               // die ursprüngliche Ursache bleibt erhalten
  });
}

// Browser
window.addEventListener('error', e => melde(e.error));
window.addEventListener('unhandledrejection', e => melde(e.reason));

// Node.js — hier sollte der Prozess danach kontrolliert enden
process.on('uncaughtException', (err) => { melde(err); process.exit(1); });
process.on('unhandledRejection', (grund) => { melde(grund); process.exit(1); });

ladeNutzer(id, (fehler, nutzer) => {          // Node-Konvention: Fehler zuerst
  if (fehler) return behandle(fehler);
  ladeBestellungen(nutzer, (fehler, best) => {
    if (fehler) return behandle(fehler);
    ladeDetails(best[0], (fehler, detail) => {   // „Callback Hell“
      if (fehler) return behandle(fehler);
      zeige(detail);
    });
  });
});

const warte = (ms) => new Promise(aufloesen => setTimeout(aufloesen, ms));

// Jedes .then gibt ein neues Promise zurück — daher die flache Kette
ladeNutzer(id)
  .then(nutzer => ladeBestellungen(nutzer))   // Rückgabe wird „ausgepackt“
  .then(best   => ladeDetails(best[0]))
  .then(zeige)
  .catch(behandle)                            // fängt Fehler der ganzen Kette
  .finally(() => ladeanzeigeAus());           // läuft immer

// ES2024: Auflöser von außen zugänglich machen
const { promise, resolve, reject } = Promise.withResolvers();

// Nacheinander: 300 ms
const a = await ladeA();   // 100 ms
const b = await ladeB();   // 100 ms
const c = await ladeC();   // 100 ms

// Gleichzeitig: 100 ms
const [a, b, c] = await Promise.all([ladeA(), ladeB(), ladeC()]);

// Wenn Teilergebnisse genügen
const ergebnisse = await Promise.allSettled(ids.map(ladeNutzer));
const geladen = ergebnisse
  .filter(r => r.status === 'fulfilled')
  .map(r => r.value);

// Zeitlimit per race
await Promise.race([
  abrufen(url),
  warte(5000).then(() => { throw new Error('Zeitüberschreitung'); }),
]);

async function zeigeDetails(id) {
  try {
    const nutzer = await ladeNutzer(id);
    const best   = await ladeBestellungen(nutzer);
    const detail = await ladeDetails(best[0]);
    zeige(detail);
  } catch (fehler) {
    behandle(fehler);           // fängt alles in diesem Block
  } finally {
    ladeanzeigeAus();
  }
}

// In Modulen auch auf oberster Ebene
const konfig = await (await fetch('/konfig.json')).json();

const steuerung = new AbortController();

const antwort = fetch('/gross.json', { signal: steuerung.signal })
  .catch(e => {
    if (e.name === 'AbortError') return;   // bewusst abgebrochen, kein Fehlerfall
    throw e;
  });

steuerung.abort();                        // bricht sofort ab

// Praktisch: Zeitlimit ohne eigene Logik
fetch(url, { signal: AbortSignal.timeout(5000) });

// Dasselbe Signal räumt auch Ereignis-Listener ab
element.addEventListener('click', fn, { signal: steuerung.signal });

const bisDrei = {
  [Symbol.iterator]() {
    let n = 0;
    return { next: () => (n < 3 ? { value: n++, done: false } : { value: undefined, done: true }) };
  },
};
[...bisDrei];       // [0, 1, 2]

function* bisDrei() { yield 0; yield 1; yield 2; }
[...bisDrei()];     // [0, 1, 2]

// Unendlich — kein Problem, weil nur bei Bedarf gerechnet wird
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) { yield a; [a, b] = [b, a + b]; }
}

function* nimm(iter, n) {
  let i = 0;
  for (const wert of iter) { if (i++ >= n) return; yield wert; }
}
[...nimm(fibonacci(), 8)];     // [0,1,1,2,3,5,8,13]

// yield* delegiert an ein anderes Iterierbares
function* alles() { yield* [1, 2]; yield* bisDrei(); }

// Generatoren nehmen auch Werte entgegen
function* dialog() {
  const name = yield 'Wie heißt du?';
  yield `Hallo ${name}`;
}
const d = dialog();
d.next().value;        // 'Wie heißt du?'
d.next('Ada').value;   // 'Hallo Ada'

async function* seiten(url) {
  let naechste = url;
  while (naechste) {
    const antwort = await fetch(naechste);
    const daten = await antwort.json();
    yield* daten.eintraege;              // einzeln herausgeben
    naechste = daten.weiter;
  }
}

for await (const eintrag of seiten('/api/nutzer')) {
  verarbeite(eintrag);                   // beginnt bei der ersten Seite
  if (genug()) break;                    // bricht sauber ab, lädt nicht weiter
}

// map/filter/take arbeiten jetzt direkt auf Iteratoren — bedarfsgesteuert
const ergebnis = fibonacci()
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .take(5)
  .toArray();                    // [0, 4, 64, 1156, 20164]

// Auf einem Array bräuchte .filter().map() erst eine vollständige Kopie —
// bei einer unendlichen Folge ginge es gar nicht.

// ---- mathe.js ----
export const PI = 3.14159;                     // benannter Export
export function flaeche(r) { return PI * r * r; }
export default class Kreis { /* … */ }         // höchstens einer pro Modul
export { intern as oeffentlich };              // umbenennen
export * from './geometrie.js';                // weiterreichen

// ---- app.js ----
import Kreis, { PI, flaeche } from './mathe.js';   // Default + benannte
import { flaeche as area } from './mathe.js';      // umbenennen
import * as mathe from './mathe.js';               // alles als Namensraum
import './nebenwirkung.js';                        // nur ausführen

// Dynamisch — gibt ein Promise zurück, ermöglicht Code-Splitting
const { schwer } = await import('./schwer.js');

// Import-Attribute (ES2025)
import daten from './daten.json' with { type: 'json' };

// ---- mathe.cjs ----
const PI = 3.14159;
module.exports = { PI, flaeche };
// oder: exports.PI = PI;

// ---- app.cjs ----
const { PI, flaeche } = require('./mathe.cjs');
const schwer = require('./schwer.cjs');     // synchron, dynamisch erlaubt

JSON.stringify(obj, null, 2);                 // eingerückt
JSON.stringify(obj, ['a', 'b']);              // nur diese Felder
JSON.stringify(obj, (k, v) => typeof v === 'bigint' ? String(v) : v);

JSON.parse(text, (k, v) => k === 'datum' ? new Date(v) : v);   // Reviver

// Was verloren geht: undefined, Funktionen und Symbole (entfallen),
// Date (wird String), Map/Set (werden {}), NaN/Infinity (werden null),
// BigInt (wirft TypeError), zyklische Strukturen (werfen TypeError).
// Ein Objekt kann per toJSON() selbst bestimmen, wie es serialisiert wird.

const jetzt = new Date();
Date.now();                                   // Millisekunden seit 1970
new Date('2026-09-12T10:00:00Z');             // ISO 8601 — einziges sicheres Format
jetzt.toISOString();

// Die bekannten Schwächen von Date:
new Date(2026, 8, 12);     // Monat 8 ist SEPTEMBER — Monate sind 0-basiert
jetzt.setDate(1);          // mutiert das Objekt
// keine Unterstützung für Zeitzonen außer UTC und der lokalen

// Temporal (Stage 3, wird ausgeliefert) löst all das:
// Temporal.PlainDate.from('2026-09-12').add({ days: 30 });
// Temporal.Now.zonedDateTimeISO('Europe/Berlin');
// Bis dahin: date-fns oder Luxon statt eigener Rechnerei.

const muster = /(?<jahr>\d{4})-(?<monat>\d{2})-(?<tag>\d{2})/u;
const { jahr, monat, tag } = '2026-09-12'.match(muster).groups;

'a1b2'.replace(/\d/g, 'X');                   // 'aXbX'
'a1b2'.replaceAll('1', 'X');                  // ohne /g möglich
[...'a1b2'.matchAll(/(\w)(\d)/g)];            // alle Treffer mit Gruppen

// Flags: g global · i ignoriert Groß/Klein · m mehrzeilig
//        s Punkt trifft Zeilenumbruch · u Unicode · y klebrig
//        d Indizes der Treffer · v erweiterte Mengen (ES2024)

RegExp.escape(nutzereingabe);                 // ES2025 — Eingaben entschärfen

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.5);
// '1.234,50 €'

new Intl.DateTimeFormat('de-DE', { dateStyle: 'long', timeStyle: 'short' }).format(new Date());
// '12. September 2026 um 10:00'

new Intl.RelativeTimeFormat('de', { numeric: 'auto' }).format(-1, 'day');   // 'gestern'
new Intl.ListFormat('de').format(['a', 'b', 'c']);                          // 'a, b und c'
new Intl.PluralRules('de').select(1);                                       // 'one'

// Korrekte Sortierung — 'ä' gehört bei 'a', nicht ans Ende
['Zeder', 'Äpfel', 'Birne'].sort(new Intl.Collator('de').compare);

Math.round(2.5);      // 3   — .5 rundet immer auf, auch bei -2.5 → -2
Math.trunc(-2.7);     // -2  — schneidet ab
Math.floor(-2.7);     // -3  — rundet nach unten
Math.hypot(3, 4);     // 5
Math.clz32, Math.sign, Math.cbrt, Math.log2;

const zufall = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
crypto.randomUUID();                // kryptografisch sicher, Browser & Node
crypto.getRandomValues(new Uint8Array(16));

Number.isInteger(5.0);      // true
Number.isFinite('5');       // false — im Gegensatz zum globalen isFinite('5')

const beobachtet = new Proxy({ a: 1 }, {
  get(ziel, schluessel, empfaenger) {
    console.log('lese', schluessel);
    return Reflect.get(ziel, schluessel, empfaenger);
  },
  set(ziel, schluessel, wert, empfaenger) {
    if (typeof wert !== 'number') throw new TypeError('nur Zahlen');
    return Reflect.set(ziel, schluessel, wert, empfaenger);
  },
  has(ziel, schluessel) { return !schluessel.startsWith('_') && schluessel in ziel; },
});

beobachtet.a;          // protokolliert 'lese a', liefert 1
beobachtet.b = 'x';    // TypeError

fn.length;                       // Zahl der Parameter vor dem ersten Default/Rest
fn.name;                         // Name der Funktion — auch bei const f = () => {}
Object.getOwnPropertyNames(obj); // auch nicht-aufzählbare
Object.getOwnPropertySymbols(obj);
Object.getOwnPropertyDescriptors(obj);

// Ein zuverlässigerer Typtest als typeof
const typVon = (w) => Object.prototype.toString.call(w).slice(8, -1);
typVon([]);          // 'Array'
typVon(null);        // 'Null'
typVon(new Date());  // 'Date'

performance.now();                                  // hochauflösend, in ms
performance.mark('start');
performance.measure('arbeit', 'start');

console.time('schleife'); /* … */ console.timeEnd('schleife');

// Im Browser: der Performance-Tab der DevTools zeigt Flame-Graph,
// Haupt-Thread-Blockaden und Layout-Thrashing.
// In Node: node --prof, --cpu-prof oder der eingebaute Inspector.

{
  "name": "mein-projekt",
  "type": "module",
  "scripts": { "dev": "vite", "test": "vitest", "build": "vite build" },
  "dependencies":    { "zod": "^3.23.0" },
  "devDependencies": { "vitest": "^2.0.0" },
  "engines": { "node": ">=20" }
}