Richtlinien für das Schreiben von JavaScript-Codebeispielen

Dieser Abschnitt erklärt die allgemeinen Richtlinien, die beim Schreiben von JavaScript-Codebeispielen zu beachten sind. Die späteren Abschnitte behandeln spezifischere Details.

Meinungen zu korrektem Einrücken, Leerzeichen und Zeilenlängen waren schon immer umstritten. Diskussionen über diese Themen lenken von der Erstellung und Pflege von Inhalten ab.

Auf MDN Web Docs verwenden wir Prettier als Code-Formatierer, um den Code-Stil konsistent zu halten (und um themenfremde Diskussionen zu vermeiden). Sie können unsere Konfigurationsdatei konsultieren, um mehr über die aktuellen Regeln zu erfahren, und die Prettier-Dokumentation lesen.

Prettier formatiert den gesamten Code und hält den Stil konsistent. Trotzdem gibt es ein paar zusätzliche Regeln, die Sie befolgen müssen.

Sie können neue Funktionen verwenden, sobald alle großen Browser — Chrome, Edge, Firefox und Safari — sie unterstützen.

Verwenden Sie Literale und keine Konstruktoren, um Arrays zu erstellen.

Erstellen Sie Arrays so:

const visitedCities = [];

Tun Sie dies nicht, wenn Sie Arrays erstellen:

const visitedCities = new Array(length);

Verwenden Sie beim Hinzufügen von Elementen zu einem Array push() und nicht die direkte Zuordnung. Betrachten Sie das folgende Array:

const pets = [];

Fügen Sie die Elemente so zu:

pets.push("cat");

Fügen Sie Elemente nicht so hinzu:

pets[pets.length] = "cat";

Durch das Schreiben von asynchronem Code wird die Leistung verbessert und sollte, wenn möglich, verwendet werden. Insbesondere können Sie die folgenden Techniken nutzen:

• Promises
• async/await

Wenn beide Techniken möglich sind, bevorzugen wir die einfachere async/await-Syntax. Leider können Sie await nicht auf oberster Ebene verwenden, es sei denn, Sie befinden sich in einem ECMAScript-Modul. CommonJS-Module, die von Node.js verwendet werden, sind keine ES-Module. Wenn Ihr Beispiel überall verwendet werden soll, vermeiden Sie await auf oberster Ebene.

Kommentare sind entscheidend für das Schreiben guter Codebeispiele. Sie klären die Absicht des Codes und helfen Entwicklern, ihn zu verstehen. Achten Sie besonders auf sie.

• Wenn der Zweck oder die Logik des Codes nicht offensichtlich ist, fügen Sie einen Kommentar mit Ihrer Absicht hinzu, wie unten gezeigt:

  js

  let total = 0;
  
  // Calculate the sum of the four first elements of arr
  for (let i = 0; i < 4; i++) {
    total += arr[i];
  }
  

  Auf der anderen Seite ist das Wiedergeben des Codes in Prosa keine gute Verwendung von Kommentaren:

  js

  let total = 0;
  
  // For loop from 1 to 4
  for (let i = 0; i < 4; i++) {
    // Add value to the total
    total += arr[i];
  }
  

• Kommentare sind auch nicht erforderlich, wenn Funktionen explizite Namen haben, die beschreiben, was sie tun. Schreiben Sie:

  js

  closeConnection();
  

  Schreiben Sie nicht:

  js

  closeConnection(); // Closing the connection
  

Einzeilige Kommentare werden mit // markiert, im Gegensatz zu Blockkommentaren, die zwischen /* … */ eingeschlossen sind.

Verwenden Sie im Allgemeinen einzeilige Kommentare, um Code zu kommentieren. Die Autoren müssen jede Zeile des Kommentars mit // kennzeichnen, damit man kommentierten Code optisch leichter erkennen kann. Darüber hinaus ermöglicht dieses Konvention das Kommentieren von Codeabschnitten mit /* … */ während des Debuggens.

