Sauberer JavaScript-Code: Ein Leitfaden für alle, die für Menschen schreiben

Warum „sauberer Code“ nicht nur Ästhetik ist, sondern Geld und Zeit spart

Stellen Sie sich vor, Sie öffnen ein fremdes JavaScript-Projekt. Variablen heißen a, b, x1. Eine Funktion ist 300 Zeilen lang. Die Verschachtelung von Bedingungen ist wie eine Matroschka. Kommt Ihnen das bekannt vor? Wenn Sie schon einmal einen solchen „Autor“ verflucht haben, dann verstehen Sie bereits, warum sauberer Code notwendig ist.

Sauberer JavaScript-Code ist weder eine Modeerscheinung noch die Marotte eines Perfektionisten. Es ist ein Werkzeug, das Stunden des Debuggens spart, das Onboarding neuer Entwickler vereinfacht und die Wartungskosten des Projekts senkt. In diesem Artikel werden wir konkrete Regeln und Techniken besprechen, die Ihnen helfen, Code zu schreiben, der nicht nur für die Maschine, sondern auch für den Menschen verständlich ist.

Regel Nr. 1: Variablen- und Funktionsnamen sollten für sich selbst sprechen

Der häufigste Fehler von Anfängern ist die Verwendung kurzer, bedeutungsloser Namen. Schlechtes Beispiel:

let d = new Date();\nlet n = d.getDay();\nlet r = n === 0 || n === 6 ? 'Wochenende' : 'Werktag';\nconsole.log(r);\n

Gutes Beispiel:

const currentDate = new Date();\nconst dayOfWeek = currentDate.getDay();\nconst isWeekend = dayOfWeek === 0 || dayOfWeek === 6;\nconst dayType = isWeekend ? 'Wochenende' : 'Werktag';\nconsole.log(dayType);\n

Der Unterschied ist offensichtlich. In der zweiten Version verstehen wir sofort, was der Code tut, ohne zusätzliche Kommentare. Tipp: Verwenden Sie Substantive für Variablen und Verben für Funktionen. Zum Beispiel: getUserData(), calculateTotal(), isValidEmail().

Wie vermeidet man „magische Zahlen“?

Magische Zahlen sind Zahlen, deren Bedeutung ohne Kontext unklar ist. Verwenden Sie stattdessen Konstanten:

// Schlecht\nif (user.role === 1) { ... }\n\n// Gut\nconst ROLE_ADMIN = 1;\nif (user.role === ROLE_ADMIN) { ... }\n

Regel Nr. 2: Funktionen sollten klein sein und nur eine Sache tun

Das Prinzip der einzigen Verantwortung (Single Responsibility) gilt nicht nur für Klassen, sondern auch für Funktionen. Wenn eine Funktion drei Dinge tut, sollte sie in drei Funktionen aufgeteilt werden. Schlechtes Beispiel:

function processOrder(order) {\n    // Validierung\n    if (!order.items || order.items.length === 0) {\n        throw new Error('Warenkorb ist leer');\n    }\n    // Rabattberechnung\n    let discount = 0;\n    if (order.total > 1000) {\n        discount = 0.1;\n    }\n    // E-Mail senden\n    sendEmail(order.email, 'Ihre Bestellung ist eingegangen');\n    return order.total - order.total * discount;\n}\n

Gutes Beispiel (Refactoring):

function validateOrder(order) {\n    if (!order.items || order.items.length === 0) {\n        throw new Error('Warenkorb ist leer');\n    }\n}\n\nfunction calculateDiscount(total) {\n    return total > 1000 ? 0.1 : 0;\n}\n\nfunction notifyCustomer(email) {\n    sendEmail(email, 'Ihre Bestellung ist eingegangen');\n}\n\nfunction processOrder(order) {\n    validateOrder(order);\n    const discount = calculateDiscount(order.total);\n    notifyCustomer(order.email);\n    return order.total - order.total * discount;\n}\n

Eine solche Struktur ermöglicht es, jeden Teil separat zu testen und die Logik zu ändern, ohne den restlichen Code zu beeinträchtigen.

Regel Nr. 3: Vermeiden Sie tiefe Verschachtelungen

Je mehr Verschachtelungsebenen (if in if in for), desto schwieriger ist der Code zu lesen. Verwenden Sie frühe Rückgaben (early return) und Guard-Klauseln.

// Schlecht\nfunction getUserDisplayName(user) {\n    if (user) {\n        if (user.name) {\n            if (user.name.length > 0) {\n                return user.name;\n            }\n        }\n    }\n    return 'Anonym';\n}\n\n// Gut\nfunction getUserDisplayName(user) {\n    if (!user || !user.name || user.name.length === 0) {\n        return 'Anonym';\n    }\n    return use