Tiefes Verständnis der JavaScript-Syntax und Codestruktur

Überblick

Alle Programmiersprachen müssen bestimmte Regeln befolgen, um zu funktionieren. Die Menge der Regeln, die den korrekten Aufbau einer Programmiersprache bestimmen, wird als Grammatik bezeichnet. Viele Programmiersprachen bestehen größtenteils aus ähnlichen Konzepten mit syntaktischen Variationen.

In diesem Tutorial behandeln wir die vielen Regeln und Konventionen der JavaScript-Syntax und Codestruktur.

Funktionalität und Lesbarkeit

Funktionalität und Lesbarkeit sind zwei wichtige Gründe, sich beim Einstieg in JavaScript auf die Syntax zu konzentrieren.

Damit JavaScript funktioniert, sind einige Syntaxregeln erforderlich. Wenn Sie diese nicht befolgen, gibt die Konsole einen Fehler aus und die Ausführung des Skripts wird beendet.

Bedenken Sie den Syntaxfehler in „Hallo Welt!“. Programm:

// Beispiel eines fehlerhaften JavaScript-Programms
console.log("Hallo Welt!"

In diesem Codebeispiel fehlt eine schließende Klammer und statt der erwarteten Ausgabe von „Hallo Welt!“ auf der Konsole wird der folgende Fehler angezeigt:

Nicht abgefangener Syntaxfehler: ) fehlt nach Argumentliste

Die fehlenden ")" müssen ergänzt werden, bevor das Skript weiter ausgeführt werden kann. Dies ist ein Beispiel dafür, wie Syntaxfehler in JavaScript Ihr Skript beschädigen können, da die korrekte Syntax eingehalten werden muss, damit der Code ausgeführt wird.

Einige Aspekte der JavaScript-Syntax und -Formatierung basieren auf unterschiedlichen Denkschulen. Allerdings gibt es einige Stilregeln oder Auswahlmöglichkeiten, die nicht zwingend erforderlich sind und beim Ausführen Ihres Codes keine Fehler verursachen. Es gibt jedoch viele allgemeine Konventionen, die es zu beachten gilt, da Entwickler über verschiedene Projekte und Codebasen hinweg immer vertrauter mit dem Stil werden. Das Befolgen gängiger Konventionen verbessert die Lesbarkeit.

Betrachten Sie die folgenden drei Beispiele für die Variablenzuweisung.

const greeting="Hallo"; // kein Leerzeichen zwischen Variable und Zeichenfolge
const greeting = "Hallo"; // übermäßige Leerzeichen nach der Zuweisung
const greeting = "Hallo"; // einzelnes Leerzeichen zwischen Variable und Zeichenfolge

Obwohl die Ausgabe der drei obigen Beispiele genau gleich ist, ist die dritte Option, „gruß = „Hallo“;“, die bei weitem gebräuchlichste und am besten lesbare Art, den Code zu schreiben, insbesondere im Kontext eines größeren Programms.

Es ist wichtig, in Ihrem gesamten Codierungsprojekt einen einheitlichen Stil beizubehalten. Da die Richtlinien von Organisation zu Organisation unterschiedlich sind, müssen auch Sie flexibel sein.

Wir gehen unten einige Codebeispiele durch, damit Sie sich mit der Syntax und Struktur von JavaScript-Code vertraut machen und bei Fragen auf diesen Artikel zurückgreifen können.

leer

Leerzeichen in JavaScript bestehen aus Leerzeichen, Tabulatoren und Zeilenumbruchzeichen (drücken Sie die Eingabetaste auf der Tastatur). Wie bereits erwähnt, ignoriert JavaScript überflüssige Leerzeichen außerhalb von Zeichenfolgen sowie Leerzeichen zwischen Operatoren und anderen Symbolen. Dies bedeutet, dass die folgenden drei Beispiele für die Variablenzuweisung genau die gleiche berechnete Ausgabe haben:

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

„userLocation“ stellt „New York City, NY“ dar, unabhängig davon, welcher dieser Stile im Skript geschrieben ist. Sie haben auch keine Auswirkungen auf JavaScript, unabhängig davon, ob sie mit Tabulatoren oder Leerzeichen geschrieben sind.

Eine gute Faustregel für die gängigsten Leerzeichenkonventionen besteht darin, den gleichen Regeln wie in der Mathematik und Sprachgrammatik zu folgen.

Eine bemerkenswerte Ausnahme zu diesem Stil sind Zuweisungen zu mehreren Variablen. Beachten Sie die Platzierung des = in den folgenden Beispielen:

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

Alle Zuweisungsoperatoren (=) werden in einer Zeile mit einem Leerzeichen nach der Variablen platziert. Diese Art der Organisation wird nicht von jeder Codebasis verwendet, kann aber zur Verbesserung der Lesbarkeit eingesetzt werden.

