Clean Code in JavaScript: Prinzipien und Beispiele für Anfänger

Clean Code in JavaScript: Prinzipien und Beispiele für Anfänger

Sauberer Code (Clean Code) ist nicht nur ein modischer Begriff, sondern eine grundlegende Fähigkeit jedes professionellen Entwicklers. In der Welt von JavaScript (insbesondere in der Node.js-Umgebung) wird Code schnell geschrieben, aber ohne klare Prinzipien wird die Wartung zum Albtraum. Dieser Artikel richtet sich an Anfänger, die nicht nur funktionierenden, sondern schönen, lesbaren und skalierbaren Code schreiben möchten.

Sauberer Code ist Code, der leicht zu lesen, leicht zu ändern und leicht zu testen ist. Er weckt nicht den Wunsch, ihn von Grund auf neu zu schreiben. Lassen Sie uns die wichtigsten Prinzipien anhand praktischer Beispiele durchgehen.

1. Benennung von Variablen und Funktionen: Sagen Sie die Wahrheit

Die einfachste und gleichzeitig schwierigste Regel – der Name sollte das Wesen widerspiegeln. Sparen Sie nicht an Zeichen, sparen Sie Zeit beim Verständnis.

Schlecht (unverständlich):

const d = new Date();const arr = ['apple', 'banana', 'grape'];const fn = (x) => x * 2;

Gut (lesbar):

const currentDate = new Date();const fruitList = ['apple', 'banana', 'grape'];const doubleValue = (value) => value * 2;

Benennungsregeln:

• Variablen – Substantive (user, productList, errorMessage).
• Funktionen – Verben (getUser, calculateTotal, validateEmail).
• Boolesche Werte – beginnen Sie mit is, has, should (isActive, hasPermission, shouldUpdate).
• Vermeiden Sie magische Zahlen – lagern Sie sie in Konstanten aus.

// Schlechtconst t = 3600000; // Was ist das für eine Zahl?

// Gutconst MILLISECONDS_IN_AN_HOUR = 3600000;const timeout = MILLISECONDS_IN_AN_HOUR;

2. Funktionen: Ein Schritt – eine Aktion

Das Prinzip der einzigen Verantwortung (Single Responsibility Principle) gilt auch für Funktionen. Eine Funktion sollte eine Sache tun und diese gut machen.

Schlecht (macht alles auf einmal):

function processUserData(user) {    const fullName = `${user.firstName} ${user.lastName}`;    const email = user.email.toLowerCase();    const isValid = email.includes('@');        if (isValid) {        const result = { fullName, email };        saveToDatabase(result);        sendWelcomeEmail(email);        return result;    } else {        throw new Error('Invalid email');    }}

Gut (aufgeteilt in kleine Funktionen):

function buildFullName(firstName, lastName) {    return `${firstName} ${lastName}`;}

function normalizeEmail(email) {    return email.toLowerCase().trim();}

function isValidEmail(email) {    return email.includes('@');}

function processUserData(user) {    const fullName = buildFullName(user.firstName, user.lastName);    const email = normalizeEmail(user.email);        if (!isValidEmail(email)) {        throw new Error('Invalid email');    }        const result = { fullName, email };    saveToDatabase(result);    sendWelcomeEmail(email);        return result;}

Solcher Code ist leicht zu testen, leicht zu ändern und leicht zu verstehen.

3. Komplexitätsmanagement: Vermeiden Sie tiefe Verschachtelung

Tiefe Verschachtelung von if und for ist der Feind der Lesbarkeit. Verwenden Sie frühe Rückgaben (early return) und Guard Clauses.

Schlecht (tiefe Hölle):

function processOrder(order) {    if (order) {        if (order.isPaid) {            if (order.items.length > 0) {                // ... 50 Zeilen Code            }        }    }}

Gut (flache Struktur):

function processOrder(order) {    if (!order) {        return;    }