• Lassen Sie ein Leerzeichen zwischen den Schrägstrichen und dem Kommentar. Beginnen Sie mit einem Großbuchstaben, wie bei einem Satz, setzen Sie aber keinen Punkt am Ende des Kommentars.

  js

  // This is a well-written single-line comment
  

• Wenn ein Kommentar nicht direkt nach einem neuen Einrückungslevel beginnt, fügen Sie eine Leerzeile hinzu und danach den Kommentar. Es wird einen Codeblock erstellen, der offensichtlich macht, worauf sich der Kommentar bezieht. Setzen Sie auch Ihre Kommentare auf separate Zeilen vor den Code, auf den sie sich beziehen. Dies wird im folgenden Beispiel gezeigt:

  js

  function checkout(goodsPrice, shipmentPrice, taxes) {
    // Calculate the total price
    const total = goodsPrice + shipmentPrice + taxes;
  
    // Create and append a new paragraph to the document
    const para = document.createElement("p");
    para.textContent = `Total price is ${total}`;
    document.body.appendChild(para);
  }
  

• In Code, der in einer Produktionsumgebung ausgeführt werden soll, müssen Sie selten kommentieren, wenn Sie einige Daten protokollieren. In Codebeispielen verwenden wir häufig console.log(), console.error() oder ähnliche Funktionen, um wichtige Werte auszugeben. Um dem Leser ohne Ausführung des Codes verständlich zu machen, was passieren wird, können Sie einen Kommentar nach der Funktion mit dem Log hinzufügen, das produziert wird. Schreiben Sie:

  js

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket); // ['banana', 'mango', 'orange']
  }
  

  Schreiben Sie nicht:

  js

  function exampleFunc(fruitBasket) {
    // Logs: ['banana', 'mango', 'orange']
    console.log(fruitBasket);
  }
  

• Sollte die Zeile zu lang werden, setzen Sie den Kommentar nach der Funktion, so:

  js

  function exampleFunc(fruitBasket) {
    console.log(fruitBasket);
    // ['banana', 'mango', 'orange', 'apple', 'pear', 'durian', 'lemon']
  }
  

Kurze Kommentare sind in der Regel besser, versuchen Sie also, sie in einer Zeile von 60–80 Zeichen zu halten. Wenn dies nicht möglich ist, verwenden Sie // am Anfang jeder Zeile:

// This is an example of a multi-line comment.
// The imaginary function that follows has some unusual
// limitations that I want to call out.
// Limitation 1
// Limitation 2

Verwenden Sie nicht /* … */:

/* This is an example of a multi-line comment.
  The imaginary function that follows has some unusual
  limitations that I want to call out.
  Limitation 1
  Limitation 2 */

Das Überspringen von redundantem Code mit Ellipsen (…) ist notwendig, um Beispiele kurz zu halten. Dennoch sollten Autoren dies überlegt tun, da Entwickler häufig Beispiele in ihren Code kopieren und einfügen und alle unsere Codebeispiele gültiges JavaScript sein sollten.

In JavaScript sollten Sie die Ellipsen (…) in einem Kommentar setzen. Wenn möglich, geben Sie an, welche Aktion jemand, der diesen Schnipsel wiederverwendet, hinzufügen soll.

Die Verwendung eines Kommentars für die Ellipsen (…) ist expliziter und verhindert Fehler, wenn ein Entwickler einen Beispielcode kopiert und einfügt. Schreiben Sie:

function exampleFunc() {
  // Add your code here
  // …
}

Verwenden Sie Ellipsen (…) nicht so:

function exampleFunc() {
  …
}

Beim Schreiben von Code lassen Sie normalerweise Parameter weg, die Sie nicht benötigen. Aber in einigen Codebeispielen möchten Sie zeigen, dass Sie einige mögliche Parameter nicht verwendet haben.

