JavaScriptのスコープ
スコープというのは、変数を参照できる範囲です
変数などを参照できる範囲で、
{ }内で宣言された変数は{ }の外に影響しない
{ }外で宣言された変数は{ }の中に影響します
関数のスコープ
次の関数を含んだソースコードを見てみましょう。
let n1 = 1;
p1.innerHTML = n1; //①
function change() {
let n1 = 2; //※
p2.innerHTML = n1; //②
}
change();
p3.innerHTML = n1; //③
①で表示される値は、1
②で表示される値は、2
③で表示される値は、1
になります。あれ、おかしいですね。なんで③で1になるんでしょう。
①に関係する、上2行はおわかりですね。変数 n1 に 1を代入し、要素の取得を行ったp1の内側のHTMLに表示しようとしています。ですから１になります。これはOK。
②に関係する、関数changeの定義では、
let n1 = 2、なるほど1ではなくて2を代入しています。OK。
それを要素の取得を行ったp2の内側のHTMLに表示するんだよ。
なにを？n1、なのでchange()で関数を呼び出すと、2が表示される。これもOK
③に関係する最後の行は、n1の値を表示する。うんうん。n1は2だよね。。。
でもこれは1になります。{ }の中は外に影響しないんです。
以前巨人のアニメがありましたね。
{ }を壁だと思いましょう。そうすると壁の中で生まれた人類は外にでられない。でも、壁の外にいる巨人は壁の中に侵入できる、まさにそれです。
{ }の外、壁の外で宣言された変数は壁の中に侵入、影響するんですね。
例えば、関数changeの中のletを外してみてください。壁の中で宣言しないんです。そうすれば、私達が期待した数値2になります。
if文のスコープ
次のif文のソースコードをご覧ください
let a = 1;
if(a === 1){
let n1 = 2;
p1.innerHTML = n1; //①
}
p2.innerHTML = n1; //②
①で表示される値は、2
②では何も表示されません
あれ、これもおかしいですね。なんで2にならないんでしょう。
if文にも、あ！壁{ }がありますね。
if文の中では、n1を宣言して2を代入しています。
なので①では2が表示されますが、それは壁の中の話なので、
壁の外の②には影響しないので、n1の中には何も存在しないので表示されない。
if文の中のn1を②で表示するには、そうですね、
壁の外で宣言すればいいですね、例えば以下のようにしてみましょう。
let a = 1;
let n1;
if(a === 1){
n1 = 2;
p1.innerHTML = n1; //①
}
for文のスコープ
for文でも{ }がありますね。
for(let i = 1;i < 3;i++){
let n1 = 2;
p1.innerHTML += n1 + ","; //①
}
p3.innerHTML = n1; //②
①で表示される値は、「2,2」
②で表示される値はありません。
1から3未満の繰り返しで、n1に2とカンマを文字列連結し、表示しています。これはOKですね。
{}の外、壁の外では、n1もiも影響しないので、表示されません。これを影響させるには、if文と同じように{ }の外で定義すればよいですね。
最後に
{ }内で宣言した変数は、役目を終えると消滅します。{ }外で宣言した変数は役目を終えても、残ったままで、メモリを消費することを心に止めておいてください。