Variabeln

warn> Die Erklärung an dieser Stelle ist angepasst an die Sek. I, im Eigenstudium können durchaus weiterführende Erklärungen gefunden werden.

Was ist eine Variable?

Eine Variable ist eine Art Tasche, wo ich mir Werte merken kann. Dies ist sehr praktisch, um beispielsweise Werte vom Benutzer entgegenzunehmen oder abhängig vom aktuellen Zustand eine Aktion durchführen zu können.

Hier ein Beispiel:

var name = "";
name = prompt("Wie heißt du?");
alert("Hallo "+ name);

In der ersten Zeile Erkläre ich dem Rechner, dass ich gern eine Variable (Tasche) mit dem Namen name hätte. Diese Variable (Tasche) ist zu Beginn leer.

In der zweiten Zeile gebe ich eine Frage an den Benutzer aus. Das Ergebnis wird in die Variable (Tasche) name geschrieben. Das einfach Istgleichzeichen (=) wird hier als Zuweisung verwendet.

info> Daher haben wir beim Vergleich immer zweimal das Istgleichzeichen (==) nehmen müssen.

In der dritten Zeile wird die Nachricht Hallo und der Inhalte der Variable (Tasche) ausgegeben.

Variablen (Taschen) können ganz verschiedene Inhalte aufnehmen. Für den Unterricht können wir uns Zeichenketten (Beispiel „Papa Bär“), Zahlen (Beispiel 5) oder Wahrheitszustände (Beispiel true) vorstellen.

In JavaScript werden Variabeln fast immer mit var definiert. Das ist sehr praktisch, sorgt aber manchmal zu Verwirrungen. So ist nicht automatisch klar, was gemeint ist:

var zehner = 1;
var einer = 5;
alert(zehner + einer);

Was kommt in obigen Beispiel raus? Ist es 15 oder 6? In diesem Fall ist es 6. Schauen wir uns den nächsten Fall an:

var zehner = prompt("Gib Zehnerstelle ein.");
var einer = prompt("Gib Einerstelle ein.");
alert(zehner + einer);

Hier wird bei gleicher Eingabe wie oben 15 herauskommen. Warum ist das so? Ganz einfach: Die Eingaben wurden als Text interpretiert und der Text wurde dann einfach aneinandergefügt.

Möchtest du sichergehen, dass du eine Zahl und keinen Text hast, kannst du die Varaible mit der Funktion a = parseInt(a) "casten". Andersrum geht das auch: var n = m.toString(); .

Deklaration von Variablen

Beginnen wir mit dem folgenden Beispiel:

var x = 5;

function main() {
	console.log(x); // 5
}

main();

Die Variable x wird wie erwartet angezeigt. Das liegt daran, dass x global im Programm bekannt ist (deklariert wurde) und somit überall verwendet werden kann. Das geht sogar auch, wenn du eine neue Variable verwendest, die du vorher noch nie verwendet hast.

warn> Vertippst du dich bei einer Variable oder verwendest einfach eine, ohne diese vorab zu deklarieren, so wird diese global. Das kann zu ganz bösen Fehlern führen. Um dich davor zu schützen, kannst du deinen JavaScript mi 'use strict'; beginnen lassen. Ab jetzt müssen alle Variablen zuerst deklariert werden.

Deklarierst du eine globale Variable in einer Funktion erneut, so greifst du auf diese anstelle die globale Variable zu:

var x = 5;

function main() {
	var x = 3;
	console.log(x); // 3
}

console.log(x); // 5

main();

info> Globale Vairablen machen deinen Quelltext schwer les- und wartbar, da diese zum einen meist ganz am Anfang deklariert werden und zum anderen auch an jeder belieibgen Stelle im Programm verändert werden können.

Anders ist es, wenn du eine Variable in einer Funktion deklarierst:

function eins() {
	var x = 3;
	console.log(x); // 3
}

function zwei() {
	console.log(x); // Fehler, da Variable nicht bekannt ist.
}

eins();
zwei();

Bisher haben wir eine Variable immer mit var bekannt gemacht (deklariert), was sich intuitiv richtig anfühlt. Tatsächlich gibt es aber drei verschiedene Methoden eine Variable bekannt zu machen:

• var
• let
• const

var und let deklarieren beide eine Variable, so wie wir es kennen. Deklarierst du eine Variable aber mit const so wird sie eine Konstante und lässt sich nie wieder ändern:

const pi = 3.14159265359;
pi = 8 //Fehler, einer Konstanten darf kein neuer Wert zugewiesen werden!

info> var und let unterscheiden sich in einigen Punkten. Wir konzentrieren uns hier nur auf das wichtigste. Bei stackoverflow haben einige Nutzer das Thema fundiert und dennoch gut verständlich erörtert.

Sofern du eine Variable gleich zu Beginn deklarierst unterscheiden sich var und let nicht in der Handhabung. Spannend wird es aber, wenn du eine Variable in einem Block deklarierst:

if (true) {
	let x = 5;
	console.log(x); // 5
}
console.log(x); // Führt zu einem Fehler!

Hier haben wir die Variable x in dem if-Block definiert, der immer ausgeführt wird. Außerhalb dessen ist die Variable aber unbekannt. Definierst du die Variable hingegen mit var so kannst du auch außerhalb auf sie zugreifen.

info> Blöcke sind vereinfacht gesagt Bereiche in if, do, while oder for Blöcken. Diese sind oft ähnlich wie Funktionen mit {} umschlossen.

Bei der Deklaration mit let führt eine zweite Deklaration der Variable im Gegensatz zur var zu einem Fehler.:

let x = 5;
let x = 3; // Fehler, da keine redeklaration erlaubt ist
console.log(x);

Fügen wir alles bisher Gelernte zusammen, verstehen wir auch, dass das untenstehende Verhalten:

var x = 31;
if (true) {
	var x = 71;  // gleiche Variable
	console.log(x);  // 71
}
console.log(x);  // 71

let x = 31;
if (true) {
	let x = 71;  // andere Variable
	console.log(x);  // 71
}
console.log(x);  // 31

Gut, aber warum sollte ich mir den Stress mit let antun, wenn es doch mit var einfacher geht? Nun zum einen kannst du damit gleichnamige Variablen wie etwa das beliebt let n = 0; besser von einander abtrennen und zum anderen wird ein Programm manchmal auch ein klein wenig schneller, was du aber erst bei sehr, sehr großen bzw. komplexen Programmen bemerken wirst.

Schreibweise

Sicher ist dir aufgefallen, dass wir den Variablen immer recht komische Namen gegeben haben. Grundsätzlich bist du sehr frei im ausdenken von Namen. Hier kannst du die Gültigkeit prüfen.

Es gibt verschiedene Empfehlungen. Die meisten können sich auf folgende einigen:

• verwende englische Variablen, das dies fast alle Programmierer können
• verwende möglichst kurze, aber trotzdem sprechende Namen. hohe ist besser als hoheMeinesLieblingsStuhlsBeiOma und auch als etwa zusammenhanglos f.
• verwende camelCase. Die Variable wird prinzipiell klein geschrieben hoehe. Ist es aber ein zusammengesetztes Wort, dann wird das zweite Wort groß geschrieben hoeheSchrank

info> Sicher ist dir aufgefallen, dass wir hier die Variabeln deutsch und nicht englisch schreiben. Damit soll dir der Start erleichtert werden. Du bist aber herzlich eingeladen, gleich englische Namen zu verwenden.