JavaScriptをきちんと学習するには、まずJavaScriptにおける変数のスコープについて、正しく理解する必要があります。

 JavaScriptのスコープには、スクリプト全体から参照できるグローバルスコープと、関数の中だけで参照できるローカルスコープがあります(図1)。グローバルスコープを持つ変数をグローバル変数、ローカルスコープを持つ変数をローカル変数と呼びます。スコープは、変数が宣言された位置で決まります。関数の外で宣言されればグローバル変数、関数の中で宣言されればローカル変数になります。

図1●スクリプト全体から参照できるグローバルスコープと、関数の中だけ で参照できるローカルスコープ
図1●スクリプト全体から参照できるグローバルスコープと、関数の中だけ で参照できるローカルスコープ

 具体的な挙動をリスト3で確認してみましょう。sample関数の中で定義された変数foo(2)はローカルスコープなので、関数の外から参照しようとするとエラーになります(6)。ローカル変数の値は、返り値の形で関数の外に渡すことができます(4)。

リスト3●グローバル変数とローカル変数のスコープ
リスト3●グローバル変数とローカル変数のスコープ
[画像のクリックで拡大表示]

 (1)と(3)では、異なるスコープで同名の変数を定義しています。この場合、範囲が狭い方のスコープ(ローカル変数)が、範囲が広い方のスコープ(グローバル変数)を隠します。この現象をシャドーイングといいます。