JavaScript-Snippets
Alle Snippets für JavaScript — copy-&-paste-fertig, erklärt und aus der Praxis.
Web Worker – rechnen, ohne die Oberfläche einzufrieren
JavaScript hat im Browser genau einen Faden für alles: Klicks, Animationen, Layout – und deine Rechenschleife. Dauert die zwei Sekunden, ist die Seite zwei Sekunden lang tot. Ein Worker nimmt die Arbeit auf einen eigenen Faden.
Formulare ohne Neuladen abschicken – FormData und fetch
Ein Formular per JavaScript abzuschicken heißt nicht, jedes Feld einzeln auszulesen. FormData nimmt das ganze Formular, fetch schickt es weg – inklusive Dateien, und mit einer Fehlermeldung, die der Besucher versteht.
CustomEvent – Bausteine, die sich gegenseitig Bescheid sagen, ohne sich zu kennen
Sobald zwei Teile einer Seite aufeinander reagieren sollen, landet man schnell bei globalen Variablen oder Funktionsaufrufen quer durchs Projekt. Eigene Events entkoppeln das – mit denselben Mitteln, die der Browser selbst benutzt.
Promise.allSettled – wenn ein einziger Fehlschlag nicht alles kippen darf
Promise.all bricht beim ersten Fehler ab und wirft alle anderen Ergebnisse weg. Für ein Dashboard aus fünf Quellen ist das genau falsch: Vier Kacheln könnten Daten zeigen, aber die Seite bleibt leer.
Object.groupBy – Listen gruppieren, ohne reduce zu schreiben
„Alle Bestellungen nach Status" war jahrelang ein reduce mit Startwert, Prüfung auf das Fach und push. Seit Object.groupBy ist es eine Zeile – und die liest man auch nach einem halben Jahr noch.
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.