Variablen – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Variablen

Beim Pro­gram­mie­ren sind Wer­te oft nicht be­kannt, weil sie bspw. durch Nut­zer­ein­ga­ben er­fol­gen. Des­we­gen wer­den da­für Platz­hal­ter ver­wen­det, so­ge­nann­te Variablen.

Aus dem Matheunterricht der Schule ist es den meisten vermutlich noch ein Begriff: Variablen wurden eingesetzt, wenn Werte unbekannt waren. Rechnungen wurden dahingehend aufgelöst, dass der Wert der Variable gefunden wurde.
Aus dem folgenden Beispiel ergibt sich, dass die Variable x gleich 5 ist.

x + 5 = 10 | -5

x = 5

Auch in Programmiersprachen gibt es Variablen. Statt Rechnungen aufzulösen, um Werte herauszufinden, werden Variablen hier zuerst definiert, um anschließend mit ihnen zu arbeiten. Das bedeutet, dass die Verwendung in der Programmierung eine andere ist als im Matheunterricht: Variablen dienen als Platzhalter für unterschiedliche Werte. Das ermöglicht, denselben Code mehrfach wiederzuverwenden – bei verschiedenen Werten, die die Variablen haben können, kann der Code auch zu verschiedenen Ergebnissen führen.

Deklaration und Initialisierung

Um eine Variable einzusetzen, muss sie zuerst deklariert werden. Damit wird mitgeteilt, dass eine neue Variable geschaffen werden soll und wie sie heißen soll. In JavaScript wird zur Deklaration das Schlüsselwort var verwendet, gefolgt vom Namen der Variablen. Hinter jeder Anweisung in JavaScript sollte ein Semikolon stehen, sodass die komplette Deklaration folgendermaßen aussieht:

var meineVariable;

Der Name kann beliebig gewählt werden. Wichtig ist, dass er kein Leerzeichen enthält. Sonderzeichen, wie z.B. Umlaute, können möglich sein, sind allerdings bis auf wenige Ausnahmen unüblich. Ziffern können verwendet werden, jedoch nicht als erstes Zeichen des Variablennamens.

Es können auch mehrere Variablen mit Komma getrennt deklariert werden:

var ersteVariable, zweiteVariable, dritteVariable;

In anderen Programmiersprachen kann das anders aussehen. In manchen wird gar nicht so ein Schlüsselwort wie var benötigt, in anderen dagegen wird je nach Datentyp der Variable ein anderes Schlüsselwort verwendet. In JavaScript gibt es neben var auch const und let – da diese jedoch zum Zeitpunkt des Verfassens dieses Textes noch immer nicht universell unterstützt werden, weil sie verhältnismäßig neu sind, wird auf die beiden hier nicht eingegangen.

Um mit einer Variablen zu arbeiten, wird ihr ein Wert zugewiesen. Im Artikel über Vergleichsoperatoren wurde bereits erwähnt, dass das einzelne Gleichheitszeichen eine eigene Bedeutung hat und deswegen nicht zum Vergleichen verwendet wird. Hier ist nun dessen Bedeutung: Das einzelne Gleichzeichen ist der Zuweisungsoperator. Mit diesem wird ein Wert einer Variablen zugewiesen:

var meineVariable;
meineVariable = "Ein beliebiger Wert";

In der ersten Zeile des Beispiels wird die Variable deklariert, in der zweiten initialisiert. Das ganze geht auch in einem. Dann wird gemeinhin gesagt, die Variable wird definiert:

var meineVariable = "Ein beliebiger Wert";

Neben Strings können auch Werte anderer Datentypen einer Variablen zugewiesen werden.

var eineZahl = 42, einBoolscherWert = true, einString = "Hallo Welt";

Verwenden von Variablen

Ihr wisst nun, wie Variablen deklariert und definiert werden, aber wie können sie im Code eingesetzt werden?
Zum Einsetzen einer Variablen muss diese ausgelesen werden. Probiert das folgende Beispiel in der Konsole eures Browsers selbst aus:

var x = 5;
x

Schreibt den Namen der Variablen, in diesem Fall also x, und drückt Enter. In der Konsole sollte nun 5 stehen.

Variablen können genauso verwendet werden, wie feste Werte. Mit dem x lässt sich nun zum Beispiel rechnen:

x + 5
// => 10

Wenn ihr x + 5 in eure Konsole eingebt und Enter drückt, sollte 10 herauskommen. Das ist das Rechenbeispiel von oben in JavaScript nachgestellt. Daran ist gut zu sehen, was bereits beschrieben wurde: Der Zweck von Variablen ist in der Programmierung ein anderer als bei Matheaufgaben. Statt erst die Rechnung zu haben und daraus den Variablenwert abzuleiten, wird hier erst der Variablenwert festgelegt, um anschließend damit zu rechnen.

Der Wert von x kann auch geändert werden, indem ein neuer Wert zugewiesen wird. Führt dies in eurer Konsole aus:

x = 6;

Drückt nun zweimal die Pfeil-rauf Taste. Damit geht ihr die zuletzt ausgeführten Eingaben durch. Wenn ihr die Taste zweimal gedrückt habt, müsstet ihr wieder bei der Rechnung x + 5 sein. Führt diese Rechnung erneut per Enter-Taste aus.

x + 5
// => 11

Obwohl die Anweisung dieselbe ist, kommt nun ein anderes Ergebnis heraus. Hier wird die Wiederverwendbarkeit von Code durch Variablen erkennbar.

Reihenfolge der Ausführung

Wenn ihr den folgenden Code in der Konsole ausführt, könnt ihr etwas interessantes feststellen.

x = x + 2

Hier wird x gleichzeitig definiert als auch ausgelesen. Wie kann es sein, dass der Code funktioniert? x kann doch nicht ausgelesen werden, während es definiert wird.
Der Code funktioniert deswegen, weil es keine Gleichzeitigkeit in der (sequentiellen) Programmierung gibt. Operationen werden nacheinander abgearbeitet. In dieser Anweisung gibt es mehrere Operationen, die in der folgenden Reihenfolge abgearbeitet werden:

  1. Lese den Wert von x aus
  2. Addiere diesen mit 2
  3. Weise das Ergebnis der Variablen x zu

Bei einer Zuweisung wird immer zuerst der rechte Teil ausgewertet und das Ergebnis dann der Variablen, die auf der linken Seite steht, zugeordnet.
Dadurch, dass x aus den vorherigen Code-Beispielen bereits mit einem Wert belegt war, war die Ausführung von x + 2 erfolgreich und das Ergebnis, 8, konnte der Variablen zugewiesen werden.

Drückt die Pfeil-rauf Taste, um die Anweisung erneut auszuführen. Wiederholt das mehrmals.

x = x + 2
// => 8
x = x + 2
// => 10
x = x + 2
// => 12
x = x + 2
// => 14
x = x + 2
// => 16
// ...

Durch Wiederholen derselben Anweisung können hiermit alle geraden Zahlen durchgezählt werden.

Weitere Zuweisungsoperatoren

Für Zuweisungen, in denen der Wert einer Variablen von ihrem bereits bestehenden abhängt, gibt es eigene Operatoren. Für x = x + 2 ist es einfacher, den +=-Operator zu verwenden:

x += 2

Es führt zum gleichen Ergebnis, vereinfacht aber die Schreibweise. Neben += gibt es weitere Zuweisungsoperatoren:

Bezeichnung Beispiel Entspricht
Zuweisung x = y x = y
Additionszuweisung x += y x = x + y
Subtraktionszuweisung x -= y x = x - y
Multiplikationszuweisung x *= y x = x * y
Divisionszuweisung x /= y x = x / y

Eine vollständige Liste der Zuweisungsoperatoren gibt es bei MDN.

Inkrement- und Dekrement-Operator

Für einen Spezialfall geht es noch einfacher als mit den vereinfachten Zuweisungsoperatoren: Für die Addition und Subtraktion von 1 gibt es die sogenannten Inkrement- (Erhöhung) und Dekrement- (Verminderung) Operatoren. Der Inkrement-Operator sind zwei Plus-Zeichen, der Dekrement-Operator zwei Minus-Zeichen. Sie können der Variable vorangestellt werden oder auf sie folgen.

Operator Entspricht Zuweisungsoperator Ausgeschrieben
++x x++ x += 1 x = x + 1
--x x-- x -= 1 x = x - 1

Es macht allerdings einen Unterschied, ob das ++ / -- vor oder hinter der Variable steht. Geht das folgende Beispiel in eurer Konsole durch und versucht herauszufinden, worin der Unterschied besteht.

var x = 5;
++x
// => 6
--x
// => 5
x++
// => 5
x--
// => 6

Die ersten beiden Zeilen, in denen das ++ bzw. -- vor der Variablen stehen, sind nachvollziehbar: Mit ++x wird 1 zu x hinzuaddiert, sodass 6 herauskommt; mit --x wird wieder 1 abgezogen, sodass 5 herauskommt.
Die nächsten Zeilen, in denen das ++ / -- hinter der Variablen stehen, wirken seltsam: Es wird x++ ausgeführt, doch das Ergebnis ist derselbe Wert wie vorher, nämlich 5. Dann wird x-- ausgeführt, was den Wert um 1 mindern sollte, stattdessen ist das Ergebnis mit 6 aber sogar höher.
Was geht hier vor sich?

Der Unterschied zwischen dem vor- und dem nachgestellten Operator liegt im Zeitpunkt des Zurückgebens des Variablenwerts. Mit ++x wird zuerst x um 1 erhöht und das Ergebnis zurückgegeben. Mit x++ dagegen wird zuerst der Wert von x zurückgegeben und anschließend um 1 erhöht.
Das lässt sich gut beobachten, indem zwischen den Schritten x ausgelesen wird, ohne es zu verändern:

x
// => 5
x++
// => 5
x
// => 6
x--
// => 6
x
// => 5

Undefinierte Variablen

Was passiert, wenn eine Variable deklariert wird und sie dann ausgelesen wird, ohne sie zu definieren, also ohne ihr einen Wert zuzuweisen?
Das lässt sich am besten durch Ausprobieren beantworten.

Deklariert eine Variable und lest sie aus, ohne einen Wert zuzuweisen.

In der Konsole steht undefined, was zu Deutsch undefiniert heißt. Der Wert der Variablen ist also undefiniert – und das ist nicht nur beschreibend gemeint, sondern wortwörtlich, denn undefined ist ein eigener Datentyp. Gleichzeitig ist undefined der einzige Wert, den es von diesem Datentyp gibt.

Zusammenfassend

  • var x; Mit der Deklaration werden Variablen erstellt
  • x = 5; Mit der Definition wird ihnen ein Wert zugewiesen
  • x Eine deklarierte Variable wird immer ausgelesen, solange sie nicht auf der linken Seite einer Zuweisung steht
  • x = x + x Der Wert von Variablen kann verändert werden, wobei der neue Wert auf dem alten aufbauen kann