【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の細かな違いに関しては、下の参考リンク欄から飛んで読んでみてください。

↓　　↓　　↓

let - JavaScript | MDN