JavaScript ignoriert zusätzliche Zeilenumbrüche. Normalerweise werden zusätzliche Zeilenumbrüche über Kommentaren und nach Codeblöcken eingefügt.

Klammern

Bei Schlüsselwörtern wie „if“, „switch“ und „for“ werden häufig vor und nach den Klammern Leerzeichen eingefügt. Beachten Sie die folgenden Vergleichs- und Schleifenbeispiele.

// Ein Beispiel für die Syntax einer if-Anweisung
Wenn () { }
//Überprüfen Sie die mathematische Gleichung und drucken Sie einen String auf der Konsole
wenn (4 < 5) {
    console.log("4 ist kleiner als 5.");
    }
// Ein Beispiel für 
for-Schleifensyntaxfor () { }
// 10 Mal iterieren und jede Iterationsnummer auf der Konsole ausgeben
für (lass i = 0; i <= 10; i++) {
    konsole.log(i);
    }

If-Anweisungen und For-Schleifen haben auf beiden Seiten der Klammern Leerzeichen (aber nicht innerhalb der Klammern).

Wenn der Code zu einer Funktion, Methode oder Klasse gehört, berühren die Klammern den entsprechenden Namen.

// Ein Beispiel 
FunktionFunktion Funktionsname() {}
// Initialisiere eine Funktion zur Berechnung des Volumens eines Würfels
Funktion Würfel(Zahl) {
    gibt Math.pow(Zahl, 3) zurück;
}
// Funktion aufrufen
Würfel(5);

Im obigen Beispiel ist cube() eine Funktion und das Klammerpaar () enthält die Argumente oder Parameter. In diesem Fall sind die Argumente eine Zahl bzw. 5. Obwohl der cube() mit dem zusätzlichen Leerzeichen gültig ist und der Code wie erwartet ausgeführt wird, fällt dies kaum auf. Durch die Zusammenführung können Sie den Funktionsnamen einfacher mit dem Klammerpaar und allen zugehörigen übergebenen Parametern verknüpfen.

Semikolon

Ein JavaScript-Programm besteht aus einer Reihe von Anweisungen, sogenannten Anweisungen, genauso wie ein geschriebener Absatz aus einer Reihe von Sätzen besteht. Während ein Satz mit einem Punkt endet, enden JavaScript-Anweisungen normalerweise mit einem Semikolon (;).

// Eine einzelne JavaScript-Anweisung
const jetzt = neues Datum();

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

// Den aktuellen Zeitstempel abrufen und auf der Konsole ausgeben
const jetzt = neues Date(); console.log(jetzt);

Wenn Anweisungen durch Zeilenumbrüche getrennt sind, sind Semikolons optional.

// Zwei durch Zeilenumbrüche getrennte Anweisungen
const jetzt = neues Datum()
console.log(jetzt)

Eine sichere und gängige Konvention besteht darin, Anweisungen unabhängig von Zeilenumbrüchen durch Semikolons zu trennen. Im Allgemeinen gilt es als gute Praxis, sie einzuschließen, um die Möglichkeit von Fehlern zu verringern.

// Zwei Anweisungen, getrennt durch Zeilenumbrüche und Semikolons
const jetzt = neues Datum();
console.log(jetzt);

Semikolons sind auch zwischen Initialisierung, Bedingung und Inkrement bzw. Dekrement in einer For-Schleife erforderlich.

für (Initialisierung; Bedingung; Inkrement) { 
   // führe die Schleife aus
}

Nach Blockanweisungen wie beispielsweise if, for, do, while, class, switch und function werden keine Semikolons eingefügt. Diese Blockanweisungen sind in geschweifte Klammern eingeschlossen. Beachten Sie das folgende Beispiel.

// Initialisiere eine Funktion zur Berechnung der Fläche eines Quadrats
Funktion Quadrat(Zahl) {
    gibt Math.pow(Zahl, 2) zurück;
}
// Berechnen Sie die Fläche einer Zahl größer als 0
wenn (Zahl > 0) {
    Quadrat (Zahl);
}

Beachten Sie, dass nicht der gesamte in geschweiften Klammern eingeschlossene Code mit einem Semikolon endet. Objekte werden in geschweifte Klammern eingeschlossen und mit einem Semikolon abgeschlossen.

// Ein Beispielobjekt
const ObjektName = {};
// Dreiecksobjekt initialisieren
const Dreieck = {
    Typ: "rechts",
    Winkel: 90,
    Seiten: 3,
};

Es ist allgemein anerkannte Praxis, nach jeder JavaScript-Anweisung ein Semikolon einzufügen, mit Ausnahme von Blockanweisungen, die mit einer geschweiften Klammer enden.

