Best Practices für JavaScript

In diesem Artikel werde ich Sie durch „Die guten Gewohnheiten“ beim Programmieren von JavaScript führen.

1 – Vermeiden Sie die Verwendung von new Object()
In JavaScript ist die Verwendung eines neuen Objekts etwas riskant, während die Verwendung von Grundelementen aus mehreren Gründen immer besser ist. Lassen Sie uns näher darauf eingehen.

Allgemeines Sprechen
Das „“ zum Beispiel erstellt, wie wir alle wissen, ein String-Primitiv, andererseits … new String() erstellt ein String-Objekt. Da sie komplexer sind und über Methoden verfügen, können String-Objekte zu unerwartetem Verhalten führen, insbesondere wenn es um Vergleiche und Typzwang geht.

Einfachheit
Primitive sind einfacher zu verwenden und unkomplizierter, da ihre Verwendung unnötige Komplexität vermeidet und der Code einfacher zu lesen und zu warten ist.

Leistung
Primitive sind hinsichtlich Speicher und Leistung effizienter. Beim Erstellen eines Objekts entsteht zusätzlicher Aufwand.

Mögliche Verwechslung
Da JavaScript Objekte und Grundelemente unterschiedlich behandelt, kann die Verwendung von new Object() zu verwirrenden Situationen führen, in denen Sie unbeabsichtigt mit einem Objekt und nicht mit einem Grundelement zu tun haben, was Sie möglicherweise in eine Reihe von Fehlern führt.

In den meisten Fällen ist es besser, stattdessen Grundelemente zu verwenden.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

2 – Vermeiden Sie die Verwendung von let mit Arrays und Objekten
Lassen Sie uns zunächst klarstellen: Die Verwendung von let mit Arrays und Objekten ist grundsätzlich überhaupt nicht problematisch. Es gibt jedoch einige spezifische Überlegungen, die Sie in bestimmten Fällen dazu veranlassen könnten, dies zu vermeiden:

Neuzuweisung vs. Mutation
Wie wir alle wissen, können wir mit let die Variable selbst neu zuweisen, was zu Verwirrung oder Datenverlust führen kann. Ein Objekt/Array kann versehentlich mit einem komplett neuen Datensatz (neues Objekt/neues Array) neu zugewiesen werden.

Die Verwendung von const macht es sicherer und klarer, dass sich der Verweis auf das Objekt/Array nicht ändert, Sie aber dennoch seinen Inhalt ändern können.

Unveränderlichkeitsabsicht
Mit const signalisieren Sie anderen Entwicklern, mit denen Sie zusammenarbeiten, dass die Variable nicht neu zugewiesen werden sollte, was die Lesbarkeit und Wartbarkeit des Codes verbessert.

Geltungsbereich
Obwohl „let“ einen Blockbereich hat, kann es zu unerwartetem Verhalten in Schleifen oder bedingten Anweisungen führen. Durch die Verwendung von const bleibt die Variable im Gültigkeitsbereich, ohne dass das Risiko einer unbeabsichtigten Neuzuweisung besteht.

Best Practice
Viele Codierungsstandards und Best Practices empfehlen die Verwendung von const für Variablen, die keiner Neuzuweisung bedürfen, wodurch saubererer und vorhersehbarerer Code gefördert wird.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

3 – Seien Sie vorsichtig bei der automatischen Typkonvertierung
In JavaScript wird dies auch als Typerzwingung bezeichnet, wenn die Sprache einen Wert automatisch von einem Typ in einen anderen konvertiert. Dies kann in verschiedenen Situationen passieren, insbesondere bei Vorgängen mit unterschiedlichen Datentypen:

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Vorsicht vor Zahlen, sie können versehentlich in einen String oder NaN umgewandelt werden. Erwägen Sie daher die Implementierung von Typtests vor sensiblen Vorgängen oder erwägen Sie die Verwendung von TypeScript für sicheres Tippen.

4 – Vermeiden Sie den doppelten Gleichheitsvergleich
== und === sind Vergleichsoperatoren, die zum Vergleichen von Werten verwendet werden, aber sie verhalten sich unterschiedlich.

Abstrakte Gleichheit
Bei Verwendung von == konvertiert JavaScript die Werte in einen gemeinsamen Typ, bevor der Vergleich durchgeführt wird

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Wann verwenden?
Verwenden Sie ===, wenn Sie sicherstellen möchten, dass Wert und Typ gleich sind. Dies ist im Allgemeinen eine gute Vorgehensweise, um unerwartete Ergebnisse zu vermeiden.

