【Javascript】変数の有効範囲はどこからどこまで？その時はスコープを見ていこう。
//
//price,cost使えません。（有効範囲外）
//
const salesCalcurate=(price,cost)=>{
//
//＜price,costの有効範囲＞
//
}
//
//price,cost使えません。（有効範囲外）
//上記の場合、引数(price,cost)は
中括弧（｛｝）が有効範囲
になります。
えっ！なんで変数の有効範囲を知っておく必要があるの！？
と思われたのかもしれませんが、
関数では
「変数も定義」
できてしまいます。
そこで
「変数を宣言したときの有効範囲」
を確かめてみましょう。
有効範囲を調べる
ということは、
①「コードのエラー」を見つけやすくなる。
②「変数のエラー対策」
にもなります。
では一つずつ見ていきましょう。
スコープ（｛｝）の外か内かで有効範囲が決まる
＜aにアクセスできない＞
const func=()=>{
let a=0;
...＜aの有効範囲＞
}
func();
＜aにアクセスできない。＞
スコープ内で
「let」で変数を宣言する
と、
変数を宣言したスコープ（｛｝）のなかのみ
使うことができます。
スコープ（｛｝）のなかのみ使える変数
を
「ローカル変数」
と呼びます。
var a=0;
＜aの有効範囲＞
const func=()=>{
console.log(a)//aが出力される。
...＜aの有効範囲＞
}
＜aの有効範囲＞一方このように
「varを使い、スコープの外に宣言する」
と、
どこでも
使うことができます。
スコープ（｛｝）の内・外に関わらず使えてしまう変数
を
「グローバル変数」
といいます。
たとえば、
var a=0;
＜aの有効範囲＞
const func=()=>{
let a=2;
console.log(a)//aが出力される。
...＜aの有効範囲＞
}
func();
console.log(a);グローバル変数とローカル変数の名前が
「同じ名前」の場合
2//func()の変数が優先なので2になる。
0//グローバル変数が優先。のように、
「ローカル変数」
が優先されますので、覚えておきましょう。
つまり、
①ローカル変数
②グローバル変数
という優先順位となります。
ローカル変数は必ずlet、グローバル変数は必ずvarで宣言する。
ローカル変数として宣言する場合、
「letを使わず、varで宣言してしまう」
と
・if文
・while文
・関数
においてスコープ（｛｝）の中で宣言したのにも関わらず、
「スコープの範囲を関係なく使えたりすること」がある
ので、特別な問題が無いかぎり
「letで宣言するクセ」
をつけるようにしましょう。
一方、グローバル変数として宣言する場合、
「varを使わず、letで宣言してしまう。」
と
プロパティを生成しない（＝オブジェクトにアクセスできない）
こともあるので、注意が必要です。
プロパティやオブジェクトがわからない場合、以下の記事も読んでみてください。
まとめ
いかがでしたでしょうか？
JavascriptのES6（Ecmascript 6）から
「letが使える」
ようになったことで、
・if文
・while文
・関数
においても
ちゃんと「一般的なプログラミング言語のルール通り」に
なってくれたことで、
「Javascriptの変数の有効範囲」
がわかりやすくなったように感じます。
ローカル変数として宣言するなら、
とくに問題ない限り、
「letをチョイスする」
のがベストでしょう。
【追記】※2020/5/12
ローカル変数、グローバル変数の区別をわかりやすくするために、
let,varで区別
して書きましたが、
グローバル変数として定義する場合は
「varの宣言」は省略
しても構いません。
＜参考リンク＞
※letとvarの細かな違いに関しては、下の参考リンク欄から飛んで読んでみてください。
↓ ↓ ↓