Variablen und Syntax

2.1    Variablen

2.1.1   Variablen anmelden

Programme lesen Daten, ändern Daten und erzeugen neue Daten. Irgendwo müssen diese Daten gespeichert werden.

Eine Variable ist der Name für einen Speicher in den Tiefen des Rechners und agiert wie eine Schachtel mit einer Beschriftung. In eine Schachtel passen Daten von einfachen Zahlen wie 17 oder 3.01724, der Name einer Autorin wie »Jane Austen« bis hin zu einer Liste von Fahrradgeschäften mitsamt Preisen.

JavaScript hat drei Schlüsselwörter für die Deklaration (Bekanntmachung) von Variablen: var, let und const. var ist die älteste Form und sollte uns immer seltener begegnen. let und const wurden 2015 in ECMAScript Version 6 vorgestellt und sind heute der Standard.

2.1.2   Variablen mit let deklarieren

Um eine Linie in einer Grafik zu zeichnen, werden zwei Punkte gebraucht, und für jeden Punkt zwei Variablen.

let bedeutet: Jetzt wird eine Variable deklariert. Im Beispiel wird der Variablen auch gleich ein Wert zugewiesen: Die Variable wird initialisiert. x1, y1 und x2, y2 sind die Namen oder Beschriftungen. Das Gleichheitszeichen weist den Variablen ihre Werte zu. Programme brauchen nicht nur Zahlen, sondern auch Zeichenfolgen (Strings). Zeichenfolgen sitzen in Hochkommas.

 Bevor ECMAScript Version 6 in Kraft trat, wurden Variablen mit dem Schlüsselwort var angemeldet oder das Skript nutzte Variablen direkt ohne Schlüsselwort. Die direkte Technik war ein Sündenfall der Frühzeit und führt im Handumdrehen zu schwer auffindbaren Fehlern. Auch Deklarationen mit var führen durch ungewolltes Überschreiben zu Fehlern.

2.1.3   const – konstante Variablen

Auch Konstanten sind Variablen, die alle möglichen Werte enthalten können, aber sie werden im Laufe des Programms nicht geändert. Wenn doch, wirft das Skript einen Fehler aus. Die Deklaration einer Variablen mit const als unveränderliche Variable ist also eine Sicherheitsmaßnahme gegen versehentliches Überschreiben und verbessert die Lesbarkeit.

Mit let ist eine Deklaration ohne Initialisierung erlaubt, aber Konstanten können nicht ohne Initialisierung deklariert werden.

Die meisten Deklarationen von Variablen in den Beispielen in diesem Buch nutzen const, weil es vor ungewollten Änderungen schützt.

2.1.4   Mehrere Variablen deklarieren und initialisieren

Statt Variable für Variable in je eine Zeile zu schreiben, können Sie Mehrfach-Zuweisungen nutzen.

Die Werte können durch die Deklaration mit let später zugewiesen werden. Auch mehrere Konstanten können sich eine Zeile teilen.

2.1.5   let oder const?

Es wäre kein Problem, let für alle Variablen im gesamten Skript zu nutzen. Ich setze hingegen bevorzugt const ein, wo es geht, und nutze let nur, wenn der Variablen neue Werte zugewiesen werden. Wenn nach ein paar Monaten eine Änderung am Programm durchgeführt wird, holt die Trennung zwischen const und let die Zusammenhänge schneller wieder ins Gedächtnis zurück. Und wie bereits erwähnt: Der Schutz vor versehentlichem Überschreiben spart viel Zeit bei der Suche nach Fehlern.

2.1.6   Variablennamen und Konventionen

1. Namen von Variablen beginnen grundsätzlich mit einem Buchstaben (per Konvention mit einem Kleinbuchstaben), einem Unterstrich oder einem $-Zeichen.

2. Ziffern innerhalb des Namens sind erlaubt und Umlaute sind kein Problem.

3. Gegen Bindestriche und Leerzeichen in Variablennamen ist JavaScript allergisch: Beides führt sofort zu einem JavaScript-Fehler.

4. Bei Groß- und Kleinschreibung ist JavaScript penibel: X ist eine andere Variable als x.

Auch wenn jetzt viele Variablennamen x, y oder a und b sind: Der Variablenname sollte uns auch in drei Monaten sagen, für was die Variable steht. Da Variablennamen weder Leerzeichen noch Bindestriche enthalten dürfen, entstehen lange Wörter. JavaScript-Programmierer arbeiten gern mit dem sogenannten camelCase.

Der Anfangsbuchstabe ist klein, der zweiten Begriff beginnt mit einem Großbuchstaben. Diese Konvention finden wir auch in den mitgelieferten Methoden in JavaScript, besonders bei den ausdrucksvollen Namen des Document Object Models (der Umsetzung der HTML-Struktur in JavaScript) im Abschnitt 10.3.