Verwenden Sie ==, wenn Sie Werte gezielt vergleichen müssen, ohne deren Typen zu berücksichtigen. Dies kann jedoch zu Fehlern führen und wird normalerweise nicht empfohlen.

Erwägen Sie im Allgemeinen die Verwendung von === für vorhersehbarere und klarere Vergleiche.

Hinweis: Das Gleiche gilt für !== und !=

5 – Objekt-/Array-Destrukturierung verwenden
In JavaScript bietet Ihnen die Verwendung der Destrukturierungstechnik mit Objekten und Arrays mehrere Vorteile.

Die destrukturierende Zuweisungssyntax ist ein JavaScript-Ausdruck, der es ermöglicht, Werte aus Arrays oder Eigenschaften aus Objekten in verschiedene Variablen zu entpacken. Wie es in den MDN-Webdokumenten heißt.

Prägnanz
Es ermöglicht Ihnen, mehrere Eigenschaften eines Objekts oder Elemente eines Arrays in einer einzigen Anweisung zu extrahieren und so die Menge an Code zu reduzieren, die Sie schreiben müssen.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Klarheit
Durch die Destrukturierung können Sie Ihren Code besser lesbar machen, indem Sie deutlich zeigen, mit welchen Eigenschaften oder Elementen Sie arbeiten.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Standardwerte
Sie können problemlos Standardwerte zuweisen, wenn die Eigenschaft oder das Element nicht vorhanden ist.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Verschachtelte Destrukturierung
Sie können verschachtelte Objekte oder Arrays zerstören, was den Zugriff auf tief verschachtelte Daten vereinfachen kann.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Funktionsparameter
Dies kann für Funktionsparameter nützlich sein, sodass Sie Werte direkt entpacken können.

const { height = 180 } = person; // uses default value if height is undefined

Destrukturierung trägt dazu bei, Ihren Code zu optimieren und ihn sauberer und einfacher zu warten.

6 – Standardparameter
Standardparameter sind eine gute Technik, um Ihren Code klarer und leichter lesbar zu halten.

Standardfunktionsparameter ermöglichen die Initialisierung benannter Parameter mit Standardwerten, wenn kein Wert oder undefiniert übergeben wird. Wie es in den MDN-Webdokumenten heißt.

Einzelner Parameter

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Mehrere Parameter
Sie können Standardwerte für mehrere Parameter festlegen.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Achten Sie bei der Übergabe von Vielfachen auf nicht angegebene Parameter. Vermeiden Sie es, den möglicherweise undefinierten oder möglicherweise nicht übergebenen Parameter als ersten oder vor allen anderen übergebenen Parametern zu übergeben.

Wenn Sie vermuten, dass ein Parameterwert nicht angegeben oder als undefiniert übergeben werden könnte, stellen Sie sicher, dass Sie ihn als letzten Wert übergeben, ebenso wie bei mehreren nicht angegebenen Parametern.

Ausdrücke als Standardwerte verwenden
Sie können Ausdrücke verwenden, um Standardwerte zu berechnen.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Parameter mit Standardwerten wiederherstellen
Sie können Standardparameter mit Restparametern kombinieren.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Vorteile
Verbesserte Lesbarkeit: Es ist klar, welche Standardwerte verwendet werden, wenn Argumente weggelassen werden.
Weniger Boilerplate: Reduziert die Notwendigkeit, Standardwerte innerhalb des Funktionskörpers zu überprüfen und zuzuweisen.
Verbesserte Flexibilität: Funktionen können eine größere Auswahl an Eingaben eleganter verarbeiten.
Standardparameter sind eine leistungsstarke Funktion, die die Benutzerfreundlichkeit von Funktionen verbessert und Ihren Code sauberer macht!

7 – Standard in Ihren Switches verwenden
Das Beenden Ihrer Switch-Anweisungen mit einem Standardfall ist in JavaScript eine bewährte Vorgehensweise. Der Standardfall fungiert als Fallback, wenn keiner der angegebenen Fälle mit der Eingabe übereinstimmt:

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Catch-All
Es bietet eine Möglichkeit, mit unerwarteten Werten umzugehen und sicherzustellen, dass Ihr Code nicht stillschweigend fehlschlägt.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Verbesserte Lesbarkeit
Das Einfügen eines Standardfalls macht anderen Entwicklern (oder Ihnen selbst) klar, dass Sie alle Möglichkeiten in Betracht gezogen haben.

