Grammatik und Syntax

Geschätzte Lektüre: 10 Minuten 385 Ansichten

Grammatik und Syntax bilden das strukturelle Fundament jeder Programmiersprache – ähnlich wie bei natürlichen Sprachen. In JavaScript bezieht sich die Syntax auf die Regeln, wie Code geschrieben werden muss, damit er vom JavaScript-Interpreter verstanden werden kann, während die Grammatik das System von Regeln beschreibt, das festlegt, wie diese syntaktischen Elemente kombiniert werden dürfen.

Stellen Sie sich vor, Sie bauen einen Satz in einer natürlichen Sprache: Sie benötigen Subjekte, Verben und Objekte in einer bestimmten Reihenfolge. JavaScript funktioniert ähnlich – es erwartet bestimmte Schlüsselwörter, Operatoren und Interpunktion in einer definierten Struktur. Ein einfaches Beispiel:

let zahl = 5 + 3;

Hier folgen wir der JavaScript-Syntax: let deklariert eine Variable, zahl ist der Bezeichner, = ist der Zuweisungsoperator, 5 + 3 ist ein Ausdruck, und das Semikolon ; beendet die Anweisung.

Lexikalische Struktur: Die Bausteine des Codes

Bevor wir zu komplexeren Strukturen kommen, müssen wir die grundlegenden Bausteine verstehen:

Tokens: Die kleinsten bedeutungstragenden Einheiten im Code. Dazu gehören:
• Bezeichner (z.B. meineVariable )
• Schlüsselwörter (z.B. if, function )
• Operatoren (z.B. +, === )
• Literale (z.B. 42, „Hallo“ )
• Interpunktion (z.B. ;, {} )

    Weißraum und Zeilenenden: JavaScript ist (meist) nicht sensibel für Weißraum, nutzt ihn aber zur Strukturierung. Zeilenenden können Semikolons implizieren (Automatic Semicolon Insertion).

    Kommentare: // Einzeiliger Kommentar oder /* Mehrzeiliger Kommentar */ – wichtig für die Lesbarkeit aber vom Interpreter ignoriert.

    Variablen und Deklarationen

    JavaScript bietet mehrere Wege, Variablen zu deklarieren, jede mit eigener Syntax und Semantik:

    var alter = 30;         // Traditionelle, function-scoped Variable
let name = "Anna";      // Block-scoped, veränderlich
const PI = 3.14159;     // Block-scoped, unveränderlich

    Das Schlüsselwort var ist veraltet und sollte vermieden werden, da es zu unerwartetem Verhalten führen kann (z.B. Hoisting). Moderne JavaScript-Entwicklung bevorzugt const für unveränderliche Werte und let für Variablen, die sich ändern.

    Datentypen und Typensystem

    JavaScript ist dynamisch typisiert – Variablen haben keinen festen Typ, aber Werte schon. Die primitiven Datentypen sind:
    01. Number: let preis = 19.99; (Gleitkommazahlen)
    02. String: let text = „Hallo Welt“; (Zeichenketten)
    03. Boolean: let istWahr = true; (Wahrheitswerte)
    04. Null: let nichts = null; (absichtliche Abwesenheit)
    05. Undefined: let x; (nicht zugewiesener Wert)
    06. Symbol: let sym = Symbol(‚id‘); (eindeutige Identifikatoren)
    07. BigInt: let großeZahl = 1234567890123456789012345678901234567890n; (sehr große Zahlen)

    Komplexere Typen sind Object (inkl. Arrays und Funktionen):

    let person = { name: "Max", alter: 30 }; // Objekt
let zahlen = [1, 2, 3];                  // Array
function add(a, b) { return a + b; }     // Funktion

    Ausdrücke und Anweisungen

    Ein Ausdruck (expression) ist ein Code-Abschnitt, der einen Wert produziert:

    3 + 4                   // ergibt 7
"Hello".length          // ergibt 5
Math.random()           // ergibt eine Zufallszahl

    Eine Anweisung (statement) führt eine Aktion aus und endet typischerweise mit einem Semikolon:

    let summe = 0;          // Deklarationsanweisung
summe = 3 + 7;          // Zuweisungsanweisung
console.log(summe);     // Funktionsaufruf-Anweisung

    Kontrollstrukturen: Programmfluss steuern

    Kontrollstrukturen erlauben es, den Ablauf des Programms zu steuern:

    Bedingungen:

    if (alter >= 18) {
    console.log("Volljährig");
} else if (alter >= 16) {
    console.log("Teilweise volljährig");
} else {
    console.log("Minderjährig");
}

    Schleifen:

    // for-Schleife
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while-Schleife
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

    Switch-Anweisung:

    switch (wochentag) {
    case 1: console.log("Montag"); break;
    case 2: console.log("Dienstag"); break;
    // ...
    default: console.log("Wochenende");
}

    Funktionen: Code wiederverwenden

    Funktionen sind zentrale Bausteine in JavaScript. Die Syntax bietet mehrere Deklarationsformen:

    Funktionsdeklaration:

    function quadrat(x) {
    return x * x;
}

    Funktionsausdruck:

    const quadrat = function(x) {
    return x * x;
};

    Pfeilfunktionen (ES6):

    const quadrat = x => x * x;
