Sauberer Code und häufige Fallen

Guter JavaScript-Code ist lesbar, vorhersagbar und vermeidet bekannte Stolperfallen.

Lesbarkeit

• Sprechende Namen: anzahlKunden statt n, istAktiv statt flag. 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 = 3 statt einer losen 3
• Kommentare erklären das Warum, nicht das Was

true true false

Empfohlene Gewohnheiten

Häufige Fallen

1. Typumwandlung

51 4 [object Object] 1,23
false 9007199254740992
[ 1, 10, 9 ]
8 31 0 0 0 NaN

2. this verloren

Hallo Mia | Hallo undefined
Hallo Tom | Hallo Mia

3. Veränderliche geteilte Daten

[ 1, 2, 3 ]
[ 1, 2, 3 ] [ 1, 2, 3, 4 ]
[ 1 ] [ 1 ]

4. Vergessene await

object true 42

5. Gleichheit von Objekten

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 innerHTML ein; benutze textContent oder baue Elemente mit createElement
• 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) statt div mit Klick-Listener
• Alle Funktionen per Tastatur erreichbar machen
• Dynamische Änderungen mit aria-live oder role="status" ankündigen
• Fokus beim Öffnen und Schließen von Dialogen bewusst setzen