Fehlerbehandlung
Es kann zum Protokollieren oder Auslösen von Fehlern verwendet werden, wenn unerwartete Werte auftreten.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Geben Sie immer einen Standardfall ein, wenn die Möglichkeit besteht, dass Sie unerwartete Eingaben erhalten.
Verwenden Sie den Standardfall, um nützliches Feedback oder eine Protokollierung bereitzustellen, insbesondere in Debugging-Szenarien.
Erwägen Sie die Verwendung eines Standardfalls, um ggf. einen Fallback-Wert festzulegen.
Das Hinzufügen eines Standardfalls zu Ihren Switch-Anweisungen verbessert die Robustheit und Wartbarkeit des Codes.

8 – Vermeiden Sie die Verwendung von eval()
eval() ist eine integrierte JavaScript-Funktion, die einen String als Argument akzeptiert und ihn als JavaScript-Code auswertet. Dies bedeutet, dass Sie Code, der zur Laufzeit generiert wird, dynamisch ausführen können.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Es wird aus mehreren wichtigen Gründen allgemein empfohlen, die Verwendung von eval() in JavaScript zu vermeiden.

Sicherheitsrisiken
Code-Injection: eval() kann beliebigen Code ausführen, wodurch Ihre Anwendung anfällig für Code-Injection-Angriffe wird. Wenn Benutzereingaben ausgewertet werden, könnte ein Angreifer Schadcode einschleusen.

const { height = 180 } = person; // uses default value if height is undefined

Leistungsprobleme
Langsame Ausführung: Mit eval() ausgeführter Code läuft langsamer als normaler Code, da er zur Laufzeit interpretiert werden muss, wodurch bestimmte von JavaScript-Engines vorgenommene Optimierungen umgangen werden.
Debugging-Herausforderungen
Schwieriger zu debuggen: Die Verwendung von eval() erschwert das Debuggen. Fehler, die in eval() ausgegeben werden, können schwer auf die ursprüngliche Quelle zurückzuführen sein.
Alternativen
Erwägen Sie anstelle von eval() diese sichereren Alternativen:

JSON-Parsing: Wenn Sie mit JSON-Daten arbeiten, verwenden Sie JSON.parse() anstelle von eval().
const jsonString = '{"name": "Alice"}';
const obj = JSON.parse(jsonString); // Sichere Möglichkeit, einen JSON-String in ein Objekt zu konvertieren
Funktionskonstruktoren: Wenn Sie Funktionen dynamisch erstellen müssen, sollten Sie stattdessen den Funktionskonstruktor verwenden.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Zusammenfassend lässt sich sagen, dass Sie aufgrund von Sicherheitsrisiken, Leistungsproblemen und Debugging-Schwierigkeiten die Verwendung von eval() vermeiden sollten. Entscheiden Sie sich für sicherere Alternativen, um Ihre Ziele zu erreichen, ohne die Integrität und Leistung Ihres Codes zu beeinträchtigen.

9 – Strikten Modus verwenden
In JavaScript ist der „strenge Modus“ eine Möglichkeit, sich für eine eingeschränkte Variante der Sprache zu entscheiden, was dabei hilft, häufige Codierungsfehler und „unsichere“ Aktionen zu erkennen. Dadurch kann Ihr Code vorhersehbarer und einfacher zu debuggen sein.

Strikten Modus aktivieren
Global: Durch Setzen von „strikte Verwendung“; am Anfang einer Skriptdatei.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Vorteile der Verwendung des strengen Modus
Verhindert die Verwendung nicht deklarierter Variablen: Das Zuweisen eines Werts zu einer nicht deklarierten Variablen führt zu einem Fehler.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Beseitigt diesen Zwang: Im strengen Modus ist dies in Funktionen, die ohne expliziten Kontext aufgerufen werden, undefiniert.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Verbietet bestimmte Syntax: Eine Syntax, die als problematisch oder verwirrend angesehen wird, ist nicht zulässig.
Häufige Fallstricke
Pfeilfunktionen: Beachten Sie, dass Pfeilfunktionen keine eigene Funktion haben, sodass der strenge Modus nicht in gleicher Weise gilt.
eval: Code, der innerhalb einer eval-Anweisung ausgeführt wird, wird im lokalen Bereich und nicht im globalen Bereich ausgeführt.
Die Verwendung des strikten Modus gilt im Allgemeinen als bewährte Methode, insbesondere für größere Anwendungen, da Sie damit saubereren und sichereren Code schreiben können.

