In JavaScript deklarieren Sie eine Variable mit einer var-Anweisung, bevor Sie sie verwenden:

var foo;
foo = 3; // OK, has been declared
bar = 5; // not OK, an undeclared variable

Sie können eine Deklaration auch mit einer Zuweisung kombinieren, um eine Variable sofort zu initialisieren

var foo = 3;

Der Wert einer nicht initialisierten Variable ist undefined:

> var x;
> x
undefined

Sie können die Funktionsweise eines Programms aus zwei Blickwinkeln betrachten:

Für den Rest dieses Kapitels sollten Sie die folgenden Konzepte verstehen:

Die meisten Mainstream-Sprachen sind block-gesoped: Variablen „leben in“ dem innersten umgebenden Codeblock. Hier ist ein Beispiel aus Java:

public static void main(String[] args) {
    { // block starts
        int foo = 4;
    } // block ends
    System.out.println(foo); // Error: cannot find symbol
}

Im vorherigen Code ist die Variable foo nur innerhalb des Blocks zugänglich, der sie direkt umgibt. Wenn wir versuchen, darauf nach dem Ende des Blocks zuzugreifen, erhalten wir einen Kompilierungsfehler.

Im Gegensatz dazu sind JavaScript-Variablen funktions-gesoped: nur Funktionen führen neue Scopes ein; Blöcke werden beim Scoping ignoriert. Zum Beispiel:

function main() {
    { // block starts
        var foo = 4;
    } // block ends
    console.log(foo); // 4
}

Anders ausgedrückt ist foo innerhalb von main() zugänglich, nicht nur innerhalb des Blocks.

JavaScript hisst alle Variablendeklarationen, d.h. es verschiebt sie an den Anfang ihrer direkten Scopes. Das macht deutlich, was passiert, wenn auf eine Variable zugegriffen wird, bevor sie deklariert wurde:

function f() {
    console.log(bar);  // undefined
    var bar = 'abc';
    console.log(bar);  // abc
}

Wir sehen, dass die Variable bar bereits in der ersten Zeile von f() existiert, aber sie hat noch keinen Wert; das heißt, die Deklaration wurde gehisst, aber nicht die Zuweisung. JavaScript führt f() so aus, als wäre sein Code

function f() {
    var bar;
    console.log(bar);  // undefined
    bar = 'abc';
    console.log(bar);  // abc
}

Wenn Sie eine bereits deklarierte Variable deklarieren, passiert nichts (der Wert der Variable bleibt unverändert)

> var x = 123;
> var x;
> x
123

Jede Funktionsdeklaration wird ebenfalls gehisst, aber auf eine etwas andere Weise. Die vollständige Funktion wird gehisst, nicht nur die Erstellung der Variable, in der sie gespeichert ist (siehe Hoisting).

> function sloppyFunc() { x = 123 }
> sloppyFunc()
> x
123

> function strictFunc() { 'use strict'; x = 123 }
> strictFunc()
ReferenceError: x is not defined

Sie führen typischerweise einen neuen Scope ein, um die Lebensdauer einer Variable einzuschränken. Ein Beispiel, wo Sie dies tun möchten, ist der „dann“-Teil einer if-Anweisung: Er wird nur ausgeführt, wenn die Bedingung erfüllt ist; und wenn er ausschließlich Hilfsvariablen verwendet, möchten wir nicht, dass diese in den umgebenden Scope „auslaufen“:

function f() {
    if (condition) {
        var tmp = ...;
        ...
    }
    // tmp still exists here
    // => not what we want
}

Wenn Sie einen neuen Scope für den then-Block einführen möchten, können Sie eine Funktion definieren und sie sofort aufrufen. Dies ist ein Workaround, eine Simulation von Block-Scoping:

function f() {
    if (condition) {
        (function () {  // open block
            var tmp = ...;
            ...
        }());  // close block
    }
}

Dies ist ein gängiges Muster in JavaScript. Ben Alman schlug vor, es immediately invoked function expression (IIFE, ausgesprochen „iffy“) zu nennen. Im Allgemeinen sieht eine IIFE so aus

(function () { // open IIFE
    // inside IIFE
}()); // close IIFE

Hier sind einige Dinge, die Sie über eine IIFE beachten sollten

!function () { // open IIFE
    // inside IIFE
}(); // close IIFE

void function () { // open IIFE
    // inside IIFE
}(); // close IIFE

var File = function () { // open IIFE
    var UNTITLED = 'Untitled';
    function File(name) {
        this.name = name || UNTITLED;
    }
    return File;
}(); // close IIFE

var x = 23;
(function (twice) {
    console.log(twice);
}(x * 2));

var x = 23;
(function () {
    var twice = x * 2;
    console.log(twice);
}());

var setValue = function () {
    var prevValue;
    return function (value) { // define setValue
        if (value !== prevValue) {
            console.log('Changed: ' + value);
            prevValue = value;
        }
    };
}();

Der Scope, der ein gesamtes Programm umfasst, wird als globaler Scope oder Programm-Scope bezeichnet. Dies ist der Scope, in dem Sie sich befinden, wenn Sie ein Skript betreten (sei es ein <script>-Tag auf einer Webseite oder eine .js-Datei). Innerhalb des globalen Scopes können Sie einen verschachtelten Scope erstellen, indem Sie eine Funktion definieren. Innerhalb einer solchen Funktion können Sie wiederum Scopes verschachteln. Jeder Scope hat Zugriff auf seine eigenen Variablen und auf die Variablen in den umgebenden Scopes. Da der globale Scope alle anderen Scopes umgibt, sind seine Variablen überall zugänglich:

