TOC

Grundlegendes zu Syntax und Codestruktur in JavaScript

Einführung

Bevor Sie lernen, in einer gesprochenen Sprache zu schreiben, müssen Sie zunächst die Grammatikregeln erlernen. Hier sind einige Beispiele für Regeln, die Sie in englischer Sprache finden können:

  • Ein Satz beginnt mit einem Großbuchstaben.

  • Ein Satz endet in einem Punkt.

  • Ein neuer Absatz wird eingerückt.

  • Der gesprochene Dialog wird in doppelte Anführungszeichen gesetzt.

Ebenso müssen alle Programmiersprachen bestimmte Regeln einhalten, um funktionieren zu können. Dieser Regelsatz, der die korrekte Struktur von Programmiersprachen bestimmt, wird als * Syntax * bezeichnet. Viele Programmiersprachen bestehen größtenteils aus ähnlichen Konzepten mit unterschiedlichen Syntax.

In diesem Lernprogramm werden viele Regeln und Konventionen der JavaScript-Syntax und der Codestruktur erläutert.

Funktionalität und Lesbarkeit

Funktionalität und Lesbarkeit sind zwei wichtige Gründe, sich bei der Arbeit mit JavaScript auf die Syntax zu konzentrieren.

Es gibt einige Syntaxregeln, die für die JavaScript-Funktionalität obligatorisch sind. Wenn sie nicht befolgt werden, gibt die Konsole einen Fehler aus und das Skript wird nicht mehr ausgeführt.

Betrachten Sie einen Syntaxfehler im Programm "Hello, World!":

broken.js

// Example of a broken JavaScript program
console.log("Hello, World!"

In diesem Codebeispiel fehlt die schließende Klammer, und statt das erwartete "Hallo Welt!" Auf der Konsole zu drucken, wird der folgende Fehler angezeigt:

OutputUncaught SyntaxError: missing ) after argument list

Das fehlende "+) +" muss hinzugefügt werden, bevor das Skript weiter ausgeführt wird. Dies ist ein Beispiel dafür, wie ein Fehler in der JavaScript-Syntax das Skript beschädigen kann, da die korrekte Syntax eingehalten werden muss, damit der Code ausgeführt werden kann.

Einige Aspekte der JavaScript-Syntax und -Formatierung basieren auf unterschiedlichen Denkansätzen. Das heißt, es gibt Stilregeln oder Auswahlmöglichkeiten, die nicht obligatorisch sind und bei der Ausführung des Codes nicht zu Fehlern führen. Es gibt jedoch viele gängige Konventionen, die zu befolgen sind, da Entwickler zwischen Projekten und Codebasen mit dem Stil besser vertraut sind. Die Einhaltung allgemeiner Konventionen führt zu einer besseren Lesbarkeit.

Betrachten Sie die folgenden drei Beispiele für die Zuweisung von Variablen.

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

Obwohl alle drei obigen Beispiele in der Ausgabe genau gleich funktionieren, ist die dritte Option von "+ greeting =" Hello "+" bei weitem die am häufigsten verwendete und am besten lesbare Methode, um den Code zu schreiben, insbesondere wenn man bedenkt, dass dies der Fall ist es im Rahmen eines größeren Programms.

Es ist wichtig, den Stil Ihres gesamten Codierungsprojekts konsistent zu halten. Je nach Organisation müssen Sie unterschiedliche Richtlinien befolgen, sodass Sie auch flexibel sein müssen.

Im Folgenden werden einige Codebeispiele aufgeführt, damit Sie sich mit der Syntax und Struktur von JavaScript-Code vertraut machen und im Zweifelsfall auf diesen Artikel zurückgreifen können.

Leerzeichen

Whitespace in JavaScript besteht aus Leerzeichen, Tabulatoren und Zeilenumbrüchen (Drücken von "+ ENTER +" auf der Tastatur). Wie bereits gezeigt, werden übermäßige Leerzeichen außerhalb eines Strings und die Leerzeichen zwischen Operatoren und anderen Symbolen von JavaScript ignoriert. Dies bedeutet, dass die folgenden drei Beispiele für die Variablenzuweisung genau dieselbe berechnete Ausgabe haben:

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

+ userLocation + repräsentiert "New York City, NY", unabhängig davon, welche dieser Stile im Skript geschrieben sind, und es macht keinen Unterschied für JavaScript, ob das Leerzeichen mit Tabulatoren oder Leerzeichen geschrieben ist.

Eine gute Faustregel, um die gebräuchlichsten Whitespace-Konventionen einhalten zu können, ist, die gleichen Regeln zu befolgen, wie Sie es in der Mathematik und der Sprachgrammatik gewohnt sind.

Zum Beispiel ist "+ let x = 5 * y " besser lesbar als " let x = 5 * y +".

Eine bemerkenswerte Ausnahme von diesem Stil ist die Zuweisung mehrerer Variablen. Beachten Sie die Position von "+ = +" im folgenden Beispiel:

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

Alle Zuweisungsoperatoren (+ = +) werden mit dem Leerzeichen nach der Variablen in einer Reihe angezeigt. Diese Art von Organisationsstruktur wird nicht von jeder Codebasis verwendet, kann jedoch zur Verbesserung der Lesbarkeit verwendet werden.

Überzählige Zeilenumbrüche werden von JavaScript ebenfalls ignoriert. In der Regel wird vor einem Kommentar und nach einem Codeblock ein zusätzlicher Zeilenumbruch eingefügt.

Klammern

Bei Stichwörtern wie "+ if", "+ switch" und "+ four" werden normalerweise Leerzeichen vor und nach den Klammern eingefügt. Beachten Sie die folgenden Vergleichs- und Schleifenbeispiele.

// An example of if statement syntax
if () { }