// oder mit Blockkörper
const quadrat = (x) => {
    return x * x;
};

    Funktionen können Parameter entgegennehmen und Werte zurückgeben. JavaScript ist sehr flexibel – Funktionen können auch als Werte behandelt, als Argumente übergeben oder von anderen Funktionen zurückgegeben werden (Higher-Order Functions).

    Objekte und Klassen

    JavaScript ist eine prototypbasierte Sprache, unterstützt aber auch klassische OOP-Syntax (ab ES6):

    Objektliterale:

    const auto = {
    marke: "Toyota",
    modell: "Corolla",
    starten: function() {
        console.log("Motor startet");
    }
};

    Klassen:

    class Auto {
    constructor(marke, modell) {
        this.marke = marke;
        this.modell = modell;
    }
    
    starten() {
        console.log(`${this.marke} ${this.modell} startet`);
    }
}

const meinAuto = new Auto("VW", "Golf");
meinAuto.starten();

    Asynchrone Syntax

    Moderne JavaScript-Entwicklung arbeitet viel mit asynchronem Code. Hier gibt es mehrere Syntaxformen:

    Callback-Funktionen:

    fs.readFile('datei.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});

    Promises:

    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Fehler:', error));

    Async/Await (syntaktischer Zucker für Promises):

    async function ladeDaten() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fehler:', error);
    }
}

    Module und Import/Export

    Moderne JavaScript-Anwendungen sind modular aufgebaut. Die Syntax für Module:

    Export:

    // Named Export
export const pi = 3.14159;
export function kreisFläche(r) { return pi * r * r; }

// Default Export
export default class Kreis { /* ... */ }

    Import:

    // Named Import
import { pi, kreisFläche } from './mathe.js';

// Default Import
import Kreis from './kreis.js';

// Namespace Import
import * as mathe from './mathe.js';

    Fortgeschrittene Syntaxkonzepte

    Destrukturierung:

    // Objekt-Destrukturierung
const { name, alter } = person;
console.log(name, alter);

// Array-Destrukturierung
const [erstes, zweites] = zahlen;

    Rest- und Spread-Operatoren:

    // Rest-Parameter
function summe(...zahlen) { /* ... */ }

// Spread-Operator
const neueZahlen = [...alteZahlen, 42];

    Optionale Verkettung (Optional Chaining):

    const stadt = person?.adresse?.stadt;

    Nullish Coalescing:

    const anzeigeName = benutzername ?? "Gast";

    Fehlerbehandlung

    Robuster Code benötigt eine klare Fehlerbehandlung:

    try {
    // Code, der Fehler verursachen könnte
    const ergebnis = gefährlicheOperation();
    console.log(ergebnis);
} catch (error) {
    // Fehlerbehandlung
    console.error("Ein Fehler ist aufgetreten:", error.message);
} finally {
    // Wird immer ausgeführt
    console.log("Aufräumarbeiten");
}

    Strikter Modus („use strict“)

    Der strikte Modus aktiviert strengere Parsing- und Fehlerbehandlungsregeln:

    "use strict";

function test() {
    nichtDeklariert = 42; // Wirft ReferenceError im strikten Modus
}

    Die Eleganz der JavaScript-Syntax

    Die Syntax von JavaScript hat sich von einer einfachen Skriptsprache zu einem ausdrucksstarken, modernen Werkzeug entwickelt. Während die Grundlagen relativ leicht zu erlernen sind, bietet die Sprache tiefe Möglichkeiten für komplexe Anwendungsfälle. Das Verständnis der Grammatik und Syntax ist essentiell, um sauberen, wartbaren und effizienten Code zu schreiben.

    Die Entwicklung von JavaScript (insbesondere durch ECMAScript 6 und spätere Versionen) hat die Sprache deutlich verbessert, während die Abwärtskompatibilität gewahrt wurde. Moderne Syntaxformen wie Pfeilfunktionen, Klassen, Module und asynchrone Muster machen JavaScript zu einer kraftvollen Sprache für sowohl client- als auch serverseitige Entwicklung.

    Dieses Dokument teilen

    Grammatik und Syntax

    Oder Link kopieren

    INHALT

    Abonnieren

    ×
    Cancel