JavaScriptをきちんと学習するには、まずJavaScriptにおける変数のスコープについて、正しく理解する必要があります。
JavaScriptのスコープには、スクリプト全体から参照できるグローバルスコープと、関数の中だけで参照できるローカルスコープがあります(図1)。グローバルスコープを持つ変数をグローバル変数、ローカルスコープを持つ変数をローカル変数と呼びます。スコープは、変数が宣言された位置で決まります。関数の外で宣言されればグローバル変数、関数の中で宣言されればローカル変数になります。
具体的な挙動をリスト3で確認してみましょう。sample関数の中で定義された変数foo(2)はローカルスコープなので、関数の外から参照しようとするとエラーになります(6)。ローカル変数の値は、返り値の形で関数の外に渡すことができます(4)。
(1)と(3)では、異なるスコープで同名の変数を定義しています。この場合、範囲が狭い方のスコープ(ローカル変数)が、範囲が広い方のスコープ(グローバル変数)を隠します。この現象をシャドーイングといいます。