さぁ!検索しよう!

スコープ

スコープとは変数の有効範囲であり、変数の種類によって有効範囲が異なります。

始めに変数は、グローバル変数とローカル変数の二つに分けられます。

グローバル変数

関数外で宣言された変数を指します。

グローバル変数はプログラムが終了するまで記憶領域を確保するため、乱用するとメモリの消費が激しくなってしまいます。

また、グローバル変数はプログラムに残り続けるため、後でjQueryのプラグインを読み込んだときに同じ変数名が使われていれば、衝突してしまいます。

関数内でしか必要のない変数は、グローバル変数にしないようにしましょう。

ローカル変数

関数内で宣言された変数を指し、関数の実行が終わり次第、破棄されます。

また、ローカル変数は宣言時に下記のようにvarを記述しないと、例え関数内であってもグローバルとみなされてしまいます。varの記述はお忘れなく。

ローカル変数だけに限らず、グローバル変数にも混乱を避けるためにも、宣言時にvarを記述しましょう。

var hoge = 1;//グローバル変数

var func = function() {
	var hoge = 2;//ローカル変数
}

次に、上述の2種類の変数のスコープは下記の通りです。

グローバル変数のスコープ

プログラム全体から参照することができます。

var hoge = 1;//グローバル変数

var func = function() {
	console.log(hoge);//1
}
console.log(hoge);//1

ローカル変数のスコープ

その関数内でのみ参照することができます。

var func = function() {
	var hoge = 2;//ローカル変数
	console.log(hoge);//2
}
console.log(hoge);//undefined

また、スコープに関連して、下記のようなものがあります。

即時関数

定義が完了すると同時に即実行される関数を指します。

通常の名前関数は、定義後にhoge();のように記述することで、関数が実行されます。

それとは異なり、即時関数は関数の定義が完了したと同時に即実行されます。記述方法は下記の通りです。

(function(){
	alert('Hello');
}());

名前関数とは記述が若干異なり、括弧が多いですが、この括弧には下記の意味が込められています。

関数直後の() その場で実行
関数全体を囲む(); ローカルスコープで囲んでいる

また、引数のパラメータに値を渡すには下記のように最後の括弧に渡します。

(function(param1,param2){//引数のパラメータ
	return param1 + param2;
}(5,6));//引数の値
//関数の返り値(return param1 + param2;)を変数hogeに代入

即時関数の利点は下記の通りです。

  • ローカルスコープに囲まれているため、他のグローバル変数に上書きされることがない。
  • 実行が終わると同時にプログラムから完全に消滅するため、グローバルスコープ上に残らないので、グローバル汚染を防ぐ。(関数の外部に影響を及ぼさない。)
  • 	//名前関数
    	var hoge = function(){
    		var foo = 9;
    		console.log(foo);
    	}
    	hoge();//実行後にhogeという変数がグローバル変数となってしまい、グローバルスコープ上に残ってしまう。
    	
    	//即時関数
    	(function(){
    		var foo = 9;
    		console.log(foo);
    	}());//グローバルスコープ上に何も残らない。
    	
  • 実行が終わると同時に消滅するので、名前をつける必要がない。
  • 実行が終わると同時に消滅するので、グローバルスコープ上に残らず、後からプログラムを追加した際に変数名がかぶり衝突する心配がない。

即時関数の使いどころはページ読み込み時の警告画面やデバイス判定等、一度しか使われず、実行後再利用されない処理に適しています。

ホイスティング

ローカル変数は同じ関数内であれば、宣言より前のコードからアクセスされる仕組みをいいます。これは、JavaScriptにおいて変数の宣言は、常に関数内の先頭で行われたことになるためです。

下記はホイスティングの例です。あくまでもアクセスされるのは宣言であるvar hogeであって、値はアクセスされないので出力結果はundefinedとなります。

var func = function() {
	console.log(hoge);//undefined
	var hoge = 2;
	console.log(hoge);//2
}
func();

スコープチェイン

入れ子になった関数において、内側から外側に向かって変数オブジェクト(変数)を探していく仕組みをいいます。

var hoge = 1; //グローバルスコープ
var func = function() {
  console.log(hoge); //undefined
  var hoge = 2; //funcのローカルスコープ
  var funcInner = function() {
    console.log(hoge); //undefined
    var hoge = 8; //funcInnerのローカルスコープ
    console.log(hoge); //8
  }
  console.log(hoge); //2
  return funcInner();

}
console.log(hoge); //1
console.log(func());

以上です。