EMZETT.Guter JavaScript-Code ist lesbar, vorhersagbar und vermeidet bekannte Stolperfallen.
Lesbarkeit
- Sprechende Namen:
anzahlKundenstattn,istAktivstattflag. Funktionen sind Verben (berechneSumme), Booleans lesen sich wie Fragen (hatZugriff) - Kleine Funktionen: eine Funktion, eine Aufgabe
- Frühe Rückgabe statt tiefer Verschachtelung
- Keine magischen Zahlen:
const MAX_VERSUCHE = 3statt einer losen3 - Kommentare erklären das Warum, nicht das Was
Ergebnis
true true false
Empfohlene Gewohnheiten
| Tue | Statt |
|---|---|
const / let | var |
=== | == |
| Template-Strings | Text mit + zusammenkleben |
map/filter/reduce | Schleifen, die Arrays aufbauen |
?. und ?? | lange &&-Ketten |
async/await | verschachtelte Callbacks |
Module (import) | globale Variablen |
Häufige Fallen
1. Typumwandlung
Ergebnis
51 4 [object Object] 1,23 false 9007199254740992 [ 1, 10, 9 ] 8 31 0 0 0 NaN
2. this verloren
Ergebnis
Hallo Mia | Hallo undefined Hallo Tom | Hallo Mia
3. Veränderliche geteilte Daten
Ergebnis
[ 1, 2, 3 ] [ 1, 2, 3 ] [ 1, 2, 3, 4 ] [ 1 ] [ 1 ]
4. Vergessene await
Ergebnis
object true 42
5. Gleichheit von Objekten
Ergebnis
false false true false true true true
6. Schleifen und Closures mit var
Siehe Kapitel Gültigkeitsbereich: Nutze let/const in Schleifen.
7. Unveränderliches bevorzugen
Funktionen, die ihre Eingaben nicht verändern, sind leichter zu verstehen. Nutze toSorted, toReversed, Spread und structuredClone, statt Parameter zu mutieren.
Sicherheit im Web-Code
- XSS: Setze nie ungeprüfte Nutzereingaben per
innerHTMLein; benutzetextContentoder baue Elemente mitcreateElement - Keine Geheimnisse im Frontend: API-Schlüssel und Passwörter im Browsercode sind für alle sichtbar
- Eingaben nie vertrauen: Prüfe sie am Server, auch wenn der Browser sie schon geprüft hat
- eval() und new Function() nicht für Nutzereingaben verwenden
- Abhängigkeiten aktuell halten (
npm audit)
Leistung
- Nur messen, was langsam ist, nicht raten (
console.time, Performance-Tab) - DOM-Zugriffe bündeln, nicht in jeder Schleife
innerHTML +=ausführen - Große Listen mit Virtualisierung oder Paginierung anzeigen
- Ereignisse mit Debounce/Throttle drosseln
- Ressourcen nachladen, wenn sie gebraucht werden (
import(),loading="lazy")
Barrierefreiheit
- Native Elemente (
button,a,input) stattdivmit Klick-Listener - Alle Funktionen per Tastatur erreichbar machen
- Dynamische Änderungen mit
aria-liveoderrole="status"ankündigen - Fokus beim Öffnen und Schließen von Dialogen bewusst setzen
Merke
- Sprechende Namen, kleine Funktionen, frühe Rückgabe
const/let,===, Template-Strings,async/await- Fallen: Typumwandlung,
this, flache Kopien, vergesseneawait, Objektgleichheit - Eingaben nie ungeprüft in
innerHTML; keine Geheimnisse im Frontend - Erst messen, dann optimieren
Aufgabe
Gehe ein älteres Skript durch und ersetze var, == und verschachtelte Bedingungen durch moderne Muster. Schreibe zu jeder Änderung einen Satz, warum.