JavaScript 11 — Best Practices

In dieser Lektion lernst du bewährte Best Practices, mit denen dein JavaScript lesbar, robust und wartbar bleibt. Diese Regeln unterscheiden „es funktioniert“ von professionellem, langfristig tragfähigem Code.

1. Lesbarkeit vor Cleverness

Grundsatz.
Code wird viel häufiger gelesen als geschrieben. Lesbarkeit ist wichtiger als maximale Kürze.
Schlecht: 
const r=a=>a&&a.b&&a.b.c?a.b.c:0;
Gut: 
function getValue(obj) {
  if (!obj || !obj.b) return 0;
  return obj.b.c;
}

2. Verwende const und let korrekt

Nutze const standardmäßig und let nur, wenn eine Variable neu zugewiesen werden muss. 
const API_URL = "/api/users";
let count = 0;
count++;
var sollte in modernem JavaScript nicht mehr verwendet werden.

3. Vermeide globale Variablen

Globale Variablen führen zu Namenskonflikten und schwer nachvollziehbaren Fehlern.
Schlecht: 
window.total = 0;
Gut (Modul): 
let total = 0;
export function add(x) {
  total += x;
}

4. Kleine Funktionen mit klarer Aufgabe

Eine Funktion sollte eine Aufgabe erfüllen und diese klar benennen. 
// schlecht: macht zu viel
function handleUser(user) {
  validate(user);
  save(user);
  render(user);
}
// gut: getrennte Verantwortlichkeiten
function validateUser(user) { }
function saveUser(user) { }
function renderUser(user) { }

5. Klare und konsistente Benennung

Namen sind Teil der Dokumentation. Sie sollten Absicht ausdrücken, nicht Implementierung. 
const isAdmin = user.role === "admin";

6. Vergleiche immer streng

Verwende === und !== statt == und !=. 
// gut
if (value === 0) { }

// schlecht
if (value == 0) { }
Strikte Vergleiche verhindern implizite Typumwandlungen.

7. Frühes Beenden (Guard Clauses)

Guard Clauses reduzieren Verschachtelung und verbessern Lesbarkeit. 
function save(user) {
  if (!user) return;
  if (!user.name) return;

  // eigentliche Logik
}

8. Fehler explizit behandeln

Fehler sollten nicht ignoriert, sondern gezielt behandelt werden. 
async function load() {
  try {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error("HTTP Fehler");
  } catch (err) {
    console.error(err);
  }
}

9. Keine Magischen Werte

„Magische Zahlen“ oder Strings ohne Bedeutung erschweren Wartung.
Schlecht: 
if (status === 3) { }
Gut: 
const STATUS_DONE = 3;
if (status === STATUS_DONE) { }

10. Unveränderlichkeit bevorzugen

Unveränderliche Daten sind einfacher zu verstehen und weniger fehleranfällig. 
// statt Mutation
const updated = users.map(u =>
  u.id === id ? { ...u, active: true } : u
);

11. Konsistenter Stil

Ein einheitlicher Stil erhöht Lesbarkeit im Team.
Tools wie ESLint und Prettier helfen, diesen Stil automatisch durchzusetzen.

12. Performance nicht überoptimieren

Zuerst korrekt und lesbar, dann — falls nötig — optimieren.
Vorzeitige Optimierung ist eine der häufigsten Fehlerquellen.

13. Häufige Anti-Patterns

14. Übungen

Übung 1.
Refaktoriere eine Funktion, die mehrere Aufgaben erledigt, in kleinere Einzelfunktionen.
Übung 2.
Ersetze alle == durch === in einem bestehenden Script.
Übung 3.
Identifiziere „magische Werte“ in einem Projekt und ersetze sie durch Konstanten.

15. Zusammenfassung

Sauberer Code ist kein Zufall — er ist eine bewusste Entscheidung.