Dazu verwenden Sie /* … */ in der Parameterliste. Dies ist eine Ausnahme von der Regel, nur einzeilige Kommentare (//) zu verwenden.

array.forEach((value /* , index, array */) => {
  // …
});

Verwenden Sie für Funktionsnamen camel case und beginnen Sie mit einem Kleinbuchstaben. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wenn dies angemessen ist.

Das folgende Beispiel zeigt einen korrekten Funktionsnamen:

function sayHello() {
  console.log("Hello!");
}

Verwenden Sie Funktionsnamen nicht so:

function SayHello() {
  console.log("Hello!");
}

function doIt() {
  console.log("Hello!");
}

• Verwenden Sie, wenn möglich, die Funktionsdeklaration anstelle von Funktionsausdrücken, um Funktionen zu definieren.

  Hier ist der empfohlene Weg, eine Funktion zu deklarieren:

  js

  function sum(a, b) {
    return a + b;
  }
  

  Dies ist keine gute Möglichkeit, eine Funktion zu definieren:

  js

  let sum = function (a, b) {
    return a + b;
  };
  

• Verwenden Sie bei anonymen Funktionen als Callback (eine Funktion, die einer anderen Methodenaufruf übergeben wird) eine Pfeilfunktion, wenn Sie keinen Zugriff auf this benötigen, um den Code kürzer und übersichtlicher zu gestalten.

  Hier ist der empfohlene Weg:

  js

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce((a, b) => a + b);
  

  Anstatt dessen:

  js

  const array1 = [1, 2, 3, 4];
  const sum = array1.reduce(function (a, b) {
    return a + b;
  });
  

• Vermeiden Sie es, eine Pfeilfunktion zu verwenden, um eine Funktion einem Bezeichner zuzuweisen. Verwenden Sie insbesondere keine Pfeilfunktionen für Methoden. Verwenden Sie Funktionsdeklarationen mit dem Schlüsselwort function:

  js

  function x() {
    // …
  }
  

  Tun Sie dies nicht:

  js

  const x = () => {
    // …
  };
  

• Verwenden Sie bei der Verwendung von Pfeilfunktionen implizite Rückgabe (auch bekannt als Expression-Body), wenn möglich:

  js

  arr.map((e) => e.id);
  

  Und nicht:

  js

  arr.map((e) => {
    return e.id;
  });
  

Wenn Schleifen erforderlich sind, wählen Sie die passende aus for(;;), for...of, while, etc.

• Vermeiden Sie bei der Iteration durch alle Elemente einer Sammlung die klassische for (;;)-Schleife; bevorzugen Sie for...of oder forEach(). Beachten Sie, dass bei der Verwendung einer Sammlung, die kein Array ist, überprüft werden muss, dass for...of tatsächlich unterstützt wird (es erfordert, dass die Variable iterierbar ist) oder dass die forEach()-Methode tatsächlich vorhanden ist.

  Verwenden Sie for...of:

  js

  const dogs = ["Rex", "Lassie"];
  for (const dog of dogs) {
    console.log(dog);
  }
  

  Oder forEach():

  js

  const dogs = ["Rex", "Lassie"];
  dogs.forEach((dog) => {
    console.log(dog);
  });
  

  Verwenden Sie nicht for (;;) — nicht nur müssen Sie einen zusätzlichen Index, i, hinzufügen, sondern Sie müssen auch die Länge des Arrays verfolgen. Dies kann für Anfänger fehleranfällig sein.

  js

  const dogs = ["Rex", "Lassie"];
  for (let i = 0; i < dogs.length; i++) {
    console.log(dogs[i]);
  }
  

• Stellen Sie sicher, dass Sie den Initialisierer ordnungsgemäß definieren, indem Sie das const Schlüsselwort für for...of oder let für die anderen Schleifen verwenden. Lassen Sie es nicht weg. Hier sind korrekte Beispiele:

  js

  const cats = ["Athena", "Luna"];
  for (const cat of cats) {
    console.log(cat);
  }
  
  for (let i = 0; i < 4; i++) {
    result += arr[i];
  }
  

  Das untenstehende Beispiel folgt nicht den empfohlenen Richtlinien für die Initialisierung (es erstellt implizit eine globale Variable und wird im strikten Modus fehlschlagen):

  js

  const cats = ["Athena", "Luna"];
  for (i of cats) {
    console.log(i);
  }
  

• Wenn Sie sowohl auf den Wert als auch auf den Index zugreifen müssen, können Sie .forEach() anstelle von for (;;) verwenden. Schreiben Sie:

  js

  const gerbils = ["Zoé", "Chloé"];
  gerbils.forEach((gerbil, i) => {
    console.log(`Gerbil #${i}: ${gerbil}`);
  });
  

  Schreiben Sie nicht:

  js

  const gerbils = ["Zoé", "Chloé"];
  for (let i = 0; i < gerbils.length; i++) {
    console.log(`Gerbil #${i}: ${gerbils[i]}`);
  }
  

Es gibt einen bemerkenswerten Fall, den es bei if...else-Kontrollanweisungen zu beachten gilt. Wenn die if-Anweisung mit einem return endet, fügen Sie keine else-Anweisung hinzu.

Fahren Sie direkt nach der if-Anweisung fort. Schreiben Sie:

if (test) {
  // Perform something if test is true
  // …
  return;
}

// Perform something if test is false
// …

Schreiben Sie nicht:

if (test) {
  // Perform something if test is true
  // …
  return;
} else {
  // Perform something if test is false
  // …
}

Obwohl Kontrollflussanweisungen wie if, for und while keine Verwendung von geschweiften Klammern erfordern, wenn der Inhalt aus einer einzigen Anweisung besteht, sollten Sie immer geschweifte Klammern verwenden. Schreiben Sie:

for (const car of storedCars) {
  car.paint("red");
}

Schreiben Sie nicht:

for (const car of storedCars) car.paint("red");

Dies verhindert das Vergessen der Ergänzung der geschweiften Klammern beim Hinzufügen zusätzlicher Anweisungen.

Switch-Anweisungen können etwas schwierig sein.

• Fügen Sie keine break-Anweisung nach einer return-Anweisung in einem spezifischen Fall hinzu. Stattdessen schreiben Sie return-Anweisungen so:

  js

  switch (species) {
    case "chicken":
      return farm.shed;
    case "horse":
      return corral.entry;
    default:
      return "";
  }
  

Wenn Sie eine break-Anweisung hinzufügen, wird sie unerreichbar sein. Schreiben Sie nicht:

switch (species) {
  case "chicken":
    return farm.shed;
    break;
  case "horse":
    return corral.entry;
    break;
  default:
    return "";
}

• Verwenden Sie default als letzten Fall und enden Sie nicht mit einer break-Anweisung. Wenn Sie es anders machen müssen, fügen Sie einen Kommentar hinzu, der erklärt, warum.

• Denken Sie daran, dass, wenn Sie eine lokale Variable für einen Fall deklarieren, Sie geschweifte Klammern verwenden müssen, um einen Bereich zu definieren:

  js

  switch (fruits) {
    case "Orange": {
      const slice = fruit.slice();
      eat(slice);
      break;
    }
    case "Apple": {
      const core = fruit.extractCore();
      recycle(core);
      break;
    }
  }
  

• Wenn bestimmte Zustände Ihres Programms ungefangene Fehler auslösen, stoppen sie die Ausführung und verringern möglicherweise die Nützlichkeit des Beispiels. Sie sollten daher Fehler mit einem try...catch-Block abfangen, wie unten gezeigt:

  js

  try {
    console.log(getResult());
  } catch (e) {
    console.error(e);
  }
  

• Wenn Sie den Parameter der catch-Anweisung nicht benötigen, lassen Sie ihn weg:

  js

  try {
    console.log(getResult());
  } catch {
    console.error("An error happened!");
  }
  

• Verwenden Sie bei der Definition einer Klasse PascalCase (begonnen mit einem Großbuchstaben) für den Klassennamen und camelCase (begonnen mit einem Kleinbuchstaben) für die Namen von Objekteigenschaften und Methoden.

• Verwenden Sie bei der Definition einer Objektinstanz, entweder als Literal oder über einen Konstruktor, camelCase, begonnen mit einem Kleinbuchstaben, für den Instanznamen. Zum Beispiel:

  js

  const hanSolo = new Person("Han Solo", 25, "he/him");
  
  const luke = {
    name: "Luke Skywalker",
    age: 25,
    pronouns: "he/him",
  };
  

Verwenden Sie bei der Erstellung von allgemeinen Objekten (d. h. wenn keine Klassen beteiligt sind) Literale und keine Konstruktoren.

Zum Beispiel, tun Sie dies:

const object = {};

Erstellen Sie kein allgemeines Objekt so:

const object = new Object();

• Verwenden Sie die ES-Klassensyntax für Objekte, nicht die alte Konstruktoren-Syntax.

  Zum Beispiel ist dies der empfohlene Weg:

  js

  class Person {
    constructor(name, age, pronouns) {
      this.name = name;
      this.age = age;
      this.pronouns = pronouns;
    }
  
    greeting() {
      console.log(`Hi! I'm ${this.name}`);
    }
  }
  

• Verwenden Sie extends für die Vererbung:

  js

  class Teacher extends Person {
    // …
  }
  

Verwenden Sie zur Definition von Methoden die Methodendefinitionssyntax:

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

Anstatt dessen:

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

• Die Methode Object.prototype.hasOwnProperty() wurde zugunsten von Object.hasOwn() veraltet.

• Verwenden Sie nach Möglichkeit die Kurzform, um die Duplikation des Eigenschaftenidentifizierers zu vermeiden. Schreiben Sie:

  js

  function createObject(name, age) {
    return { name, age };
  }
  

  Schreiben Sie nicht:

  js

  function createObject(name, age) {
    return { name: name, age: age };
  }
  

Dieser Abschnitt listet unsere Empfehlungen auf, welche Operatoren wann zu verwenden sind.

Wenn Sie einer Variablen einen wörtlichen Wert je nach Bedingung zuweisen wollen, verwenden Sie einen bedingten (ternären) Operator anstelle einer if...else-Anweisung. Diese Regel gilt auch bei der Rückgabe eines Wertes. Schreiben Sie:

const x = condition ? 1 : 2;

Schreiben Sie nicht:

let x;
if (condition) {
  x = 1;
} else {
  x = 2;
}

Der bedingte Operator ist hilfreich, wenn Strings zur Protokollierung von Informationen erstellt werden. In solchen Fällen führt die Verwendung einer regulären if...else-Anweisung zu langen Codeblöcken für eine Nebenoperation wie die Protokollierung, die den zentralen Punkt des Beispiels verschleiern.

Bevorzugen Sie den strikten Gleichheits (dreifach gleich) und Ungleichheitsoperator gegenüber dem losen Gleichheits- (doppel gleich) und Ungleichheitsoperator.

Verwenden Sie die strikten Gleichheits- und Ungleichheitsoperatoren so:

name === "Shilpa";
age !== 25;

Verwenden Sie die losen Gleichheits- und Ungleichheitsoperatoren nicht, wie unten gezeigt:

name == "Shilpa";
age != 25;

Wenn Sie == oder != verwenden müssen, denken Sie daran, dass == null der einzige akzeptable Fall ist. Da TypeScript in allen anderen Fällen fehlschlägt, möchten wir sie nicht in unseren Beispielcode haben. Überlegen Sie, ob Sie einen Kommentar hinzufügen, um zu erklären, warum Sie ihn benötigen.

Bevorzugen Sie Abkürzungen für boolesche Tests. Verwenden Sie zum Beispiel if (x) und if (!x), nicht if (x === true) und if (x === false), es sei denn, unterschiedliche Arten von truthy oder falsy Werten werden unterschiedlich behandelt.

Zeichenkettenliterale können innerhalb von einfachen Anführungszeichen, wie bei 'Eine Zeichenkette', oder innerhalb von doppelten Anführungszeichen, wie bei "Eine Zeichenkette", eingeschlossen werden. Machen Sie sich keine Gedanken darüber, welche Sie verwenden sollen; Prettier hält es konsistent.

Verwenden Sie Template-Literals, um Werte in Zeichenketten einzufügen.

• Hier ist ein Beispiel für den empfohlenen Weg, Template-Literals zu verwenden. Ihre Verwendung verhindert viele Abstandsfehler.

  js

  const name = "Shilpa";
  console.log(`Hi! I'm ${name}!`);
  

  Verkettungen Sie keine Zeichenketten so:

  js

  const name = "Shilpa";
  console.log("Hi! I'm" + name + "!"); // Hi! I'mShilpa!
  

• Überbeanspruchen Sie keine Template-Literals. Wenn es keine Ersetzungen gibt, verwenden Sie stattdessen ein normales Zeichenkettenliteral.

Gute Variablennamen sind entscheidend, um Code zu verstehen.

• Verwenden Sie kurze Bezeichner und vermeiden Sie nicht gebräuchliche Abkürzungen. Gute Variablennamen sind normalerweise zwischen 3 bis 10 Zeichen lang, aber nur als Hinweis. Zum Beispiel ist accelerometer beschreibender als die Abkürzung acclmtr aus Gründen der Zeichenlänge.

• Versuchen Sie, realitätsnahe Beispiele zu verwenden, bei denen jede Variable klare Semantik hat. Greifen Sie nur auf Platzhalternamen wie foo und bar zurück, wenn das Beispiel einfach und übertrieben ist.

• Verwenden Sie nicht die ungarische Notation im Benennungskonvention. Präfixieren Sie den Variablennamen nicht mit seinem Typ. Schreiben Sie zum Beispiel bought = car.buyer !== null anstatt bBought = oCar.sBuyer != null oder name = "John Doe" anstelle von sName = "John Doe".

• Verwenden Sie für Sammlungen nicht den Typ wie Liste, Array, Warteschlange im Namen. Verwenden Sie den Inhaltsnamen in der Pluralform. Zum Beispiel, für ein Array von Autos, verwenden Sie cars und nicht carArray oder carList. Es kann Ausnahmen geben, wie wenn Sie die abstrakte Form einer Funktion ohne den Kontext einer bestimmten Anwendung zeigen wollen.

• Verwenden Sie für primitive Werte camelCase, angefangen mit einem Kleinbuchstaben. Verwenden Sie nicht _. Verwenden Sie prägnante, menschenlesbare und semantische Namen, wenn dies angemessen ist. Zum Beispiel verwenden Sie currencyName anstelle von currency_name.

• Vermeiden Sie die Verwendung von Artikeln und Possessivpronomen. Zum Beispiel verwenden Sie car anstatt myCar oder aCar. Es kann Ausnahmen geben, wie beim Beschreiben einer Funktion im Allgemeinen ohne praktischen Kontext.

• Verwenden Sie Variablennamen wie hier gezeigt:

  js

  const playerScore = 0;
  const speed = distance / time;
  

  Benennen Sie Variablen nicht so:

  js

  const thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
  const s = d / t;
  

Verwenden Sie beim Deklarieren von Variablen und Konstanten die Schlüsselwörter let und const, nicht var. Die folgenden Beispiele zeigen, was auf MDN Web Docs empfohlen wird und was nicht:

• Wenn eine Variable nicht neu zugewiesen wird, bevorzugen Sie const, wie folgt:

  js

  const name = "Shilpa";
  console.log(name);
  

• Wenn Sie den Wert einer Variable ändern, verwenden Sie let, wie unten gezeigt:

  js

  let age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das Beispiel unten verwendet let, wo const verwendet werden sollte. Der Code wird funktionieren, aber wir wollen diese Nutzung in MDN Web Docs-Codebeispielen vermeiden.

  js

  let name = "Shilpa";
  console.log(name);
  

• Das Beispiel unten verwendet const, für eine Variable, die neu zugewiesen wird. Die Neuzuweisung wird einen Fehler auslösen.

  js

  const age = 40;
  age++;
  console.log("Happy birthday!");
  

• Das Beispiel unten verwendet var, was die globale Umgebung verschmutzt:

  js

  var age = 40;
  var name = "Shilpa";
  

• Deklarieren Sie eine Variable pro Zeile, so:

  js

  let var1;
  let var2;
  let var3 = "Apapou";
  let var4 = var3;
  

  Deklarieren Sie nicht mehrere Variablen in einer Zeile, getrennt durch Kommata oder Nutzung einer Kettendeklaration. Vermeiden Sie solch eine Deklaration:

  js

  let var1, var2;
  let var3 = var4 = "Apapou"; // var4 is implicitly created as a global variable; fails in strict mode
  

Vermeiden Sie implizite Typkonvertierungen. Vermeiden Sie insbesondere +val, um einen Wert in eine Zahl umzuwandeln, und "" + val, um ihn in eine Zeichenkette umzuwandeln. Verwenden Sie stattdessen Number() und String(), ohne new, so:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = String(name);
    this.#birthYear = Number(year);
  }
}

