JavaScript-Snippets
Alle Snippets für JavaScript — copy-&-paste-fertig, erklärt und aus der Praxis.
Event Delegation in JavaScript – ein Listener statt hundert
Statt jedem Button einen eigenen Click-Listener zu geben, hängst du einen einzigen an den Container und fragst über event.target ab, was geklickt wurde. Das ist schneller, spart Speicher und funktioniert sogar für später hinzugefügte Elemente.
Promise.all in JavaScript – mehrere Requests parallel statt nacheinander
Drei await-Zeilen hintereinander warten unnötig lang – jede Anfrage blockiert die nächste. Mit Promise.all laufen sie gleichzeitig und du wartest nur so lange wie auf die langsamste. Inklusive der robusteren Variante allSettled.
Optional Chaining (?.) und Nullish Coalescing (??) in JavaScript
„Cannot read properties of undefined" gehört zu den häufigsten JS-Fehlern. Mit ?. greifst du sicher auf tief verschachtelte Felder zu, mit ?? setzt du saubere Standardwerte – und vermeidest die klassische ||-Falle bei 0 und "".
Destructuring und Spread in JavaScript – Objekte und Arrays elegant auspacken
Mit Destructuring holst du gezielt Werte aus Objekten und Arrays, mit dem Spread-Operator kopierst und kombinierst du sie. Zusammen sparen sie dir jede Menge Zwischenvariablen – und den unbeabsichtigten Mutations-Bug.
map, filter und reduce in JavaScript – Arrays ohne for-Schleife verarbeiten
Drei Array-Methoden ersetzen die meisten for-Schleifen: map wandelt jedes Element um, filter siebt, reduce fasst alles zu einem Wert zusammen. Ich erkläre reduce so, dass es endlich klick macht.
Elemente beim Scrollen einblenden mit IntersectionObserver
Bilder erst laden, wenn sie sichtbar werden, oder Abschnitte sanft einblenden – ganz ohne Scroll-Event-Gehacke. Der IntersectionObserver macht das effizient und in wenigen Zeilen.
Verlässliches JSON aus einem LLM – mit Structured Outputs statt Hoffnung
Antworte nur mit JSON" reicht nicht – irgendwann kommt doch ein "Klar, hier ist dein JSON:" davor und dein JSON.parse() stürzt ab. Mit einem JSON-Schema erzwingst du garantiert gültige Struktur.
ChatGPT-Antworten live streamen im Browser (OpenAI, fetch + SSE)
Statt auf die komplette KI-Antwort zu warten, lässt du sie Wort für Wort erscheinen – wie im echten ChatGPT. So liest du den Server-Sent-Events-Stream der OpenAI-API mit reinem fetch, ohne Bibliothek.
fetch() mit async/await und sauberem try/catch
Daten von einer API holen ist mit fetch() und async/await lesbar wie synchroner Code. Der Haken: fetch wirft bei 404 oder 500 keinen Fehler – du musst response.ok selbst prüfen.
Debounce in Vanilla JavaScript – ohne Bibliothek
Eine Suche, die bei jedem Tastendruck feuert, überlastet den Server. Mit einer kleinen debounce-Funktion wartest du, bis der Nutzer kurz Pause macht – in wenigen Zeilen, ganz ohne Framework.