CSS, HTML und Javascript mit {stil}

Javascript globale und lokale Variablen

JS Globale lokale Variable

Javascript-Variablen, die nicht innerhalb von Funktionen oder ohne das Schlüsselwort var vereinbart werden, werden globale Variablen genannt.

Globale Variablen sind Tretminen, denn weitere Scripte könnten sie unwissentlich mit demselben Namen überschreiben. Da Webseiten mehrere Scriptdateien laden können, passiert dieses Unglück schnell.

Die Folge ist kein einfacher Syntaxfehler, sondern ein Logik- oder Rechenfehler, der sich nur durch detektivische Feinarbeit entlarvt.

Darum ist es besser, Variablen erst dann zu deklarieren oder zu vereinbaren, wenn sie gebraucht werden.

Bei der Deklaration kann der Variablen gleich ein Wert zugewiesen werden: Die Variable wird initialisiert. Eine Variable, die deklariert, aber nicht initialisiert ist, ist „undefined“.

var variableName = 42;    // initialisiert
var variableName;         // uninitialisiert

variableName;             // falsch

So könnte eine Variable vorname vom Typ String deklariert werden

var vorname="Maria";
vorname ="Maria";
var vorname;
<script type="text/Javascript">
window.onload = testVariableNames;
function testVariableNames() 
{
   var example = document.getElementById ('example');
   var vorname = "Maria";
   var nachname;
   alter;
}
</script>

erzeugt einen Fehler:

globale-lokale-variablen

Scope – Gültigkeitsbereich Global / Lokal

Der Scope oder Gültigkeitsbereich einer Variablen beschreibt, wo eine Variable innerhalb eines Programms verfügbar ist und benutzt werden kann. Javascript-Variablen sind entweder global oder lokal. Auf eine globale Variable kann von jeder Stelle des Programms aus zugegriffen werden – sie gilt im gesamten Javascript-Programm.

Scope einer Variablen

Normalerweise soll eine Variable nur in einem bestimmten Bereich des Scripts gelten. Das vermeidet Namenskonflikte und das unabsichtliche Ändern von Variablen in anderen Teilen des Scripts.

Die Funktion funcB ist eine »innere Funktion« – in Javascript als Javascript Closures bezeichnet.

+-------> var myGlobal = 42;      // erzeugt eine globale Variable myGlobal
|
|         function func1(arg1, arg2) {
|  +----->    var myNum;           // erzeugt eine lokale Variable myNum
|  |          myNum = myGlobal + 100;
|  +----->|         }
|
|          function func2(arg1, arg2) {
|  +----->     var myNum    = 200;   // erzeugt eine lokale Variable myNum
|  |           myVar        = 50;    // ohne Schlüsselwort var:
|  |                                 // erzeugt eine globale Variable myVar
|  |           var myGlobal = 100;   // überschreibt die globale
|  |                                 // Variable myGlobal, aber nur
|  |                                 // in diesem Block
|  +----->|          }
|
|          function func3(arg1, arg2) { 
||          }
+------->
Gültigkeitsbereich der globalen Variablen myGlobal
Gültigkeitsbereich der lokalen Variablen myNum in func1
Gültigkeitsbereich der lokalen Variablen myNum in func2

Wenn eine Variable innerhalb einer Funktion mit dem Schlüsselwort var deklariert wird, ist diese Variable lokal. Auf lokale Variablen kann nur innerhalb der Funktion zugegriffen werden, in der die Variable vereinbart wird – und zwar von der Stelle der Vereinbarung an bis zum Ende des Blocks. Innerhalb des Blocks überschreibt die Variable alle globalen Variablen mit demselben Namen.

Gute Ratschläge

  • Variablen sollten – soweit es möglich ist – lokal gehalten werden und dort vereinbart werden, wo sie auch gebraucht werden. Das hilft bei der Fehlersuche und macht das Skript lesbarer.
  • Variablen sind case-sensitiv, also immer darauf achten, dass aName eine andere Variable als AName ist.
  • Variablennamen sollten sich aussprechen lassen und eine sinnvolle Bezeichnung ergeben.
    height = 115;
    width = 200;

    ist besser als
    h = 115;
    w = 200;
  • Variablennamen wie name1 und name2 sind der schnellste Weg zu nervenaufreibenden Fehlersuchen.

Lokale und globale Variablen

Variablen in Funktionen, die durch das Schlüsselwort var deklariert sind, gelten nur innerhalb der Funktion. Code außerhalb der Funktion kann auf diese Variablen nicht zugreifen – eine lokale Variable ist entstanden. Wird außerhalb der Funktion eine Variable mit demselben Namen deklariert, benutzt die Funktion immer die lokale Variable aus ihrem Funktionskörper. Man spricht bei dieser Mimic auch von einem »Gültigkeitsbereich« der Variablen – ihrem »Scope«.

var simple = 20;      // eine globale Variable simple
var global = 50;

function abc() {
   var simple = 100;  // die lokale Variable heißt zwar auch simple, aber hat als
                      // lokale Variable den Vorzug. Mit ihr arbeitet die Funktion.
   
   var local = 2000;  // eine lokale Variable
   
   global = 15;       // ändert die globale Variable global
}

Diese Technik hat eine angenehme Nebenwirkung: Lokale Variable geben beim Verlassen der Funktion ihren Speicherplatz frei.

Auf die globale Variable hingegen kann der gesamte Code der Anwendung zugreifen – allerdings auch Code aus Skripten, die nebem dem eigenen Skript in ein HTML-Dokument eingebunden sind. Das ist gefährlich: Wenn ein anderes Skript eine Variable mit demselben Namen deklariert und dieser Variablen einen Wert zuweist, funktioniert mein eigenes Skript nicht mehr wie vorgesehen. Das macht globale Variablen so unbeliebt.

In JavaScript entstehen globale Variablen auf dreierlei Weise:

  1. wenn sie nicht durch var deklariert wurden,
  2. bei einer Deklaration außerhalb aller Funktionen,
  3. bei einer Wertzuweisung innerhalb einer Funktion, ohne dass die Variable zuvor durch das Schlüsselwort var deklariert wurde.

In JavaScript entstehen durch das Vergessen des Schlüsselworts var vor einem Variablennamen ungewollt globale Variablen – ein unangenehmes Fehlerpotential. So überlebt die Variable auch nach dem Verlassen der Funktion und wenn die Funktion häufig aufgerufen wird, entsteht u.U. ein Speicherleck.

JSLint von Douglas Crockford prüft JavaScript-Programme auf ein derartiges Fehlerpotential.