// here we are in global scope
var globalVariable = 'xyz';
function f() {
    var localVariable = true;
    function g() {
        var anotherLocalVariable = 123;

        // All variables of surround scopes are accessible
        localVariable = false;
        globalVariable = 'abc';
    }
}
// here we are again in global scope

<!-- Don’t do this -->
<script>
    // Global scope
    var tmp = generateData();
    processData(tmp);
    persistData(tmp);
</script>

<script>
    (function () {  // open IIFE
        // Local scope
        var tmp = generateData();
        processData(tmp);
        persistData(tmp);
    }());  // close IIFE
</script>

Die ECMAScript-Spezifikation verwendet die interne Datenstruktur Umgebung, um Variablen zu speichern (siehe Umgebungen: Verwaltung von Variablen). Die Sprache hat die etwas ungewöhnliche Eigenschaft, die Umgebung für globale Variablen über ein Objekt zugänglich zu machen, das sogenannte globale Objekt. Das globale Objekt kann verwendet werden, um globale Variablen zu erstellen, zu lesen und zu ändern. Im globalen Scope zeigt this darauf:

> var foo = 'hello';
> this.foo  // read global variable
'hello'

> this.bar = 'world';  // create global variable
> bar
'world'

Beachten Sie, dass das globale Objekt Prototypen hat. Wenn Sie alle seine (eigenen und geerbten) Eigenschaften auflisten möchten, benötigen Sie eine Funktion wie getAllPropertyNames() aus Auflistung aller Eigenschaftenschlüssel

> getAllPropertyNames(window).sort().slice(0, 5)
[ 'AnalyserNode', 'Array', 'ArrayBuffer', 'Attr', 'Audio' ]

Der JavaScript-Schöpfer Brendan Eich betrachtet das globale Objekt als einen seiner „größten Bedauern“. Es wirkt sich negativ auf die Leistung aus, erschwert die Implementierung von Variablen-Scoping und führt zu weniger modularem Code.

(function (glob) {
    // glob points to global object
}(typeof window !== 'undefined' ? window : global));

var foo = 123;
(function () {
    console.log(window.foo);  // 123
}());

(function () {
    var foo = 123;
    console.log(window.foo);  // undefined
}());

var g_foo = 123;
(function () {
    console.log(g_foo);
}());

window.isNaN(...)  // no
isNaN(...)  // yes

if (window.someVariable) { ... }

// Don’t do this
if (someVariable) { ... }

if (window.someVariable !== undefined) { ... }
if ('someVariable' in window) { ... }

if (typeof someVariable !== 'undefined') { ... }

if (!window.someApiFunction) {
    window.someApiFunction = ...;
}

Variablen entstehen, wenn die Programmausführung ihre Scopes betritt. Dann benötigen sie Speicherplatz. Die Datenstruktur, die diesen Speicherplatz bereitstellt, wird in JavaScript als Umgebung bezeichnet. Sie ordnet Variablennamen Werten zu. Ihre Struktur ähnelt sehr der von JavaScript-Objekten. Umgebungen leben manchmal weiter, nachdem man ihren Scope verlassen hat. Daher werden sie auf einem Heap und nicht auf einem Stack gespeichert.

Variablen werden auf zwei Arten weitergegeben. Sie haben, wenn man so will, zwei Dimensionen

Diese beiden Dimensionen werden wie folgt behandelt

Betrachten wir ein Beispiel.

function myFunction(myParam) {
    var myVar = 123;
    return myFloat;
}
var myFloat = 1.3;
// Step 1
myFunction('abc');  // Step 2

Abbildung 16-1. Die dynamische Dimension von Variablen wird über einen Stack von Ausführungskontexten behandelt, und die statische Dimension wird durch Verkettung von Umgebungen behandelt. Die aktiven Ausführungskontexte, Umgebungen und Funktionen sind hervorgehoben. Schritt 1 zeigt diese Datenstrukturen vor dem Funktionsaufruf myFunction(abc). Schritt 2 zeigt sie während des Funktionsaufrufs.

Abbildung 16-1 veranschaulicht, was passiert, wenn der vorherige Code ausgeführt wird

Wenn eine Funktion den Scope verlässt, in dem sie erstellt wurde, bleibt sie mit den Variablen dieses Scopes (und der umgebenden Scopes) verbunden. Zum Beispiel:

function createInc(startValue) {
    return function (step) {
        startValue += step;
        return startValue;
    };
}

Die von createInc() zurückgegebene Funktion verliert nicht ihre Verbindung zu startValue – die Variable liefert der Funktion einen Zustand, der über Funktionsaufrufe hinweg bestehen bleibt

> var inc = createInc(5);
> inc(1)
6
> inc(2)
8

Eine Closure ist eine Funktion plus die Verbindung zum Scope, in dem die Funktion erstellt wurde. Der Name leitet sich davon ab, dass eine Closure die freien Variablen einer Funktion „umschließt“. Eine Variable ist frei, wenn sie nicht innerhalb der Funktion deklariert ist – d. h., wenn sie „von außen“ kommt.

function f() {
    var result = [];
    for (var i=0; i<3; i++) {
        var func = function () {
            return i;
        };
        result.push(func);
    }
    return result;
}
console.log(f()[1]());  // 3

function f() {
    var result = [];
    for (var i=0; i<3; i++) {
        (function () { // step 1: IIFE
            var pos = i; // step 2: copy
            var func = function () {
                return pos;
            };
            result.push(func);
        }());
    }
    return result;
}
console.log(f()[1]());  // 1