JavaScript: Variablen und Konstanten

Einführung

Ein jedes JavaScript-Programm arbeitet mit Werten, die im Arbeitsspeicher aufbewahrt werden. Um die Werte gesondert speichern und ansprechen zu können, werden Namen verwendet.

Eine Variable (aus dem Lateinischen für veränderbar) kann man sich zunächst als eine Schachtel mit einem Namen vorstellen, in der Wert gespeichert ist.

Im Kapitel über Syntax haben wir die einfache Variablen-Deklaration bereits kennengelernt. In diesem Kapitel schauen wir uns Variablen im Detail an.

Ein einfaches Beispiel:

var alter = 32;

Dies erzeugt eine Variable alter und weist ihr den Wert 32 zu.

Das Schema der Variablen-Deklaration lautet:

var Bezeichner = Ausdruck;

Auf das feste Schlüsselwort var folgt der Name der Variable, genauer gesagt der Bezeichner. Danach kommt ein festes = für die Wertzuweisung und schließlich der Wert. Der Wert kann als ein beliebig komplexer Ausdruck notiert sein.

Variablen deklarieren ohne Wert

Es ist möglich, eine Variable zu deklarieren, ohne ihr einen Wert zuzuweisen. Das sieht beispielsweise so aus:

var alter;

Dies erzeugt eine Variable, auf die später verwiesen werden kann. Sie können ihr später mit dem Zuweisungsoperator einen Wert geben, etwa so:

alter = 32;

Tatsächlich gibt es keine Variablen ohne Wert. Wenn Sie eine Variable bloß deklarieren, dann bekommt sie automatisch den Wert undefined. Sie könnten also gleichermaßen schreiben:

var alter = undefined;

In der Praxis hat es sich bewährt, Variablen bei der Deklaration wenn möglich auch einen ausdrücklichen Wert zuzuweisen.

Mehrere Variablen deklarieren

Wenn Sie mehrere Variablen auf einmal deklarieren möchten, so gibt es zwei Schreibweisen. Entweder Sie nutzen mehrere Variablen-Deklarationen:

var a = 20;
var b = 40;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

Oder Sie nutzen eine einzige Variablen-Deklaration und trennen die deklarierten Variablen mit einem Komma:

var a = 20,
  b = 40,
  c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));

Um die Lesbarkeit zu verbessern, wird pro Zeile eine Variable notiert und die Folgezeilen werden eingerückt.

Die zweite, kurze Schreibweise bringt einige Tücken mit sich. Wenn Sie das Komma vergessen oder einzelne Zeilen verschieben, so wird aus der Variablen-Deklaration eine Wertzuweisung. Diese kann unabsichtlich eine globale Variable anlegen.

Die erste, lange Schreibweise mit mehreren Variablen-Deklarationen ist daher empfehlenswert.

Geltungsbereiche

Jede Variable hat einen gewissen Geltungsbereich (englisch scope = Bereich), in dem sie erzeugt wird und über danach ihren Namen ansprechbar ist.

Es gibt in JavaScript drei Geltungsbereiche, geordnet nach ihrer Größe:

1. Globaler Geltungsbereich
2. Funktions-Geltungsbereich
3. Block-Geltungsbereich

Um Konflikte zwischen Variablen zu vermeiden und Programme einfach zu halten, gilt folgende Grundregel: Der Geltungsbereich einer Variable sollte immer so klein wie möglich sein. Verwenden Sie wenn möglich den Block-Geltungsbereich, andernfalls den Funktions-Geltungsbereich. Deklarieren Sie eine Variable nur in Ausnahmefällen im globalen Geltungsbereich.

Im Folgenden schauen wir uns an, wie wir Variablen in den jeweiligen Geltungsbereichen erzeugen.

Globale Variablen (var)

Eine Variablen-Deklaration mit var, die außerhalb einer Funktion steht, erzeugt eine globale Variable. Global bedeutet, dass sie in allen anderen Geltungsbereichen verfügbar ist.

var globaleVariable = 'überall verfügbar';

Wenn Sie dies direkt in einem Script notieren, so wird eine globale Variable angelegt.

Globale Variablen werden nicht in einem unsichtbaren Geltungsbereich gespeichert, sondern am obersten, globalen Objekt. Das ist window. Wenn Sie eine globale Variable erzeugen, legen Sie damit eine gleichnamige Eigenschaft am Objekt window an.