Schreiben Sie nicht:

class Person {
  #name;
  #birthYear;

  constructor(name, year) {
    this.#name = "" + name;
    this.#birthYear = +year;
  }
}

Zusätzlich zu diesen JavaScript-Sprachfunktionen empfehlen wir einige Richtlinien in Bezug auf Web-APIs, die im Auge behalten werden sollten.

Wenn alle großen Browser (Chrome, Edge, Firefox und Safari) eine Funktion unterstützen, fügen Sie der Funktion kein Präfix hinzu. Schreiben Sie:

const context = new AudioContext();

Vermeiden Sie die zusätzliche Komplexität von Präfixen. Schreiben Sie nicht:

const AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();

Dasselbe gilt für CSS-Präfixe.

Wenn eine Methode, eine Eigenschaft oder eine ganze Schnittstelle veraltet ist, verwenden Sie sie nicht (außer in deren Dokumentation). Verwenden Sie stattdessen die moderne API.

Hier ist eine nicht erschöpfende Liste von Web-APIs, die zu vermeiden sind und was man an ihrer Stelle verwenden sollte:

• Verwenden Sie fetch() anstelle von XHR (XMLHttpRequest).
• Verwenden Sie AudioWorklet anstelle von ScriptProcessorNode in der Web Audio API.

