スコープと命名規則について（グローバル変数とローカル変数）
スコープについて、書籍を読んだ部分を自分のメモ用としてまとめました。
スコープとは
スコープとは「変数や関数を利用できる範囲（有効範囲）」のことを言います。
JavaScriptの変数や関数はそれらが宣言・作成された箇所よりも内側でのみ利用できます。
スコープ外（宣言・作成された箇所よりも外側）からは利用できない。
スコープの種類（グローバル変数とローカル変数）
スコープの種類には、2種類あります。
| 種類 | 説明 |
|---|---|
| グローバルスコープ | プログラム内のどこからでも使用できる変数や関数のスコープ |
| ローカルスコープ | プログラム内の限られた範囲内でしか使用できない変数や関数のスコープ |
ローカル変数の有効範囲
ローカル変数に関して厳密には、宣言された関数全体で有効な変数になります。
var scope = 'Global Scope'; // グローバル変数を宣言
function getValue(){
console.log(scope); // 1.undefined（未定義）で出力
var scope = 'Local Scope'; // ローカル変数を宣言
return scope;
}
console.log(getValue()); // 2.Local Scopeを出力
console.log(scope); // 3.Global Scopeを出力
なぜ、1.はundefinedが出力されるのか。
ローカル変数は「関数全体で有効」ですので、1の時点ではローカル変数scopeは有効になっています。
しかし、1の時点ではローカル変数が確保されているだけで、var命令は実行されていないため、1の時点は中身が未定義になります。
変数の宣言する箇所を誤ると思わぬ不具合が起きたりします。
ソースが長くなると、デバッグ作業が難しくなるため↓↓↓↓
ローカル変数はかならず関数の先頭で宣言する
変数宣言にvar命令は必須
JavaScriptでは、宣言を表すvar命令は省略可能です。
scope = 'Global Scope'; // グローバル変数を宣言
function getValue(){
scope = 'Local Scope'; // ローカル変数を宣言
return scope;
}
console.log(getValue()); // Local Scopeを出力
console.log(scope); // Local Scopeを出力
このような記述の場合、最後に入れたconsole.log(scope);が
console.log(getValue());に上書きされます。
宣言を表すvar命令がない場合
グローバルで定義された変数を出力する
結果、最初に宣言したscopeは、次に宣言したscopeに上書きされてしまう状態になります。
ローカル変数は「< var命令で定義された >変数は、定義する場所によって変数のスコープが決まる」
ローカル変数を定義するには、かならずvar命令を使用する
- 「関数内でグローバル変数を書き換える」ような用途を除いては、原則var命令を省略すべきではない。
- グローバル変数を宣言する場合も「グローバル変数にはvarをつけない。ローカル変数にはつける」などをしてしまうと混乱のもとになる。