var globaleVariable = 'überall verfügbar';
// Ausgabe: »überall verfügbar«
window.alert(window.globaleVariable);

Die Variable im Beispiel können Sie also auch über window.globaleVariable lesen und schreiben. Die Deklaration einer globalen Variable entspricht der Wertzuweisung an die window-Eigenschaft:

var globaleVariable = 'überall verfügbar';

ist in dem Fall gleichwertig mit

window.globaleVariable = 'überall verfügbar';

Das window-Objekt enthält bereits hunderte vordefinierte Eigenschaften. Die Kernobjekte und viele weitere Programmierschnittstellen sind über window erreichbar. Das bedeutet, der globale Geltungsbereich ist ein »öffentlicher Raum«. Alle Schnittstellen und Scripte teilen sich diesen Raum.

Ein Name kann darin nur einmal vergeben werden. Hunderte Namen sind wie gesagt schon belegt. Konflikte sind daher vorprogrammiert. Es kann schnell vorkommen, dass ein Script eine bestehende window-Eigenschaft überschreibt und damit anderen Scripten in die Quere kommt.

Vermeiden Sie daher globale Variablen möglichst. Die meisten Variablen, die Sie benötigen, können einen eingeschränkten Geltungsbereich haben. Nur einige ausgewählten Werte und Objekte ihrer Programme sollten global verfügbar sein. Das ist zum Beispiel eine öffentliche Schnittstelle, die ihr Programm für andere Programme anbietet.

Globale verfügbare Werte können Sie wie gesagt überall nach dem Schema window.globaleVariable = wert anlegen.

Funktionsvariablen (var)

Eine Variablen-Deklaration mit var, die innerhalb einer Funktion steht, erzeugt eine Funktionsvariable. Diese gehört zu den lokalen Variablen.

Eine solche Variable hat einen Geltungsbereich, der auf die Funktion selbst beschränkt ist. Die Variable ist nicht von außen sichtbar.

Schauen wir uns eine Beispielfunktion mit Funktionsvariablen an:

function summe(array) {
  var ergebnis = 0;
  for (var i = 0; i < array.length; i++) {
    ergebnis += array[i];
  }
  return ergebnis;
}
window.alert(summe([ 5, 10, 15 ])); // Ausgabe: »30«
window.alert(ergebnis); // Programmabbruch: ergebnis ist nicht definiert

Die Funktion summe erwartet einen Array mit Zahlen und gibt die Summe dieser Zahlen zurück. Innerhalb der Funktion gibt es drei Variablen. Deren Geltungsbereich ist auf die Funktion beschränkt.

• array – der Funktionsparameter
• ergebnis – eine mit var deklarierte Variable
• i – eine Variable, die mit var im Kopf der for-Schleife deklariert ist

Funktionsparameter verhalten sich also wie Funktionsvariablen: Sie sind nur in der Funktion verfügbar.

Im obigen Beispiel wird versucht, auf die Variable ergebnis außerhalb der Funktion zuzugreifen. Dies ist nicht möglich und führt zu einem Programmabbruch. Denn eine Variable mit dem Namen ergebnis kann an dieser Stelle nicht gefunden werden. Es wird nicht in den Geltungsbereich der Funktion hineingeschaut.

Innerhalb einer Funktion können Sie also sicher Variablen anlegen, ohne dass sie anderem Code außerhalb der Funktion in die Quere kommen. Sie können in verschiedenen Funktionen denselben Namen verwenden, ohne dass die beiden zusammenstoßen.

Wie alle Variablen haben Funktionsvariablen den Vorteil, dass sie in verschachtelten Geltungsbereichen innerhalb der Funktion ebenfalls verfügbar sind. Das ist beispielsweise zu erkennen, wenn Sie eine Funktion in eine andere schachteln:

function installiereKlickZähler() {
  var klickZähler = 0;

  function klickHandler() {
    klickZähler++;
    window.alert('Button wurde ' + klickZähler + ' Mal geklickt!');
  }

  document.getElementById('button')
    .addEventListener('click', klickHandler);
}
installiereKlickZähler();

Das Beispiel geht davon aus, dass es einen Button im Dokument mit der ID button gibt:

<button id="button">Klick mich!<button>

