JavaScriptのスコープ

ここでは、JavaScript における変数のスコープについて説明します。

スコープとは

変数はスコープと呼ばれる有効範囲をもっています。スコープとは、ある変数名を参照したり、変更したりすることのできる範囲を表しています。

ローカルスコープとグローバルスコープ

JavaScript にはローカルスコープとグローバルスコープという2つのスコープが存在します。

ローカルスコープ

関数内で var を用いて宣言された変数はローカルスコープをもち、その変数(ローカル変数と呼びます)は宣言された関数内からのみ参照することができます。次のプログラムはローカルスコープをもつ変数を宣言した例です。

関数 f() 内で宣言された変数numと関数h()内で宣言された変数numはそれぞれローカルスコープを持つため、名前は同じでも別物の変数として扱われます。

なお、他の言語のようなブロックスコープは JavaScript にはありません。関数内の if 文や for 文のブロック内で宣言された変数であっても、関数内であれば書き換え可能です。

上の例では、変数 i は for 文のブロック内で宣言されているにも関わらず、ブロックの後で参照することができています。

グローバルスコープ

関数の外側で宣言した変数はグローバルスコープをもち、プログラムのどこからでも参照することができます。次の例を見てみましょう。

プログラムの先頭で宣言された変数 num はグローバルスコープをもち、他の関数からも参照することができます。このとき、変数 num のことをグローバル変数と呼びます。ただし、上記のプログラムで関数 g() 内で宣言された変数 num はローカルスコープをもつローカル変数です。

ローカル変数への参照ははグローバル変数より優先されます。そのため、関数 g() では関数内で定義されたローカル変数 num が参照され、関数 g() を呼び出すと 300 が表示されます。

グローバル変数はプログラムのどこからでも書き換えられる可能性があるため、乱用することはバグの元となるため注意が必要です。必要なグローバル変数は通常プログラムの先頭に列挙します。

スコープの注意点

関数内で var を用いて宣言された変数はローカルスコープをもちますが、関数内であっても var を用いずに宣言された変数はグローバルスコープをもちます。これは、意図せずにグローバル変数を作り出し、しかも見つけづらいためバグの原因となってしまいます。

このため、変数を宣言する際には、var を用いて宣言することが推奨されています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集