【JavaScript】スコープ【自己学習】

スコープとは

スコープとは、変数を参照できる範囲を決める概念のこと。

スコープの種類

• グローバルスコープ →　コード内のどこからでも参照できる
• ローカルスコープ　→　変数を定義した関数内でのみ参照できる

グローバルスコープを持つ変数をグローバル変数、ローカルスコープを持つ変数をローカル変数と呼び、スコープが異なる変数は同名であっても別の変数として扱われる。

scope-1.js

var scope = "global";    //グローバル変数の定義

function value() {
  var scope = "local";   //ローカル変数の定義
  console.log(scope);
}

value();  // > local
console.log(scope); // > global

value関数内の先頭でローカル変数scopeを定義したことで、関数内の変数scopeの値はglobalからlocalに上書きされている。そのため、value関数を呼び出すとコンソール上ではlocalと出力される。

一方、関数の外にある変数scopeを呼び出した場合、グローバル変数scopeの値はコードの一番で定義したままであるためglobalが出力される。

変数の巻き上げ（ホイスティング）

ローカル変数は関数内のどこで定義しても、変数の宣言自体は関数内の先頭で行われたとみなされる。これを変数の巻き上げ（ホイスティング）という。

scope-2.js

var scope = "global";

function value() {      //実際の関数内の処理
  console.log(scope);   //var scope;
  var scope = "local";  //console.log(scope);
                        //scope = "local"
}                        

value();  // > undefined

上記のコードで関数valueを呼び出した場合、ローカル変数scopeの定義が関数の一番最後で行われていることから、globalという値が出力されるようにもみえるが、実際はundefinedが出力される。

これは、ホイスティングにより実際の処理では関数の先頭でローカル変数scopeが宣言され、値の代入自体はconsole.log(scope)の後に行われていることで生じている。

scope-3.js

var scope = "global";

function value() {
  var scope = "local";
  console.log(scope);
}

value();  // > local

ホイスティングにより思わぬ不具合を引き起こすことを防ぐために、上記のコードのようにローカル変数は関数内の先頭で定義するのが望ましい。