Jedes Mal, wenn der Button geklickt wird, wird ein Zähler erhöht und der aktuelle Zählerwert wird ausgegeben. Dazu registriert die Funktion installiereKlickZähler einen Event-Handler (siehe Grundlagen der Ereignis-Verarbeitung). Dieser Handler ist die Funktion klickHandler.

Wir haben hier also eine äußere Funktion, installiereKlickZähler, und eine innere Funktion, klickHandler.

Die Variable klickZähler ist in der äußeren Funktion definiert. Sie ist dort verfügbar, aber auch in der verschachtelten inneren Funktion. Nur so ist es möglich, dass die innere Funktion den Zählerwert bei jedem Klick erhöhen und ausgeben kann.

Block-Variablen (let)

Bisher haben wir Variablen-Deklarationen mit var kennengelernt. Es gibt eine weitere Art, Variablen zu deklarieren, und die fängt mit let an:

let alter = 32;

Der Unterschied zu var ist der Geltungsbereich. let erzeugt eine Variable im aktuellen Block. Solche Variablen gehören ebenfalls zu den lokalen Variablen.

Was ist nun ein Block? Code, der innerhalb geschweifter Klammern {…} steht, bildet einen Block. Verschiedene JavaScript-Strukturen erzeugen solche Blöcke, darunter:

• Funktionen: function beispiel() {…}
• Bedingte Anweisungen: if (bedingung) {…} else {…}
• Schleifen: for (…) {…}, while (…) {…}
• Nackte Blöcke mit Anweisungen: {…}

Eine mit let deklarierte Variable gilt nur innerhalb eines solchen {…}-Blocks, in dem sie definiert ist. Außerhalb des Blocks ist sie nicht verfügbar. Schauen wir uns ein Beispiel an:

function zähleHoch(anfang, ende) {
  for (let i = anfang; i <= ende; i++) {
    let frage = 'Aktuell: ' + i + ' Weitermachen?';
    let weitermachen = window.confirm(frage);
    if (!weitermachen) {
      let abbruchNachricht = 'Abgebrochen bei ' + i;
      window.alert(abbruchNachricht);
      break;
    }
  }
}
zähleHoch(0, 10);

Die Funktion zähleHoch zählt von einer Zahl hoch bis zu einer anderen Zahl. Anfang- und Endzahl werden per Parameter übergeben, anfang und ende. Das Beispiel ruft die Funktion mit Start 0 und Ende 10 auf.

In der Funktion befindet sich eine for-Schleife, die für das eigentliche Zählen zuständig ist. Mit jedem Schleifendurchlauf wird mittels window.confirm() ein Dialogfenster geöffnet. Darin wird der aktuelle Zählerwert ausgegeben und gefragt, ob weiter gezählt werden soll. Im Bestätigungsfenster lässt sich »OK« oder »Abbrechen« wählen. window.confirm() gibt dementsprechend true oder false zurück.

Wenn »Abbrechen« gewählt wird, soll die Schleife ebenfalls abbrechen und die Funktion beendet werden. Vorher wird allerdings noch eine abschließende Meldung mit window.alert() gemacht.

Im Beispiel gibt es sechs Namen mit folgenden Geltungsbereichen:

Variable	Geltungsbereich
anfang (Funktionsparameter)	Funktion: function zähleHoch(…) {…}
ende (Funktionsparameter)	Funktion: function zähleHoch(…) {…}
i	Block: Schleife for (…) {…}
frage	Block: Schleife for (…) {…}
weitermachen	Block: Schleife for (…) {…}
abbruchNachricht	Block: Bedingte Anweisung if (…) {…}

Abgesehen von den zwei Funktionsparametern anfang und ende, die einen Funktions-Geltungsbereich haben, haben wir vier mit let erzeugte Variablen mit einem Block-Geltungsbereich.

Das heißt: i, frage und weitermachen sind nur innerhalb des for-Blocks verfügbar und in allen Blöcken darin. abbruchNachricht ist nur innerhalb des if-Blocks verfügbar und in allen Blöcken darin (wenn es welche gäbe).

Wenn wir also versuchen, außerhalb des Blocks z.B. auf abbruchNachricht zuzugreifen, so gäbe es einen Fehler und das Programm würde abbrechen:

if (!weitermachen) {
  let abbruchNachricht = 'Abgebrochen bei ' + i;
  /* … */
}
window.alert(abbruchNachricht); // Fehler!

