JavaScript/Variable

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Eine Variable lässt sich am besten mit einem Behälter, der genau einen Wert aufnehmen kann, vergleichen. Der Behälter ist ein logischer Speicherplatz mit einem (unveränderlichen) Namen und einem Wert, der verändert werden kann.

Inhaltsverzeichnis

[Bearbeiten] Variablen-Deklaration

Eine Variable wird durch das Schlüsselwort var vereinbart. Sie wird damit im aktuellen lokalen Scope (zum Beispiel innerhalb einer Funktion) angelegt. Ohne das Schlüsselwort var wird die Variable im globalen Scope erstellt. Genauer gesagt wird eine Eigenschaft zum window-Objekt hinzugefügt bzw. deren Wert überschrieben.

  • JavaScript 1.0
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera

Sie kann entweder ohne Wert instantiiert werden:

Beispiel
var alter;

Oder der Anfangswert kann gleich angegeben werden:

Beispiel
var alter = 18;

Anstelle der 18 kann ein beliebiger Ausdruck stehen. Das Schema lautet also:

Beispiel
var Bezeichner = Ausdruck;

Wird ihr anfänglich kein Wert zugewiesen, so ist sie vom Typ undefined. Nachdem eine Variable erstellt wurde, kann mit dem Variablennamen gearbeitet werden. Das Speichern von Werten erfolgt über den Zuweisungsoperator.

Beachten Sie:
  • Bei der Vergabe von Variablennamen gelten die Regeln für selbstvergebene Namen.
  • Beim Arbeiten mit Variablen sucht der Interpreter die Variable zuerst im lokalen und anschließend im übergeordneten bis hin zum globalen Sichtbarkeitsbereich. Handelt es sich um eine Wertabfrage und findet er die Variable nicht, so löst er eine Ausnahme aus. Handelt es sich hingegen um eine Wertzuweisung und existiert die Variable nicht, dann erstellt der Interpreter die nicht existierende Variable automatisch als globale Variable.


[Bearbeiten] Datentypen

Da JavaScript keine starke Typisierung aufweist, können in einer Variable alle Arten von Werten gespeichert werden. Der Typ einer Variable richtet sich daher implizit nach dem Typ des darin gespeicherten Wertes. Gegebenenfalls notwendige Typänderungen werden eigenständig im Hintergrund vorgenommen.

Beispiel
// Berechnung Diagonale A4-Papier
var breite    = 210;
var höhe      = 297;
var diagonale = Math.sqrt(breite * breite + höhe * höhe);
var ausgabe   = "Eine A4-Papierseite hat eine Diagonale von " + Math.round(diagonale) + " mm.";
 
alert(ausgabe);


So ist zum Beispiel die folgende Anweisung in Javascript möglich, ihr Variablentyp ist string; in vielen anderen Programmiersprachen hätte dies eine Fehlermeldung zur Folge.

Beispiel
 5 + "px"


[Bearbeiten] Globale Variablen

Globale Variablen sind im gesamten Dokument gültig und stehen jederzeit zur Verfügung. Wenn innerhalb von Funktionen Variablen ohne das Schlüsselwort var deklariert werden, dann sind diese Variablen global.

Beispiel
var diagonale;
var ausgabe;
 
berechneDiagonale(210, 297);
ausgabe = "Eine A4-Papierseite hat eine Diagonale von " + diagonale + " mm.";
 
function berechneDiagonale(breite, höhe)
{
  diagonale = Math.sqrt(breite * breite + höhe * höhe);
  diagonale = Math.round(diagonale);
}
In diesem Beispiel sind die Variablen diagonale und ausgabe global.

Im Webbrowser ist das oberste Objekt, auf das man mit JavaScript zugreifen kann, das window-Objekt. Alle Eigenschaften davon sind global sichtbar. Globale Variablen werden ebenso im window-Objekt gespeichert. Es wird sozusagen um Eigenschaften erweitert. Der Zugriff darauf erfolgt transparent. Es ist aber möglich sich explizit auf das window-Objekt zu beziehen, um globale Variablen abzufragen. Auf das oberste Objekt kann über die Angaben von window, self oder this (Als Bindung im globalen Sichtbarkeitsbereich) zugegriffen werden.

Beispiel
// Globale Variable
var ausgabe = "Hallo Welt";
 
// Globale Funktion
function getGlobal(){return this;};
 
// Abfrage vordefinierter globaler Funktionen
alert(alert);
alert(window.alert);
alert(self.alert);
alert(this.alert);
 
// Abfrage globaler Funktionen
alert(getGlobal);
alert(window.getGlobal);
alert(self.getGlobal);
alert(this.getGlobal);
 
// Abfrage globaler Variablen
alert(ausgabe);
alert(window.ausgabe);
alert(self.ausgabe);
alert(this.ausgabe);
alert(getGlobal().ausgabe);
 
// Auch möglich aber unsinnig
alert(this.window.self.getGlobal().ausgabe);
Dieses Beispiel verdeutlicht, das globale Variablen auch gleichzeitig Eigenschaften vom window-Objekt sind.


[Bearbeiten] Lokale Variablen

Lokale Variablen werden innerhalb von Funktionen deklariert. Sie sind nur innerhalb dieser Funktion gültig. Parameter die an eine Funktion übergeben werden, sind ebenfalls lokale Variablen. Sie werden allerdings nicht deklariert, sondern beziehen sich auf die übergebenen Parameter.

Beispiel
function berechneDiagonale(breite, höhe)
{
  var diagonale = Math.sqrt(breite * breite + höhe * höhe);
  return Math.round(diagonale);
}
 
