Scope – Gültigkeitsbereich von Variablen, Funktionen und Klassen

Der globale Scope – das komplette Script der Webseite

Alle Variablen, die außerhalb von Blöcken oder Funktionen deklariert sind, sind globale Variablen. Alle Skripte und alle Funktionen einer Webseite haben Zugriff auf eine Variable, die im Globalen Scope vereinbart wurde.

Globale Variablen sind Tretminen, denn weitere Scripte könnten sie unwissentlich mit demselben Namen überschreiben. Hier greift eine Funktion direkt auf eine globale Variable zu:

let counter = 0;

function increment() {
  counter++;
}

increment();
increment();

console.log("counter", counter);

counter – 2

var x = 10;

function demo() {
  console.log("x", x);
  var x = 20;
}

demo();

x – undefined

Function Scope

Variablen und auch Funktionen, die innerhalb der geschweiften Klammern einer Funktion angelegt werden, liegen sicher und wohl verwahrt im Funktionsscope.

let x = 10;

function test() {
	let y = 20;
}

console.log ("x", x)
console.log ("y", y)

Die Variable x lebt im globalen Scope, y hingegen nur innerhalb der Funktion test(). y kann außerhalb von function test() nicht angesprochen werden: ReferenceError: Can't find variable: y. Das Gute an dieser Fehlermeldung ist: y kann nicht versehentlich überschrieben werden.

function outer() {
	let a = 10; 

	function inner() {
		let b = 100; 
	}
}

Für die Funktion inner() ist die Variable a eine globale Variable: Sie kann auf a zugreifen. Die Variable b ist aber nur innerhalb der Funktion inner() bekannt.

Bevor JavaScript einen Block Scope bekam, wurden Funktionen in einer speziellen Schreibweise zum Schutz von Variablen und Funktionen eingesetzt. IIFEs waren eine häufig anzutreffende Technik im ES5-Standard, denn sie verschafften Variablen einen »Block Scope«, einen eingeschränkten Gültigkeitsbereich, verhinderten die Überflutung des globalen Scopes und geben den Speicher schnell wieder frei.

Blockscope

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. Seit ES6 hat Javascript auch einen Blockscope.

{
    function test() {
        console.log("Hallo! aus Funktion test()");
    }
}
test();  // ✓ Funktion ist trotzdem global sichtbar

Erst ECMAScript 6 hat die geschweiften Klammern zum Block-Scope gehieft, allerdings nur für Variablen, die mit let / const deklariert wurden.

if (true) {
	let a = 5;
}
console.log("a", a);

ReferenceError: Can't find variable: a

Variablen, die auf die alte Art mit dem Schlüsselwort var deklariert wurden, verhalten sich anders.

if (true) {
	var x = 10;
}

console.log("x", x); // funktioniert

x – 10

Funktions-Deklarationen in geschweiften Klammern {} waren in älteren Browsern nicht block-scoped (außer in strict mode). Sie sind auch außerhalb der geschweiften Klammern ansprechbar. Damit ältere Scripte jetzt nicht plötzlich Fehler werfen, bleibt es dabei. Für Funktionen gilt der Blockscope nur, wenn das Script im strict mode läuft.

{
    function test() {
        console.log("Hallo!");
    }
}
test();  // ✓ Funktion ist trotzdem global sichtbar

Javascript Scope

Scope kann man mit dem Dateisystem – Ordnern und Dateien – des Computers vergleichen. Nehmen wir einen Ordner Scope1 und füllen ihn mit Dateien d1, d2, d3, …. Das Verzeichnis wird wie folgt aussehen:

Auf die Dateien unterhalb eines Ordners greift der Vorwärts-Slash (bzw. Rückwärts-Slash) zu:

scope01/d1
scope01/d2
scope01/d3

Ein Javascript-Objekt nutzt den Punkt anstelle des Slash.

const scope01 = {};
scope01.d1;
scope01.d2;
scope01.d3;

Dieses Prinzip gilt nicht nur für Javascript-Objekte, sondern greift bei Funktionen. IFFE (Immediately Invokable Function Expressions) und Javascript class (ES6) bilden Scopes genauso wie while- und for-Schleifen und if-Anweisungen. Alles in geschweiften Klammern ist ein Scope.

Ordnerstrukturen lassen sich verschachteln – dasselbe gilt für den Scope.