• Verwenden Sie nicht Element.innerHTML, um rein textuellen Inhalt in ein Element einzufügen; verwenden Sie stattdessen Node.textContent. Die Eigenschaft innerHTML führt zu Sicherheitsproblemen, wenn ein Entwickler den Parameter nicht kontrolliert. Je seltener wir als Autoren sie verwenden, desto weniger Sicherheitslücken entstehen, wenn ein Entwickler unseren Code kopiert und einfügt.

  Das folgende Beispiel demonstriert die Verwendung von textContent.

  js

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.textContent = text;
  

  Verwenden Sie innerHTML nicht, um reinen Text in DOM-Knoten einzufügen.

  js

  const text = "Hello to all you good people";
  const para = document.createElement("p");
  para.innerHTML = text;
  

• Die Funktion alert() ist unzuverlässig. Sie funktioniert nicht in Live-Beispielen auf MDN Web Docs, die sich innerhalb eines <iframe> befinden. Zudem ist sie für das gesamte Fenster modal, was störend ist. In statischen Codebeispielen verwenden Sie console.log() oder console.error(). In Live-Beispielen vermeiden Sie console.log() und console.error(), da sie nicht angezeigt werden. Verwenden Sie ein dediziertes UI-Element.

• Beim Protokollieren einer Nachricht verwenden Sie console.log().
• Beim Protokollieren eines Fehlers verwenden Sie console.error().

JavaScript-Sprachreferenz - Durchstöbern Sie unsere JavaScript-Referenzseiten, um sich einige gute, prägnante und sinnvolle JavaScript-Snippets anzusehen.