JavaScript-Snippets
Alle Snippets für JavaScript — copy-&-paste-fertig, erklärt und aus der Praxis.
URLSearchParams – Query-Strings sicher bauen und auslesen
Query-Strings von Hand zusammenzustückeln geht schnell schief – Sonderzeichen, Leerzeichen, Umlaute. URLSearchParams baut und liest sie korrekt kodiert, ganz ohne String-Basteln.
Throttle in Vanilla JavaScript – höchstens alle X Millisekunden feuern
Beim Scrollen oder bei Mausbewegung feuern Events dutzendfach pro Sekunde. Mit Throttle begrenzt du das auf einen Aufruf alle X Millisekunden – der Bruder von Debounce, aber fürs Dauerfeuer.
Tiefe Kopien in JavaScript mit structuredClone
Ein Spread `{...obj}` kopiert nur die oberste Ebene – verschachtelte Objekte teilen sich weiter denselben Speicher. structuredClone macht eine echte tiefe Kopie, eingebaut und ohne JSON-Umweg.
Zahlen, Währung und Datum formatieren mit Intl
1234.5 als „1.234,50 €" anzeigen? Mit dem eingebauten Intl-Objekt formatierst du Zahlen, Währungen und Datum korrekt für jede Sprache – ohne Bibliothek und ohne selbstgebaute Punkt-Komma-Logik.
fetch() abbrechen und mit Timeout absichern – AbortController
Ein fetch(), das ewig lädt, oder eine veraltete Suchanfrage – mit AbortController brichst du laufende Requests sauber ab und gibst ihnen ein Zeitlimit.
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.