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

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

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

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

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

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

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら