Variablen in JavaScript

In JavaScript können Variablen erstellt und genutzt werden (wie in jeder anderen Programmiersprache auch). In den folgenden Beispielen mag es nicht direkt einleuchtend sein, warum nun z.B. der Name in eine Variable gepackt wird und dann ausgegeben, wenn man den Namen ja auch sofort ausgeben könnte. Diese Beispiele dienen zum Zeigen der Nutzung. Später können in diesen Variablen beliebige Inhalte sein, z.B. wechselnde Uhrzeiten, wo das erstellte JavaScript-Programm dann je nach Uhrzeit andere Aktionen macht.

Um eine Variable zu setzen, wird ein Variablenname vergeben. Dieser kann (fast) beliebig sein. Es gibt ein paar Ausnahmen – das ist aber für den Anfang nicht so wichtig.

Im ersten Schritt erstellen wir eine Variable und im zweiten Schritt füllen wir diese Variable mit Inhalt.

Um sofort ordentlich Verwirrung zu stiften, führe ich dafür 2 Befehle ein:

• Einen alten (der natürlich in vielen Beispielen und Büchern auftaucht)
• Und die neue, bessere Version des Befehls

Beide Befehle machen erstmal dasselbe – die feinen Unterschiede zeige ich später.

Variable erstellen/definieren

Um nun eine Variable zu definieren, wird der JavaScript-Befehl var (was die alte Variante ist) bzw. der neuere Befehl let eingesetzt.

<script>
var inhalt;
</script>

Oder in neuer Form:

<script>
let inhalt;
</script>

Somit haben wir JavaScript mitgeteilt, dass es eine Variable mit dem Namen inhalt gibt.

Im Folgenden werde ich nur mit der neuen Variante let fortfahren – später folgt der Vergleich zwischen der alten und neuen Variante.

Variable einen Inhalt zuweisen

Jetzt haben wir eine Variable definiert – allerdings hat die Variable noch keinen Inhalt bzw. Wert. Nach dem Definieren der Variable können wir dieser Variablen einen Wert zuweisen:

<script>
let inhalt;
inhalt = 'Hallo Welt';
</script>

Nach dem Gleichheitszeichen weisen wir der Variablen mit dem Namen inhalt den Text „Hallo Welt“ zu. Dazu wird der Text in Anführungszeichen gepackt. Bei einem statischen Text ist es egal, ob es sich um einfache oder doppelte Anführungszeichen handelt! Es könnten im Beispiel also genauso die doppelten Anführungszeichen verwendet werden:

inhalt = "Hallo Welt";

Und nun können wir mit dieser Variablen arbeiten – sprich wir können den Inhalt der Variable auf dem Bildschirm ausgeben lassen.

<script>
let inhalt;
inhalt = 'Hallo Welt';
document.write(inhalt);
</script>

Es erfolgt als Ausgabe auf dem Bildschirm nun „Hallo Welt“.

Natürlich können wir mit dem Inhalt der Variable auch arbeiten – sprich z.B. Berechnungen durchführen und anderes. Diese Möglichkeiten werden in den folgenden Kapiteln gezeigt. Jetzt erst einmal die korrekte Anwendung von Variablen.

Variable definieren und Wert zuweisen in einer Zeile

Es wird begonnen mit let und dann dem Variablennamen und der Zuweisung des Inhalts (dazwischen ein Gleichzeichen).

In der Ausgabe wird nun anstatt des Textes der Variablenname angegeben (ohne Anführungszeichen!)

<script>
let inhalt = 'Hallo Welt';
document.write(inhalt);
</script>

Es ist auch möglich das let wegzulassen – allerdings erzeugen wir dann eine globale Variable, die im Einsatz von Funktionen so ihre Tücken haben kann. Zu diesem Thema bei den Funktionen später mehr. Also hier vorsichtig sein! Im Ergebnis ist folgendes JavaScript-Programm dasselbe.

<script>
inhalt = 'Hallo Welt';
document.write( inhalt );
</script>

Es ist kein guter Stil, globale Variablen zu setzen, wenn diese nicht wirklich global benötigt werden.

Groß- und Kleinschreibung: Variablennamen in JavaScript

Eine andere Gefahr bei Variablen ist die Schreibweise der Variablennamen. Diese sind „Case-sensitivity“ – sprich, die Variable mit dem Namen eigenevariable ist eine andere als eigeneVariable – auf Groß- und Kleinschreibung achten!

Im Beispiel verdeutlicht das die Ausgabe:

let eigenevariable = "Hallo";
let eigeneVariable = "Welt";
alert (eigenevariable);

Daher hier extrem vorsichtig sein – geschickt ist, wenn der Texteditor bereits benutzte Variablen vorschlägt, die man einfach übernimmt. Weniger Tippfehler – mehr Spaß in JavaScript.

Unterschiede zwischen let und var

Der JavaScript-Befehl let ist neuer und deutlich härter definiert. Dadurch sollen stabile und fehlerfreie Programme besser erstellbar sein. So kann man beispielsweise nur einmal über let eine Variable definieren. Würde man zu einem späteren Zeitpunkt im Code nochmals die Variable über let definieren, würde es zu einer Fehlermeldung (siehe letztes Kapitel mit JavaScript-Fehler anzeigen) kommen.

Das folgende Programm geht schief!

let inhalt = "Hallo";
let inhalt = "Welt";
alert (inhalt);

Dagegen funktioniert die alte Variante über var ohne Fehlermeldung, weil hier nicht so genau geprüft wird. Das scheint zwar auf den ersten Blick ein Vorteil zu sein, birgt aber die Gefahr von schlampigem Code und Fehlern im Programm.

var inhalt = "Hallo";
var inhalt = "Welt";
alert (inhalt);

Es gibt noch weitere Unterschiede zwischen let und var. Diese werden aber erst verständlich, wenn wir Funktionen kennengelernt haben und dort Variablen verwenden. Ich komme dann im entsprechenden Kapitel noch einmal auf die Unterschiede zwischen let und var zurück.