// Check math equation and print a string to the console
if (4 < 5) {
   console.log("4 is less than 5.");
}

// An example of for loop syntax
for () { }

// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
   console.log(i);
}

Wie gezeigt, haben die "+ if" -Anweisung und die "+ for" -Schleife auf jeder Seite der Klammern (jedoch nicht innerhalb der Klammern) Leerzeichen.

Wenn sich der Code auf eine Funktion, Methode oder Klasse bezieht, berühren die Klammern den jeweiligen Namen.

// An example function
function functionName() {}

// Initialize a function to calculate the volume of a cube
function cube(number) {
   return Math.pow(number, 3);
}

// Invoke the function
cube(5);

Im obigen Beispiel ist "+ cube () " eine Funktion, und das Klammerpaar " () " enthält die Parameter oder Argumente. In diesem Fall sind die Parameter " number " bzw. " 5 ". Obwohl ` cube () +` mit einem zusätzlichen Leerzeichen insofern gültig ist, als der Code wie erwartet ausgeführt wird, wird er fast nie gesehen. Wenn Sie sie zusammenhalten, können Sie den Funktionsnamen auf einfache Weise dem Klammerpaar und allen zugeordneten übergebenen Argumenten zuordnen.

Semikolons

JavaScript-Programme bestehen aus einer Reihe von Anweisungen, die als Anweisungen bezeichnet werden, ebenso wie geschriebene Absätze aus einer Reihe von Sätzen bestehen. Während ein Satz mit einem Punkt endet, endet eine JavaScript-Anweisung häufig mit einem Semikolon (+; +).

// A single JavaScript statement
const now = new Date();

Wenn zwei oder mehr Anweisungen nebeneinander stehen, müssen sie durch ein Semikolon getrennt werden.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

Wenn Anweisungen durch eine neue Zeile getrennt sind, ist das Semikolon optional.

// Two statements separated by newlines
const now = new Date()
console.log(now)

Eine sichere und übliche Konvention ist es, Anweisungen unabhängig von Zeilenumbrüchen mit einem Semikolon zu trennen. Im Allgemeinen wird es als gute Praxis angesehen, sie einzubeziehen, um die Wahrscheinlichkeit von Fehlern zu verringern.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

Zwischen der Initialisierung, der Bedingung und dem Inkrementieren oder Dekrementieren einer "+ für" -Schleife sind auch Semikolons erforderlich.

for (initialization; condition; increment) {
   // run the loop
}

Semikolons werden nicht nach irgendeiner Art von Blockanweisung eingeschlossen, wie + if,` + for`, + do,` + while`, + class +, + switch + und + function i. Diese Blockanweisungen sind in geschweiften Klammern + {} + enthalten. Beachten Sie die folgenden Beispiele.

// Initialize a function to calculate the area of a square
function square(number) {
   return Math.pow(number, 2);
}

// Calculate the area of a number greater than 0
if (number > 0) {
   square(number);
}

Seien Sie vorsichtig, da nicht jeder Code in geschweiften Klammern ohne Semikolon endet. Objekte sind in geschweiften Klammern eingeschlossen und sollten mit einem Semikolon enden.

// An example object
const objectName = {};

// Initialize triangle object
const triangle = {
   type: "right",
   angle: 90,
   sides: 3,
};

Es ist allgemein anerkannt, nach jeder JavaScript-Anweisung Semikolons einzufügen, mit Ausnahme von Blockanweisungen, die in geschweiften Klammern enden.

Vertiefung

Ein komplettes JavaScript-Programm kann technisch in einer einzigen Zeile geschrieben werden. Dies würde jedoch schnell sehr schwer zu lesen und zu pflegen sein. Stattdessen verwenden wir Zeilenumbrüche und Einrückungen.

Hier ist ein Beispiel für eine bedingte "+ if " / " else +" -Anweisung, die entweder in einer Zeile oder mit Zeilenumbrüchen und Einrückungen geschrieben ist.

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }

// Conditional statement with indentation
if (x === 1) {
   // execute code if true
} else {
   // execute code if false
}

Beachten Sie, dass jeder in einem Block enthaltene Code eingerückt ist. Der Einzug kann mit zwei oder vier Leerzeichen oder durch Drücken der Tabulatortaste erfolgen. Ob Tabulatoren oder Leerzeichen verwendet werden, hängt entweder von Ihren persönlichen Vorlieben (für ein Einzelprojekt) oder den Richtlinien Ihrer Organisation (für ein Verbundprojekt) ab.

Das Einschließen der öffnenden Klammer am Ende der ersten Zeile wie im obigen Beispiel ist die herkömmliche Methode zum Strukturieren von JavaScript-Blockanweisungen und -Objekten. Eine andere Möglichkeit, Blockanweisungen zu sehen, besteht darin, die geschweiften Klammern in eigenen Zeilen zu setzen.

// Conditional statement with braces on newlines
if (x === 1)
{
   // execute code if true
}
else
{
   // execute code if false
}

Dieser Stil ist in JavaScript viel seltener als in anderen Sprachen, aber nicht ungewöhnlich.

Alle verschachtelten Blockanweisungen werden weiter eingerückt.

// Initialize a function
function isEqualToOne(x) {
   // Check if x is equal to one
   if (x === 1) {
       // on success, return true
       return true;
   } else {
     return false;
   }
}

Die korrekte Einrückung Ihres Codes ist unerlässlich, um die Lesbarkeit zu gewährleisten und Verwirrung zu lindern. Eine Ausnahme von dieser Regel ist, dass in komprimierten Bibliotheken unnötige Zeichen entfernt werden. Daher werden die Dateigrößen verringert, um schnellere Ladezeiten für die Seite zu ermöglichen (wie in +jquery.min. js + ` und https://d3js.org/ [

Related