Vertiefung

Technisch gesehen kann ein vollständiges JavaScript-Programm in einer Zeile geschrieben werden. Dies kann jedoch schnell sehr schwierig zu lesen und zu pflegen werden. Stattdessen verwenden wir Zeilenumbrüche und Einrückungen.

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

// Bedingte Anweisung in einer Zeile geschrieben
if (x === 1) { /* Code ausführen, wenn wahr */ } else { /* Code ausführen, wenn falsch */ }
// Bedingte Anweisung mit Einrückung
wenn (x === 1) {
    // Code ausführen, wenn wahr
    }anders {
        // Code ausführen, wenn falsch
        }

Beachten Sie, dass der gesamte Code in einem Block eingerückt ist. Die Einrückung kann mit zwei Leerzeichen, vier Leerzeichen oder durch Drücken der Tabulatortaste erfolgen. Die Verwendung von Tabulatoren oder Leerzeichen hängt von Ihren persönlichen Vorlieben (bei Einzelprojekten) oder den Richtlinien Ihrer Organisation (bei Gemeinschaftsprojekten) ab.

Das Einfügen einer öffnenden geschweiften Klammer am Ende der ersten Zeile, wie im obigen Beispiel, ist die normale Art und Weise zum Erstellen von JavaScript-Blockanweisungen und -Objekten. Blockanweisungen können auch mit geschweiften Klammern in einer eigenen Zeile geschrieben werden.

// Bedingte Anweisung mit Klammern vor Zeilenumbrüchen
wenn (x === 1){
    // Code ausführen, wenn wahr
    }anders{
    // Code ausführen, wenn falsch
    }

Dieser Stil ist in JavaScript nicht so verbreitet wie in anderen Sprachen, aber nicht unbekannt.

Alle verschachtelten Blockanweisungen werden weiter eingerückt.

// Initialisiere eine Funktionfunction isEqualToOne(x) {
    //Überprüfe, ob x gleich eins ist
    if (x === 1) { // bei Erfolg true zurückgeben
        gibt true zurück;
    } sonst { return false;
    }
}

Eine korrekte Codeeinrückung ist wichtig, um die Lesbarkeit zu erhalten und Unübersichtlichkeit zu vermeiden. Beachten Sie jedoch, dass komprimierte Bibliotheken unnötige Zeichen entfernen und daher eine kleinere Dateigröße für schnellere Seitenladezeiten erzeugen (wie jquery.min.js und d3.min.js).

Identität

Der Name einer Variable, Funktion oder Eigenschaft wird in JavaScript als Bezeichner bezeichnet. Bezeichner bestehen aus Buchstaben und Zahlen, dürfen aber keine Symbole außer $ und u enthalten und dürfen nicht mit einer Zahl beginnen.

Groß-/Kleinschreibung beachten

Bei diesen Namen muss die Groß-/Kleinschreibung beachtet werden. Die folgenden beiden Beispiele „myvariable“ und „myvariable“ beziehen sich auf zwei unterschiedliche Variablen.

var meineVariable = 1;
var meinevariable = 2;

Die Konvention für JavaScript-Namen besteht darin, sie in CamelCase zu schreiben. Dies bedeutet, dass das erste Wort klein geschrieben ist, aber jedes folgende Wort mit einem Großbuchstaben beginnt. Möglicherweise sehen Sie auch globale Variablen oder Konstanten in Großbuchstaben, getrennt durch Unterstriche.

const VERSICHERUNGSRATE = 0,4;

Die Ausnahme von dieser Regel sind Klassennamen, bei denen jedes Wort normalerweise mit einem Großbuchstaben beginnt (PascalCase).

// Initialisiere eine Klasse
Klasse BeispielKlasse {
    Konstruktor() { }
}

Um sicherzustellen, dass Ihr Code lesbar ist, empfiehlt es sich, in Ihren Programmdateien eindeutige Bezeichner zu verwenden.

Reservierte Schlüsselwörter

Bezeichner dürfen außerdem nicht aus reservierten Schlüsselwörtern bestehen. Schlüsselwörter sind Wörter in der JavaScript-Sprache, die über integrierte Funktionen verfügen, wie z. B. var, if, for und this.

Beispielsweise können Sie einer Variablen mit dem Namen „var“ keinen Wert zuweisen.

var var = "Ein gewisser Wert";

Da JavaScript var als Schlüsselwort versteht, führt dies zu einem Syntaxfehler:

SyntaxError: Unerwartetes Token (1:4)

Das Obige ist der ausführliche Inhalt für ein tieferes Verständnis der Syntax und Codestruktur in JavaScript. Weitere Informationen zur Syntax und Struktur in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!