10 – Halten Sie den Code trocken (wiederholen Sie sich nicht)
Das DRY-Prinzip (Don’t Repeat Yourself) ist ein Schlüsselkonzept in der Softwareentwicklung, das darauf abzielt, Wiederholungen im Code zu reduzieren. Indem Sie sicherstellen, dass jedes Wissen oder jede Logik an einem einzigen Ort dargestellt wird, erleichtern Sie die Wartung, das Verständnis und die Umgestaltung Ihres Codes.

Funktionen
Kapseln Sie repetitive Logik in Funktionen. Auf diese Weise können Sie denselben Code ohne Duplizierung wiederverwenden.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Module
Verwenden Sie Module, um Ihren Code zu organisieren. Dies trägt dazu bei, verwandte Funktionen und Variablen zusammenzuhalten und sie in verschiedenen Teilen Ihrer Anwendung wiederverwendbar zu machen.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Klassen und Objekte
Nutzen Sie Klassen oder Objekte, um verwandte Daten und Verhaltensweisen zu gruppieren. Diese Kapselung hilft, Wiederholungen beim Arbeiten mit ähnlichen Datenstrukturen zu vermeiden.

const { height = 180 } = person; // uses default value if height is undefined

Hinweis: Wenn Sie das „Funktionale Programmierung“-Paradigma in Ihre tägliche Codierung übernehmen, sollten Sie einen anderen Tipp außer diesem „Klassen und Objekte“ in Betracht ziehen.

Vorlagen und Komponenten
Verwenden Sie in der Webentwicklung Vorlagen oder Komponenten (in Frameworks wie React, Vue usw.), um UI-Logik und Stile zu kapseln, die wiederverwendet werden.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Datenstrukturen
Verwenden Sie Arrays oder Objekte, um verwandte Daten zu speichern, anstatt für jedes Datenelement separate Variablen zu erstellen.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Die Anwendung des DRY-Prinzips führt zu saubererem, besser wartbarem Code. Es trägt dazu bei, das Risiko von Fehlern zu minimieren, da Änderungen nur an einer Stelle vorgenommen werden müssen, und verbessert die Lesbarkeit durch weniger Unordnung. Denken Sie daran, dass es zwar wichtig ist, Wiederholungen zu vermeiden, es aber dennoch darum geht, ein Gleichgewicht zu finden; Übermäßiges Abstrahieren kann zu Komplexität führen. Seien Sie daher bei der Anwendung dieser Prinzipien auf Ihr Urteilsvermögen angewiesen.

11 – Verwenden Sie aussagekräftige Variablen- und Funktionsnamen
Die Verwendung aussagekräftiger Variablen- und Funktionsnamen ist entscheidend für das Schreiben von klarem, wartbarem und verständlichem Code.

Seien Sie beschreibend
Wählen Sie Namen, die den Zweck oder Wert der Variablen oder Funktion klar beschreiben.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Verwenden Sie Aktionswörter für Funktionen
Beginnen Sie Funktionen mit einem Verb, das die ausgeführte Aktion beschreibt.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Abkürzungen vermeiden
Auch wenn Kurznamen praktisch erscheinen, können sie zu Verwirrung führen. Vermeiden Sie Abkürzungen, es sei denn, sie werden allgemein verstanden.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Konsistente Namenskonventionen verwenden
Halten Sie sich in Ihrer gesamten Codebasis an eine einheitliche Namenskonvention, z. B. „camelCase“ für Variablen und Funktionen und „PascalCase“ für Klassen.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Geben Sie den Datentyp oder Zweck in Namen an
Wenn eine Variable einen bestimmten Datentyp enthält oder einem bestimmten Zweck dient, fügen Sie diesen in den Namen ein.

const { height = 180 } = person; // uses default value if height is undefined

Kontextbezogene Informationen verwenden
Berücksichtigen Sie den Kontext, in dem die Variable oder Funktion verwendet wird, um Namen aussagekräftiger zu machen.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Halten Sie es prägnant, aber klar
Obwohl Namen beschreibend sein sollten, sollten sie nicht zu lang sein. Streben Sie ein Gleichgewicht zwischen Klarheit und Kürze an.

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Domänenspezifische Sprache verwenden
Wenn Sie in einem bestimmten Bereich arbeiten (z. B. Finanzen, Gesundheitswesen usw.), verwenden Sie Begriffe, die Ihnen in diesem Bereich bekannt sind.