2.1.7   Beispiel: Rechnen mit Variablen

Jetzt haben wir die Zutaten für die Berechnung der Steigung der Geraden beisammen. Am Ende führt dieses Beispiel zu einem Skript, das den bevorzugten Wert (preferred Value) der CSS-Funktion clamp(min, preferredValue, max) (Abschnitt 12.1) berechnet. Schriftgrößen mit CSS clamp() sind dynamisch und brauchen nur eine Zeile, um der Größe des Browserfensters vom Handy bis zum großen Bildschirm gerecht zu werden. Das Festlegen einer minimalen und maximalen Schriftgröße ist einfach, aber der bevorzugte Wert wird anhand der Steigung einer Geraden berechnet.

Um die Steigung einer Geraden zwischen zwei Punkten zu berechnen, brauchen Sie zwei Punkte mit jeweils einem x- und einem y-Wert.

Damit die Eingangswerte x1, y1, x2 und y2 im Laufe des Programms nicht versehentlich überschrieben werden, sind sie als const angelegt. steigung hingegen ist die Variable und darum mit let deklariert.

console.log("Steigung", steigung) ist die Anweisung, den aktuellen Wert in der Konsole auszugeben. Die Zeichenkette in Hochkommas "Steigung" wird wörtlich ausgegeben (und darf darum mit einem großen S geschrieben werden), steigung hingegen ist der Wert der Variablen, das Ergebnis der Berechnung.

Die zweite Konsolen-Ausgabe ist ein kleiner Test, ob JavaScript wirklich rechnen kann: 100 * steigung ist der y-Wert bei x = 100.

Das Minuszeichen und der Schrägstrich / sind die Operatoren in der Berechnung. Die runden Klammern um (y2 - y1) und (x2 - x1) legen die Reihenfolge fest: Die Berechnungen innerhalb der runden Klammern haben Vorrang vor der Division.

2.1.8   Gültigkeitsbereich von Variablen: Scope

In älteren Skripten begegnet man noch der Deklaration von Variablen mit dem Schlüsselwort var und auch der Verwendung von Variablen ohne jegliches Schlüsselwort. Auch wenn mit ECMAScript 2015 const und let in den Standard aufgenommen wurden, ist die Deklaration von Variablen mit var oder ohne Schlüsselwort auch weiterhin legal. Neuere Versionen von JavaScript setzen ältere nicht außer Kraft.

Eine Variable, die mit dem veralteten Schlüsselwort var oder ohne Schlüsselwort deklariert wurde, kann sowohl erneut deklariert als auch überschrieben werden und lässt sich mit einem Aktenordner vergleichen: Sie können die Blätter im Aktenordner herausnehmen und neue Blätter abheften, die zu einem gänzlich anderen Thema gehören. Das erschwert die Pflege des Programms und führt schnell zu Fehlern.

Hingegen dürfen Variablen aus dem Stamm let geändert, aber nicht erneut deklariert werden. Sie entsprechen einem Aktenordner mit einer Aufschrift »Versicherungsunterlagen 2024«.

Variablen mit const können nicht erneut deklariert und auch nicht geändert werden: Sie entsprechen einem gebundenen Buch.

Diese Erklärung allein ist nur die Spitze des Eisbergs für den Umgang mit JavaScript-Variablen. Ein weiteres Konzept der Reichweite und Gültigkeit von Variablen ist die Frage, wo sie deklariert wurden und von welchen Stellen aus sie erreicht werden. Wir reden vom Scope – dem »Gültigkeitsbereich«.

Sowohl const als auch let legen Variablen mit einem eingeschränkten Gültigkeitsbereich an: Sie gelten nur innerhalb des Blocks, in dem sie deklariert wurden. Genau diese Einschränkung sorgt für mehr Sicherheit.

2.2    Syntax – die »Grammatik« von JavaScript

Programmiersprachen folgen – genauso wie natürliche Sprachen – Regeln, wie ein Skript oder Programm aufzubauen ist. Diese Liste ist deutlich kürzer als für Sprachen wie Deutsch oder Spanisch.

  Operatoren

JavaScript nutzt mathematische Operatoren wie +, -, * und /, um Werte zu berechnen. Das Gleichheitszeichen ist der Zuweisungs-Operator.

  Ausdruck (Expression)

Ein Ausdruck ist eine Kombination aus Variablen, Operatoren und Werten, die einen neuen Wert berechnet.

  Semikolon

Das Semikolon am Ende einer Zeile ist in JavaScript nicht erforderlich. Nur wenn mehrere Anweisungen in einer Zeile stehen, müssen sie durch ein Semikolon voneinander getrennt werden. Viele Style-Guides empfehlen sogar, kein Semikolon hinter der schließenden geschweiften Klammer von Klassen, Objekten und Funktionen zu setzen. Immer ein Semikolon hinter Anweisungen, aber nicht hinter schließende...