JavaScriptでは、変数を使用する前にvarステートメントを使用して宣言します：

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

宣言と代入を組み合わせて、変数をすぐに初期化することもできます

var foo = 3;

初期化されていない変数の値はundefinedです：

> var x;
> x
undefined

プログラムの動作を調べるには、2つの角度があります：

この章の残りの部分では、次の概念を理解する必要があります：

ほとんどの主流の言語はブロックスコープです。変数は最も内側の周囲のコードブロックの「内部に存在」します。Javaの例を次に示します。

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

上記のコードでは、変数fooはそれを直接囲むブロック内でのみアクセス可能です。ブロックの終了後にアクセスしようとすると、コンパイルエラーが発生します。

対照的に、JavaScriptの変数は関数スコープです：新しいスコープを導入するのは関数のみです。ブロックはスコープに関しては無視されます。例えば：

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

言い換えれば、fooはブロック内だけでなく、main()全体でアクセス可能です。

JavaScriptはすべての変数宣言をホイストします。つまり、それらを直接スコープの先頭に移動します。これにより、変数が宣言される前にアクセスされた場合に何が起こるかが明確になります：

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

変数barはf()の最初の行に既に存在しますが、まだ値がありません。つまり、宣言はホイストされていますが、代入はホイストされていません。 JavaScriptは、コードが次のようであるかのようにf()を実行します

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

既に宣言されている変数を宣言しても、何も起こりません（変数の値は変更されません）

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

各関数宣言もホイストされますが、方法は少し異なります。変数の作成だけでなく、完全な関数がホイストされます（ホイストを参照）。

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

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

通常、変数の寿命を制限するために新しいスコープを導入します。 そうしたくなる例としては、ifステートメントの「then」部分が挙げられます。条件が満たされた場合にのみ実行されます。そして、ヘルパー変数を排他的に使用する場合、それらが周囲のスコープに「リーク」することを避けたいのです。

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

thenブロックに新しいスコープを導入する場合、関数を定義してすぐに呼び出すことができます。これはブロックスコープの回避策、シミュレーションです。

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

これはJavaScriptでは一般的なパターンです。 Ben Almanは、これを即時実行関数式（IIFE、「イフィー」と発音）と呼ぶことを提案しました。一般に、IIFEは次のようになります

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

IIFEについて注意すべき点がいくつかあります

!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;
        }
    };
}();

プログラム全体を含むスコープは、グローバルスコープまたはプログラムスコープと呼ばれます。 これは、スクリプト（Webページの<script>タグであっても、.jsファイルであっても）に入るときのスコープです。グローバルスコープ内では、関数を定義することでネストされたスコープを作成できます。そのような関数内では、再びスコープをネストできます。各スコープは、独自の変数と、それを囲むスコープ内の変数にアクセスできます。グローバルスコープは他のすべてのスコープを囲んでいるため、その変数にはどこからでもアクセスできます。

// 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>

ECMAScript仕様では、内部データ構造である環境を使用して変数を格納します（環境：変数の管理を参照）。この言語には、グローバル変数の環境を、いわゆるグローバルオブジェクトと呼ばれるオブジェクトを介してアクセス可能にするという、やや珍しい機能があります。グローバルオブジェクトを使用して、グローバル変数を作成、読み取り、および変更できます。グローバルスコープでは、thisはそれを指します。

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

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

グローバルオブジェクトにはプロトタイプがあることに注意してください。すべての（自身と継承された）プロパティを一覧表示する場合は、すべてのプロパティキーのリストのgetAllPropertyNames()などの関数が必要です。

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

JavaScriptの作成者であるBrendan Eichは、グローバルオブジェクトを自身の「最大の反省点」の1つと考えています。パフォーマンスに悪影響を及ぼし、変数スコープの実装をより複雑にし、コードのモジュール性を低下させます。

(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 = ...;
}

変数は、プログラムの実行がそのスコープに入るときに存在するようになります。その後、ストレージスペースが必要になります。そのストレージスペースを提供するデータ構造は、JavaScriptでは環境と呼ばれます。変数名を値にマッピングします。その構造は、JavaScriptオブジェクトの構造と非常によく似ています。環境は、スコープを離れた後も存続することがあります。したがって、スタックではなくヒープに格納されます。

変数は2つの方法で渡されます。いわば、2つの次元があります。

これらの2つの次元は次のように処理されます。

例を見てみましょう。

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

図16-1. 変数の動的次元は実行コンテキストのスタックによって処理され、静的次元は環境のチェーンによって処理されます。アクティブな実行コンテキスト、環境、および関数が強調表示されています。手順1は、関数呼び出しmyFunction（abc）の前にこれらのデータ構造を示しています。手順2は、関数呼び出し中にそれらを示しています。

図16-1は、上記のコードが実行されたときに何が起こるかを示しています。

関数が作成されたスコープを離れると、そのスコープ（および周囲のスコープ）の変数に接続されたままになります。例えば：

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

createInc()によって返される関数は、startValueへの接続を失いません。この変数は、関数呼び出し間で永続化する状態を関数に提供します。

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

クロージャとは、関数とその関数が作成されたスコープへの接続のことです。この名前は、クロージャが関数の自由変数を「閉じ込める」という事実から来ています。変数は、関数内で宣言されていない場合、つまり「外部から」来た場合、自由です。

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