lassen Sie den Zinssatz = 5,5; // Klar im finanziellen Kontext.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Bei Bedarf umgestalten
Wenn Sie im Zuge der Weiterentwicklung des Codes feststellen, dass ein Name nicht mehr geeignet ist, zögern Sie nicht, ihn zur besseren Klarheit umzugestalten.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Aussagekräftige Variablen- und Funktionsnamen verbessern die Lesbarkeit und Wartbarkeit des Codes erheblich. Sie helfen anderen (und Ihnen selbst), den Zweck und die Funktion Ihres Codes auf einen Blick zu verstehen, was die Zusammenarbeit und das Debuggen erheblich erleichtert. Streben Sie stets nach Klarheit bei Ihren Namenskonventionen.

12 – Vermeiden Sie globale Variablen
Das Vermeiden globaler Variablen ist eine wichtige Vorgehensweise in JavaScript (und in der Programmierung im Allgemeinen), um sauberen, modularen und wartbaren Code zu erhalten. Globale Variablen können zu unerwartetem Verhalten, Namenskonflikten und Schwierigkeiten beim Debuggen führen.

Funktionsbereich verwenden
Deklarieren Sie Variablen innerhalb von Funktionen, um deren Umfang einzuschränken und zu verhindern, dass sie global zugänglich sind.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Verwenden Sie Block Scope mit let und const
Verwenden Sie let und const, um Variablen innerhalb von Blöcken (wie Schleifen oder Bedingungen) zu deklarieren und sicherzustellen, dass sie außerhalb dieses Blocks nicht zugänglich sind.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Modularisieren Sie Ihren Code
Organisieren Sie Ihren Code in Module. Verwenden Sie ES6-Module oder IIFE (Immediately Invoked Function Expressions), um Variablen zu kapseln.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

In Objekte einkapseln:
Gruppieren Sie verwandte Variablen und Funktionen innerhalb eines Objekts, um eine Verschmutzung des globalen Bereichs zu vermeiden.

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Lokalen Speicher sinnvoll nutzen
Wenn Sie Daten beibehalten müssen, sollten Sie die Verwendung von lokalem Speicher, Sitzungsspeicher oder indexedDB anstelle globaler Variablen in Betracht ziehen.

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Beschränken Sie die Verwendung von Globals
Wenn Sie globale Variablen verwenden müssen, beschränken Sie deren Verwendung auf Konfigurationskonstanten oder anwendungsweite Einstellungen. Benennen Sie sie klar, um ihren globalen Charakter zu verdeutlichen.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Nebenwirkungen vermeiden
Vermeiden Sie beim Entwerfen von Funktionen das Ändern globaler Variablen. Dadurch bleiben Funktionen vorhersehbar und einfacher zu testen.

const { height = 180 } = person; // uses default value if height is undefined

Verwenden Sie „dies“ mit Bedacht
Verwenden Sie dies in der objektorientierten Programmierung, um den Status innerhalb von Instanzen zu verwalten, anstatt sich auf globale Variablen zu verlassen.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Durch die Vermeidung globaler Variablen verbessern Sie die Modularität und Wartbarkeit Ihres Codes. Es trägt dazu bei, Namenskonflikte und unbeabsichtigte Nebenwirkungen zu vermeiden, wodurch Ihr Code vorhersehbarer und einfacher zu bearbeiten ist. Das Befolgen dieser Best Practices führt zu saubereren und besser verwaltbaren Codebasen.

13 – Verwenden Sie Promises und Async/Warten für asynchronen Code
Die Verwendung von Promises und async/await in JavaScript trägt dazu bei, asynchrone Vorgänge effektiver zu verwalten und Ihren Code sauberer und leichter lesbar zu machen.

Versprechen verstehen
Ein Promise ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) einer asynchronen Operation und den daraus resultierenden Wert darstellt.

Sie können ein Promise mit dem Promise-Konstruktor erstellen:

function display({ name, age }) {
    console.log(`${name} is ${age} years old.`);
}

Ein Versprechen einhalten
Sie können das Ergebnis eines Versprechens mit .then() für den Erfolg und .catch() für die Fehlerbehandlung verarbeiten.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet();         // Output: Hello, Guest!
greet('Chrollo');  // Output: Hello, Chrollo!

Versprechen verketten
Sie können mehrere asynchrone Vorgänge mithilfe von Promises verketten.

function multiply(a, b = 1) {
    return a * b;
}

multiply(5);    // Output: 5
multiply(5, 2);  // Output: 10

Async/Await verwenden
async/await bietet eine synchronere Möglichkeit, asynchronen Code zu schreiben, wodurch er einfacher zu lesen und zu warten ist.