Um den Geltungsbereich einer mit let erzeugten Variable zu finden, müssen Sie einfach die nächstgelegene Struktur mit geschweiften Klammern {…} suchen. Die Code-Einrückung hilft dabei ebenfalls, denn jeder Block sollte eine neue Einrückungsebene erzeugen.

Wie gesagt sollten Sie der Grundregel folgen, den Geltungsbereich einer Variablen so klein wie möglich zu halten. Dazu eignen sich Variablen mit let gut, denn sie haben den kleinstmöglichen Geltungsbereich. Selbst wenn Sie sie außerhalb eines Blocks deklarieren, so haben sie die erfreuliche Eigenheit, niemals eine Eigenschaft beim globalen Objekt window zu erzeugen.

Der Benutzung von let steht nur eine Sache entgegen: Die Technik wurde erst mit dem JavaScript-Standard ECMAScript 6 eingeführt, der 2015 verabschiedet wurde. Alle neueren Browser kennen let, aber manche ältere Browser verstehen let noch nicht. Der Internet Explorer kennt let zum Beispiel erst ab Version 11.

Block-Konstanten (const)

Zu guter Letzt widmen wir uns der Deklaration von Konstanten mit const. Bisher haben wir nur über Variablen geredet. Was ist eine Konstante?

Eine Konstante ist ebenfalls ein JavaScript-Wert, der im Arbeitsspeicher aufbewahrt wird. Eine Konstante besteht ebenfalls aus einem Namen (einem Bezeichner) und einem Wert. Eine Konstante hat ebenfalls einen Block-Geltungsbereich, so wie Variablen mit let.

Der Unterschied ist: Eine Variable ist veränderbar (variabel eben), eine Konstante ist unveränderbar (konstant eben).

Das Erzeugen einer Konstante ist mit dem Schlüsselwort const möglich und der Aufbau gleicht dem von var und let:

const Bezeichner = Ausdruck;

Schauen wir uns einen Vergleich an:

var veränderbarVar = 'alt';
veränderbarVar = 'neu';

let veränderbarLet = 'alt';
veränderbarLet = 'neu';

const unveränderbarConst = 'alt';
unveränderbarConst = 'neu'; // Fehler!

let liste = [ 23, 75, 11, 64, 99, 5 ];
liste = liste.filter(function(zahl) {
  return zahl > 50;
});
liste = liste.concat([ 100, 110, 153 ]);
window.alert(liste);

const ausgangsListe = [ 23, 75, 11, 64, 99, 5 ];
const gefilterteListe = ausgangsListe.filter(function(zahl) {
  return zahl > 50;
});
const erweiterteGefilterteListe = gefilterteListe.concat([ 100, 110, 153 ]);
window.alert(erweiterteGefilterteListe);

const nutzerin = { name: 'Monika' };
nutzerin.name = 'Monica'; // Erlaubt.
nutzerin = { name: 'Marlene' }; // Fehler!

Auflösung von Bezeichnern

Wir haben nun die verschiedenen Möglichkeiten kennengelernt, Verbindungen zwischen Namen und Werten in verschiedenen Geltungsbereichen anzulegen. Bei Variablen ist diese Verbindung veränderbar, bei Konstanten nicht.

Schauen wir uns nun an, wie ein Name zu einem Wert aufgelöst wird. Wie gesagt wird der Name auch Bezeichner (englisch identifier) genannt. Das Auflösen von Bezeichnern zu Werten heißt auf Englisch identifier resolution.

Betrachten wir noch einmal das Beispiel von oben:

function zähleHoch(anfang, ende) {
  for (let i = anfang; i <= ende; i++) {
    let frage = 'Aktuell: ' + i + ' Weitermachen?';
    let weitermachen = window.confirm(frage);
    if (!weitermachen) {
      let abbruchNachricht = 'Abgebrochen bei ' + i;
      window.alert(abbruchNachricht);
      break;
    }
  }
}
zähleHoch(0, 10);

Hier kommen verschiedene Bezeichner vor, die der JavaScript-Interpreter zu Werten auflösen muss. Sie sind grün hervorgehoben.

Im Beispiel haben wir mehrere verschachtelte Geltungsbereiche, in denen unterschiedliche Namen gespeichert sind. Hier eine Visualisierung:

Ein Bezeichner wird aufgelöst, indem die sogenannte Kette von Geltungsbereichen (englisch scope chain) abgelaufen wird. Die Kette wird anhand der Position des Bezeichners bestimmt. Sie enthält alle Geltungsbereiche ausgehend vom aktuellen nach außen hin bis zum äußersten, globalen Geltungsbereich.

Zum Beispiel steht im innersten Geltungsbereich 4 der Bezeichner window. Denn dort wird window.alert(…); aufgerufen. Die Kette enthält die Geltungsbereiche 4→3→2→1 in dieser Reihenfolge, vom aktuellen bis hin zum äußersten.

Es wird zunächst in Geltungsbereich 4 gesucht, dem aktuellen. Dort ist aber kein Bezeichner window definiert! Also wird weiter gesucht: im Bereich 3, dann im Bereich 2 und schließlich im Bereich 1. Erst dort, im globalen Geltungsbereich, findet sich der Bezeichner window.

Spielen wir das Ganze noch einmal für den Bezeichner i durch, der ebenfalls im innersten Geltungsbereich 4 benutzt wird. Die Kette enthält wieder die Geltungsbereiche 4→3→2→1, vom aktuellen bis zum äußersten. Beim Ablaufen der Kette auf der Suche nach i werden wir aber schon Geltungsbereich 3 fündig. Das Ablaufen der Kette wird abgebrochen, denn wir haben schon gefunden, was wir suchten.

Diese Funktionsweise ist zunächst einmal ein Interna des JavaScript-Interpreters. Sie erklärt aber auch, wie sich die Geltungsbereiche, von denen wir soviel gehört haben, praktisch auswirken. Beim Deklarieren von Variablen und Konstanten wählen Sie gewisse Geltungsbereiche, damit der Zugriff auf Namen und Werte möglich (oder absichtlich unmöglich) ist.

Regeln und Konventionen für Bezeichner

JavaScript-Bezeichner unterliegen gewissen Regeln, die Sie beim Wählen von Namen beachten müssen:

Ein Bezeichner darf nur aus Buchstaben, Dezimalziffern (0-9), dem Dollarzeichen ($) sowie dem Unterstrich (_) bestehen. Jedes dieser Zeichen darf an beliebiger Stelle vorkommen, mit Ausnahme der Ziffern, welche nicht an erster Stelle stehen dürfen.

Genauer gesagt sind Zeichen aus der Unicode-Gruppen ID_Start an erster Stelle und Zeichen aus ID_Continue an den folgenden Stellen erlaubt. Das sind eine ganze Menge: Neben dem lateinischen Alphabet gehören Buchstaben mit Diakritika wie ü, ö, ä, ß, é, â, ì, å, õ usw. dazu. Griechische, kyrillische, hebräische, japanische, chinesische, arabische Zeichen usw. sind ebenfalls erlaubt.

Alle anderen Zeichen, etwa Leer- oder Sonderzeichen, sind in Bezeichnern nicht erlaubt.

Beispiele für erlaubte Bezeichner:

mitarbeiter_name
mitarbeiterName
_mitarbeitername
$mitarbeitername
lohnIn$
mitarbeiter1
twenty4seven
größe

Beispiele für nicht erlaubte Bezeichner:

mitarbeiter name
mitarbeiter-name
mitarbeiter.name
lohnIn€
lohnIn£
2raumwohnung
ein♥FürTiere
arbeiter&angestellte

Im europäischen und noramerikanischen Raum beschränken sich die meisten JavaScript-Programmierer auf lateinische Buchstaben ohne diakritische Zeichen. Der Bezeichner größe ist zwar möglich. Üblicher ist allerdings, groesse zu notieren, um Schwierigkeiten bei der Zeichenkodierung aus dem Weg zu gehen. Im internationalen, kommerziellen Umfeld werden meistens englischsprachige Bezeichner verwendet.

Fragt sich nur noch, wie mit Groß- und Kleinschreibung in Bezeichnern umgegangen wird. Das ist eine Frage des Stils und letztlich Ihnen überlassen. Die vordefinierten JavaScript-Schnittstellen verwenden das sogenannte camelCase: Der erste Buchstabe ist klein. Wird ein Wort angehängt, so folgt ein Großbuchstabe und es geht wieder klein weiter. Wie der Höcker beim Kamel. So kommt beispielsweise mitarbeiterName, toLocaleString und getElementById heraus. Diese Schreibweise ist weit verbreitet und Ihnen sei auch geraten, diese zu verwenden.