JavaScript 変数のスコープ 備忘録

■変数のスコープ
●JavaScriptの変数のスコープ
○グローバルスコープ（グローバル変数）：スクリプト全体で参照できる
・関数の外側で宣言した変数
・宣言を省略した変数
○ローカルスコープ（ローカル変数）：特定の関数の中だけで参照できる
・関数の内側で宣言した変数
・関数の引数の変数
例）グローバル変数とローカル変数の利用例
function variableExam() {
gstr = “グローバル変数”;
var lstr = “ローカル変数”;
console.log(lstr);
}
variableExam();
console.log(gstr);
■同じスコープで同じ名前のグローバル変数とローカル変数を宣言したら？
※個人的に気になったので実験してみました。
例）関数の内側でグローバル変数を先に宣言
function variableExam() {
str = “グローバル変数？”;
var str = “ローカル変数？”;
console.log(str);
}
variableExam();
console.log(str);
結果）
ローカル変数？
str is not defined
例）関数の内側でローカル変数を先に宣言
function variableExam() {
var str = “グローバル変数？”;
str = “ローカル変数？”;
console.log(str);
}
variableExam();
console.log(str);
結果）
グローバル変数？
str is not defined
●ローカル変数は関数が呼び出されるタイミングで初期化される
●グローバル変数はページが更新されない限り値を保持し続ける
■スコープの使い分け
・原則としてローカル絵変数を使用
・グローバル変数を使った場合、複数のJavaScriptファイルを読み込んだ時に変数名が衝突する可能性がある
・グローバル変数の使用は必要最小限
・グローバル変数使用例
①複数の関数から1つの変数を使う場合
②ページが開いている間、値を保持したい場合