Deklarieren einer asynchronen Funktion:
Verwenden Sie das Schlüsselwort async vor einer Funktion, um sie als asynchrone Funktion zu definieren.

// ❌ Avoid
const str = new String();
const num = new Number();
const bool = new Boolean();
const obj = new Object();
const arr = new Array();
const regEx = new RegExp();
const func = new Function();

// ✅ Use
const str = "JavaScript";
const num = 10;
const bool = true;
const obj = {};
const arr = [];
const regEx = /()/;
const func = function() {};

Asynchrone Funktionen aufrufen
Sie können eine asynchrone Funktion genau wie eine reguläre Funktion aufrufen. Aber seien Sie vorsichtig, es wird immer ein Versprechen zurückgeben.

// ❌ Avoid
let book = { title: "Inferno", author: "Dan Brown" };

// The book object will be overrode with string
book = "Hello world";
// ✅ Use
const book = { title: "Inferno", author: "Dan Brown" };

// The book object cannot be overrode
book = "Hello world";

Umgang mit mehreren asynchronen Vorgängen
Sie können Promise.all verwenden, um mehrere Versprechen parallel auszuführen und darauf zu warten, dass sie alle aufgelöst werden.

let sum = "5" + 1; // "51" (string concatenation)
// In the code above, typeof sum is a string

let sub = "5" - 1; // 4 (string converted to number)
// In the code obove, typeof sub in a number
Another example can be helpful:

let lang = "JavaScript"; // typeof name is string
lang = 15; // changes typeof x to a number

Fehlerbehandlung
Sowohl Promises als auch async/await bieten Möglichkeiten, Fehler elegant zu behandeln.

Verwendung von .catch() mit Promises:

console.log(5 == '5'); // true (number is converted to string)
console.log(null == undefined); // true (considered equal)
console.log(0 == false); // true (0 is converted to boolean as it's falsy value)
Strict Equality
With ===, the comparison checks both the value and the type. If types are different, it returns false

console.log(5 === '5'); // false (different types)
console.log(null === undefined); // false (different types)
console.log(0 === false); // false (different types)

Try/Catch mit Async/Await verwenden:

const book = { name: 'The Lost Symbol', author: 'Dan Brown' };
const { name, price } = book; // concise extraction

Durch die Verwendung von Promises und async/await ist die Handhabung asynchroner Vorgänge in JavaScript viel einfacher zu handhaben. Sie helfen, die Callback-Hölle zu vermeiden und die Lesbarkeit des Codes zu verbessern. Die Übernahme dieser Muster führt zu saubererem, besser wartbarem und fehlerresistentem Code.

14 – Dokumentieren Sie Ihren Code
Die Dokumentation Ihres Codes ist für die Aufrechterhaltung der Klarheit, die Unterstützung der Zusammenarbeit und die Gewährleistung einer langfristigen Wartbarkeit von entscheidender Bedeutung.

Verwenden Sie klare Kommentare
Erklären Sie „Warum“ und nicht „Was“: Konzentrieren Sie sich darauf, zu erklären, warum Sie etwas getan haben, und nicht darauf, was der Code bewirkt. Der Code selbst sollte lesbar genug sein, um zu vermitteln, was er tut.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors; // clear intention

Kommentieren Sie komplexe Logik: Geben Sie für komplexe oder nicht offensichtliche Codeabschnitte detaillierte Erklärungen.

const { height = 180 } = person; // uses default value if height is undefined

Kommentare im Docstring-Stil verwenden
In JavaScript, insbesondere bei Verwendung von JSDoc, können Sie Funktionen, Klassen und Methoden mithilfe strukturierter Kommentare dokumentieren.

const user = { profile: { name: 'Eren Yeager', age: 20 } };
const { profile: { name } } = user; // easy access to nested properties

Behalten Sie eine README-Datei
Pflegen Sie für Projekte eine README.md-Datei, die eine Übersicht, Installationsanweisungen, Anwendungsbeispiele und Beitragsrichtlinien bietet.

Eine effektive Dokumentation macht Ihren Code verständlicher und wartbarer und hilft sowohl aktuellen als auch zukünftigen Entwicklern (einschließlich Ihnen selbst), effizient zu arbeiten. Indem Sie diese Vorgehensweisen in Ihren Entwicklungsworkflow integrieren, fördern Sie eine bessere Zusammenarbeit und verkürzen die Lernkurve für alle, die mit Ihrem Code interagieren.

Das obige ist der detaillierte Inhalt vonBest Practices für JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!