JavaScript Style Guide: Sauberen und konsistenten Code schreiben

Hallo da draußen, ambitionierte Programmierer! Ich freue mich sehr, diese Reise mit euch anzutreten, während wir die Welt der JavaScript-Styleguides erkunden. Als jemand, der seit Jahren Programmierung unterrichtet, kann ich nicht genug betonen, wie wichtig es ist, sauberen, konsistenten Code zu schreiben. Das ist wie das Aufraumen deines Zimmers – es macht alles einfacher zu finden und zu verwalten!

Warum brauchen wir einen Styleguide?

Bevor wir tiefer einsteigen, lassen wir uns über den Grund unterhalten, warum wir überhaupt einen Styleguide benötigen. Stell dir vor, du arbeitest an einem Gruppenprojekt und jeder schreibt seinen Code unterschiedlich. Das wäre Chaos! Ein Styleguide ist wie ein Satz von Regeln, den jeder befolgen acordo, um den Code einfacher lesbar und wartbar zu machen.

Nun, lassen uns in die Feinheiten der JavaScript-Style-Richtlinien einsteigen!

Code-Einrücken

H3: Die Grundlage für lesbaren Code

Einrücken ist wie die Grundlage eines Hauses – es ist entscheidend für die Struktur und Stabilität. In JavaScript verwenden wir typischerweise Leerzeichen oder Tabulatoren, um unseren Code einzurücken. Sehen wir uns ein Beispiel an:

function greetStudent(name) {
if (name) {
console.log("Hello, " + name + "!");
} else {
console.log("Hello, student!");
}
}

In diesem Beispiel haben wir den Code innerhalb der Funktion und der if-else-Anweisung eingerückt. Dies macht klar, welche Teile des Codes zusammengehören.

Kommentare

H3: Wegweiser für zukünftiges Du

Kommentare sind wie kleine Notizen, die du deinem zukünftigen Ich (oder anderen) in deinem Code hinterlässt. Sie erklären, was der Code macht, ohne dessen Ausführung zu beeinflussen. So verwenden wir sie:

// Dies ist ein Einzeilchenkommentar

/*
Dies ist ein
Mehrzeilchenkommentar
*/

/**
* Dies ist ein JSDoc-Kommentar
* Er wird verwendet, um Funktionen zu dokumentieren
* @param {string} name - Der Name des Schülers
*/
function greetStudent(name) {
// Code hier
}

Denke daran, gute Kommentare erklären das Warum, nicht das Was. Der Code selbst sollte klar genug sein, um zu zeigen, was er macht.

Variablendeklaration

H3: Vorstellung der Charaktere in deinem Code

Variablen sind wie die Charaktere in der Geschichte deines Codes. In JavaScript haben wir einige Möglichkeiten, sie zu deklarieren:

// Verwenden von 'let' für Variablen, die sich ändern können
let age = 25;

// Verwenden von 'const' für Variablen, die sich nicht ändern
const PI = 3.14159;

// Vermeide die Verwendung von 'var' in modernem JavaScript
// var oldWay = "Wir machen das nicht mehr";

Deklariere deine Variablen immer vor der Verwendung, und versuche, const zu verwenden,除非你知道 der Wert sich ändern wird.

Bezeichner-Namen in camelCase

H3: Benennungsregeln, die Sinn ergeben

In JavaScript verwenden wir camelCase für die meisten unserer Bezeichner. Es ist so, als ob man Wörter zusammenquetscht, aber jeden neuen Wortanfang (außer dem ersten) großschreibt. So sieht es aus:

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;

function calculateArea(width, height) {
return width * height;
}

const MAX_SIZE = 100; // Ausnahme: Konstanten sind oft in GROSSBUCHSTABEN

Leerzeichen und Klammern

H3: deinem Code Luft zum Atmen geben

Richtige Leerzeichen machen deinen Code einfacher zu lesen. Es ist wie das Hinzufügen von Absätzen zu einem langen Essay. Sehen wir uns an, wie wir Leerzeichen und Klammern verwenden:

// Gutes Leerzeichen
if (condition) {
doSomething();
} else {
doSomethingElse();
}

// Funktionsaufrufe
console.log("Hello, World!");

// Arrays und Objekte
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 30 };

Beachte, wie wir Leerzeichen um Operatoren und nach Kommas verwenden. Es sind diese kleinen Details, die deinen Code professionell aussehen lassen!

Objektregeln

H3: Strukturierung deiner Daten

Objekte sind wie Behälter für verwandte Daten. So strukturieren wir sie typischerweise:

const student = {
name: "Bob",
age: 20,
grades: {
math: 90,
science: 85
},
isEnrolled: true
};

// Zugriff auf Objekteigenschaften
console.log(student.name);
console.log(student["age"]);

Halte deine Objekteigenschaften konsistent und gut organisiert. Das wird dir später Kopfschmerzen ersparen!

Anweisungsregeln

H3: Eine Idee, eine Zeile

Im Allgemeinen versuchen wir, jede Anweisung in einer eigenen Zeile zu lassen. Es ist wie das Schreiben von Sätzen in einem Essay – jeder sollte einen vollständigen Gedanken ausdrücken:

let a = 5;
let b = 10;
let c = a + b;

if (c > 10) {
console.log("c ist größer als 10");
}

Dies macht deinen Code einfacher zu lesen und zu debuggen.

Zeilenlänge

H3: Dinge kompakt halten

Versuche, deine Zeilen von Code auf eine vernünftige Länge zu halten – normalerweise etwa 80-100 Zeichen. Wenn eine Zeile zu lang wird, breche sie auf:

// Zu lang
let result = veryLongFunctionName(extremelyLongVariableName1, extremelyLongVariableName2, extremelyLongVariableName3);

// Besser
let result = veryLongFunctionName(
extremelyLongVariableName1,
extremelyLongVariableName2,
extremelyLongVariableName3
);

Dies verbessert die Lesbarkeit und macht deinen Code ordentlicher.

Alles zusammenfügen

Nun, da wir alle diese Style-Richtlinien durchgangen sind, sehen wir uns ein vollständiges Beispiel an, das alles in die Praxis umsetzt:

/**
* Berechnet den Gesamtpreis der Artikel im Einkaufswagen
* @param {Object[]} items - Array der Artikel im Einkaufswagen
* @returns {number} Gesamtpreis
*/
function calculateTotalPrice(items) {
let total = 0;
const TAX_RATE = 0.08;

for (let i = 0; i < items.length; i++) {
let item = items[i];
let itemPrice = item.price * (1 + TAX_RATE);

total += itemPrice;

// Protokolliere den Preis jedes Artikels mit Steuer
console.log(`${item.name}: $${itemPrice.toFixed(2)}`);
}

return total.toFixed(2);
}

// Beispielverwendung
const shoppingCart = [
{ name: "T-shirt", price: 15.99 },
{ name: "Jeans", price: 39.99 },
{ name: "Schuhe", price: 59.99 }
];

let finalPrice = calculateTotalPrice(shoppingCart);
console.log(`Gesamtpreis: $${finalPrice}`);

Dieses Beispiel zeigt richtige Einrückung, Kommentare, Variablendeklarationen, camelCase-Namen, Leerzeichen, Objektverwendung und Einhaltung der Zeilenlängenrichtlinien.

Denke daran, das Befolgen dieser Style-Richtlinien macht deinen Code lesbarer und wartbarer. Es ist eine Fähigkeit, die dir auf deinem entire coding journey gut dienen wird. Viel Spaß beim Programmieren und möge dein Code immer sauber und konsistent sein!

Credits: Image by storyset