var ausgabe = "Eine A4-Papierseite hat eine Diagonale von " + berechneDiagonale(210, 297) + " mm.";
Die Variablen breite, höhe und diagonale sind lokale Variablen in der Funktion berechneDiagonale. Außerhalb der Funktion existiert in diesem Beispiel nur eine globale Variable namens ausgabe.
Beispiel
function berechneWurzel(zahl)
{
  var ergebnis = Math.sqrt(zahl);
  return ergebnis;
}
 
function berechneDiagonale(breite, höhe)
{
  var diagonale = berechneWurzel(breite * breite + höhe * höhe);
  return Math.round(diagonale);
}
 
var ausgabe = "Eine A4-Papierseite hat eine Diagonale von " + berechneDiagonale(210, 297) + " mm.";
In diesem Beispiel sind zahl und ergebnis lokale Variablen der Funktion berechneWurzel. Sie sind nur innerhalb dieser Funktion sichtbar. Die Variablen breite, höhe und diagonale sind lokale Variablen in der Funktion berechneDiagonale. Im globalen Sichtbarkeitsbereich findet sich nur die Variable ausgabe.


Beispiel
function berechneDiagonale(breite, höhe)
{
  function berechneWurzel()
  {
    var ergebnis = Math.sqrt(breite * breite + höhe * höhe);
    return ergebnis;
  }
 
  var diagonale = berechneWurzel();
  return Math.round(diagonale);
}
 
var ausgabe = "Eine A4-Papierseite hat eine Diagonale von " + berechneDiagonale(210, 297) + " mm.";
In diesem Beispiel wurde die Funktion berechneWurzel innerhalb des Funktionskörpers von berechneDiagonale defniniert. Daher sieht die Funktion berechneWurzel auch die lokalen Variablen breite und höhe der Funktion berechneDiagonale und kann somit darauf zugreifen. Die Variable ergebnis bleibt hingegen eine lokale Variable von berechneWurzel und ist auch nur dort sichtbar.


[Bearbeiten] Arbeiten mit Variablen

Der große Vorteil einer Variable ist, dass man ihr etwas zuweisen und damit arbeiten kann. Anstatt also feste Werte im Programm zu verwenden, bezieht man sich auf den Wert, der in einer Variable gespeichert wurde. Hierdurch werden Programme erst flexibel und Funktionen können verallgemeinert werden.

Beispiel
// Fix und nicht flexibel
function berechneDiagonaleVonA4Seite()
{
  return Math.round(Math.sqrt(210 * 210 + 297 * 297));
}
 
// Flexibel durch Verwendung von Variablen
function berechneDiagonale(breite, höhe)
{
  return Math.round(Math.sqrt(breite * breite + höhe * höhe));
}
 
var diagonaleVonA4 = berechneDiagonaleVonA4Seite(); // starr
var diagonaleVonA5 = berechneDiagonale(210, 148);   // flexibel und wiederverwendbar
var diagonaleVonA3 = berechneDiagonale(420, 297);   // flexibel und wiederverwendbar

Ein weiterer Vorteil und Nachteil zugleich ist, dass es einer Variable erstmal egal ist, was sie für einen Wert beinhaltet. Dies kann eine Zahl, eine Zeichenkette, ein Array, eine Funktion oder sonstiges Objekt sein. Wenn man hingegen einen bestimmten Typ erwartet, der verarbeitet werden soll, dann muss man unter Umständen zuerst prüfen, ob das Objekt in der Variable kompatibel ist oder konvertiert werden kann.

JavaScript führt eine implizite Typkonvertierung durch, wenn man selber nicht darauf achtet. Kann der Typ für eine bestimmte Operation nicht konvertiert werden, dann wird eine Ausnahme ausgelöst oder es wird ein Standardwert zurückgegeben. Es werden aber auch Funktionen bereitgestellt, um eine explizite Typkonvertierung durchzuführen. Diese geben mehr Kontrolle, wie man auf eine unzureichende Konvertierung reagieren möchte.


Beispiel
var jahrtext = "Wir schreiben das Jahr ";
var jahrzahl = 2012;
var ausgabe  = jahrtext + jahrzahl;
 
alert(ausgabe); // "Wir schreiben das Jahr 2012"
In diesem Beispiel wird ein numerischer Wert an eine Zeichenkette angehängt.

[Bearbeiten] Empfehlungen für die Praxis

Empfehlung:
  • Verwenden Sie den strict mode, um durch Tippfehler versehentlich erzeugte globale Variablen auszuschließen.
  • Deklarieren Sie globale Variablen am Anfang des Scripts mit var....!
  • Scope (Gültigkeit):
    Benutzen Sie Variablen – soweit möglich – lokal und deklarieren Sie auch dort. So wird ihr Script übersichtlicher und leichter zu debuggen.
  • Variablennamen
    Benutzen Sie sprechende Namen, d.h. sinnvolle Bezeichnungen, die sich später zurückverfolgen lassen!
    ausgabe = breite * hoehe; ist besser als a = b*h;
  • Beachten Sie die Regeln für selbstvergebene Namen, z.B:
    • Variablen sind case-sensitive, also achten Sie immer auf Groß-und Kleinschreibung.
    • CamelCase
      Besser lesbar ist das so genannte CamelCase, in dem die ersten Buchstaben der einzelnen Bestandteile des Namens groß geschrieben werden.

[Bearbeiten] Alternativen zu var

  • Variablen mit Block Scope: let
  • Symbolische Konstanten: const


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML