JS学習記録第9回　スコープについて

こんにちは！
今回はJavaScriptのスコープについてまとめてみようと思います！
最近から本格的に学習してみて、
どの変数、関数がどのような動きをしているのかが、分からなくなってくる時が多く、JSのスコープについてちゃんと調べてみようと思いました。

スコープとは

スコープとは、
設定した変数や関数が有効な範囲のことを言います。
JavaScriptでは、変数や関数などにアクセスできる範囲が決まっているようで、この範囲をスコープと呼びます。

この有効な範囲を理解することで、JSの理解が少し進みました！

例えばこのような感じです！

function a(){
   let b = 1;
   console.log(b);
}

a();

上記の記述はaという関数にbという変数を格納して、comsole.logでbを出力させているソースになります。
今までなんとなくやっていて理解も出来るかと思います。

しかし、このように記述を変更するとどうでしょうか？

function a(){
   let b = 1;
}
console.log(b);

a();

bの値がないよ！とエラーが出てしまいました！
これがいわゆる有効の範囲のスコープです！

以上のことから、bの変数はaの関数内でしか機能を持たないですよ！という意味になります。
これを関数スコープというそうです。なるほど。。。

ブロックスコープについて

次にブロックスコープについて見ていきたいと思います。
こちらが少しややこしかった。。。

例えばif文やfor文などで{}で囲う記述などあるかと思います。
その波カッコ内のスコープについて見ていきます。

{
   const a =1;
   let b =2;
   console.log(a);
   console.log(b);
}

上記の記述に関しては正しくaとbにおいて出力が問題なく出てます。

そして、

{
   const a =1;
   let b =2;
   
}
console.log(a);
console.log(b);

これら２つのconsole.logを{}外で出力するとエラーが出ます。
これは前項で述べたようにわかるかと思います。

しかしこれがvarを使用するとどうでしょうか？

{
   var a =2;
   
}
console.log(a);

エラーなく表示されました_:(´ཀ`」 ∠):
varはブロックスコープ関係なく使用できるそうですね。。
これがvarが非推奨になった原因だと言われています。
また関数も飛び越えちゃいます。

{
   function a(){
       let b = 0;
       console.log(b);
   }
   
}

a();

{
   const a =　function(){
       let b = 0;
       console.log(b);
   }
   
   
}
a();

なので、関数をブロック内に収めたいときは、
一度変数に格納してあげると、飛び越えません。
スコープを自由に飛び越えちゃうと、
記述した際に訳が分からなる現象に陥っちゃいますし、
きちんと理解していないと使い分けができないですね！

因みに・・・

function a(){
   var b = 1;
}
console.log(b);

a();

関数スコープ内では、varでも飛び越えることはないようです！
色々と複雑ですね。。。
今までのことをまとめるとこのようになります！

まとめ

関数スコープとは、
関数内の機能の有効範囲のこと。
ブロックスコープは、
if文などの{}内の機能の有効範囲のこと。
let、constの変数定義は、
関数スコープ、ブロックスコープとも枠外に機能は飛び越えることはない。
function a()などの関数は、
ブロックスコープは飛び越えるが、関数を変数に格納することで、飛び越えるのを防ぐことができる。
現在非推奨のvarは、関数スコープは飛び越えることはないが、
ブロックスコープでは飛び越えてしまう。

と言ったような感じです！

参考サイト
https://www.codegrid.net/articles/2017-js-scope-1/

それぞれのスコープの流れを理解していないと、
後々痛い目に遭うと思ったので、
学習してまとめて見ました！
JSはおくが深いですね。