変数var,const,letのスコープ

スコープとは、影響範囲のこと。
例えば、関数「red」の中で変数「apple」を定義する。一方で関数「blue」を定義する。
変数「apple」は、関数「red」の中では使うことができる。しかし、関数「blue」の中では使えない。
つまり、変数「apple」は関数「red」の中でしか影響されない。これがスコープの仕組みである。

function red(){
   var apple =  'りんご'; // 変数appleを定義
}
function blue(){
   console.log(apple); // コンソールに変数appleを出力
}
blue(); // 結果：ReferenceErrorエラーになる

JavaScriptでは関数レベルとブロックレベルのレキシカルスコープを採用している。

関数レベルのスコープ

関数レベルのスコープは文字通り関数内で有効ということになる。JavaScriptでvarを使って宣言した変数は、関数レベルのスコープを持つ。
例えば以下のコードであればConsoleにredが問題なく出力される。

function name(){
   if (true) {
       var color = 'red';
   }
   console.log(color); // red
}
name();

もしvarを使って宣言した変数がブロックレベルのスコープであれば、変数var colorはif文内でしか出力できない。

ブロックレベルのスコープ

constやletで宣言した変数は、ブロックレベルのスコープ変数を作成する。

function name(){
   if (true) {
       let color = 'red';
       console.log(color); // red
   }
   console.log(color); // Uncaught ReferenceError: color is not defined
}
name();

letで宣言した変数はブロックレベルのスコープになる。let colorをif文内で宣言しているのでif文内でしか許容できないということになる。if文外でlet colorを使用した場合はエラーになる。