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. Sie sind im gesamten Code bekannt.

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, den erst eine akribische Feinarbeit entlarvt.

Programmiersprachen mit einer C-Syntax haben einen »Block Scope« – alle Variablen, die innerhalb von geschweiften Klammern (in einem Block) definiert werden, gelten nur innerhalb dieses Blocks und sind lokale Variablen.

Der Scope ist der Gültigkeitsbereich einer Variablen. Ein Block aus Anweisungen innerhalb von geschweiften Klammern ist ein Block Scope.

Block Scope
Erzeugt einen Fehler (xtra ist nicht definiert) in C-Sprachen
{
   var xtra;   // gilt nur innerhalb der geschweiften Klammern
   xtra = 15;
}
var xtra = 500;

Javascript hingegen hat keinen Block Scope, sondern nur einen Function Scope. Nur Variablen, die innerhalb von Funktionen mit dem Schlüsselwort var definiert werden, sind lokale Variablen. Alle anderen Variablen sind globale Variablen und gelten im gesamten Programm.

Function Scope in Javascript
function foo {
   var xtra;
   xtra = 14;
}
myVal = xtra; 

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

  • In den meisten Programmiersprachen sollen Variablen – 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. In Javascript macht es Sinn, die Variablen zu Beginn der Funktion zu definieren. Das vermeidet, dass Variablennamen innerhalb der Funktion mehrfach vergeben werden.
  • 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.

Lokale Variablen en block: let

Mit ECMAScript 6 bekommen Javascript-Variablen Zuwachs: Wenn Variablen innerhalb eines Blocks mit let anstelle von var deklariert werden, sind sie lokale Variablen innerhalb ihres Blocks.

var x = 1; 
var y = "first";   // Deklariert außerhalb von Funktionen
                   // eine globale Variable;  
if (x > 0) {
   let y = 42;     // Gilt nur innerhalb des Blocks 
                   // und überschreibt das erste y nicht
   console.log ("inneres y " + y);
}

console.log ("oberes y " + y);
[Log] inneres y 42
[Log] oberes y first

let bringt noch eine Sicherheitsvorkehrung mit. Wird ein Variablennamen innerhalb eines Blocks mehrfach verwendet, wirft Javascript einen Fehler aus.

if (x > 0 ) {
   let togo = "cofe to go";
   let togo = "Kinderkram";
}
SyntaxError: Cannot declare a let variable twice: 'togo'.