JavaScript-Snippets
Alle Snippets für JavaScript — copy-&-paste-fertig, erklärt und aus der Praxis.
toSorted, toReversed und with: Arrays sortieren, ohne das Original zu zerstören
array.sort() sortiert nicht eine Kopie, sondern das Array selbst – und genau daran ist schon mancher Zustand im Frontend stillschweigend kaputtgegangen. Seit ES2023 gibt es zu jeder dieser Methoden eine Variante, die eine Kopie zurückgibt.
Aufzählungen richtig verketten mit Intl.ListFormat
"a, b und c" von Hand zusammenzubauen geht fast immer schief – bei einem Element, bei zwei Elementen, beim letzten Komma. Intl.ListFormat macht es richtig, in jeder Sprache, ganz ohne Bibliothek.
requestAnimationFrame – die Animationsschleife, die zum Bildschirm passt
setInterval(schritt, 16) läuft auf einem 144-Hz-Monitor anders als auf einem alten Handy – und im Hintergrundtab einfach weiter. requestAnimationFrame löst beides, wenn man die verstrichene Zeit mitrechnet statt Bilder zu zählen.
Set und Map in JavaScript – doppelte Einträge loswerden und richtig zählen
Ein Objekt als Nachschlagetabelle geht – bis der Schlüssel eine Zahl ist, oder ein Objekt, oder zufällig "constructor" heißt. Set und Map machen genau das, wofür man Objekte bisher zweckentfremdet hat, nur ohne die Überraschungen.
ResizeObserver – auf die Größe eines Elements reagieren, nicht auf die des Fensters
window.onresize feuert nur, wenn sich das Fenster ändert – nicht, wenn eine Seitenleiste aufklappt oder Text nachlädt. ResizeObserver meldet dir die Größe des Elements selbst, und zwar ohne Endlosschleife.
In die Zwischenablage kopieren mit der Clipboard API
Ein Kopieren-Button ist eine Kleinigkeit, die Nutzer sofort bemerken – Rechnungsnummer, Gutscheincode, Link. document.execCommand ist dafür veraltet; navigator.clipboard ist der heutige Weg, braucht aber HTTPS und eine echte Nutzergeste.
localStorage richtig benutzen – JSON, Ausfallsicherheit und der volle Speicher
localStorage speichert nur Text, wirft im privaten Modus Fehler und ist irgendwann voll. Drei Zeilen Absicherung reichen, damit deine Seite deswegen nicht weiß bleibt.
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.