【JavaScript】スコープについて【まとめ】

スコープってなに？

プログラミングにおけるScope（スコープ）とはある変数や関数が特定の名前で参照される範囲のことを言う。

要は今実行中のコードからその変数や関数が見えるか見えないか（参照できるかできないか）ということ

実際に見てみる

↓このコードを実行すると

main.js

{
  let a = 0;
  const b = function () {}
  debugger; //実行中のコード
}

変数aと関数bが参照できているのがわかる

---

↓次にこのコードを実行すると

main.js

{
  let a = 0;
  const b = function () {}
}
debugger; //実行中のコード

aとｂが参照できない・・・

つまり実行中のコード（今回はdebugger;）から変数や関数が見える範囲をスコープという

スコープの種類

JavaScriptには５種類のスコープが存在する。

• グローバルスコープ

• スクリプトスコープ

• 関数スコープ

• ブロックスコープ

• モジュールスコープ

グローバルスコープ

スクリプトファイル直下にvarやfunctionで定義するとここに入る

main.js

var a = 0;
function b() {}
debugger; //実行中のコード

スクリプトスコープ

スクリプトファイル直下にletやconstで定義するとここに入る

main.js

let a = 0;
const b = function() {}
debugger; //実行中のコード

グローバルスコープとスクリプトスコープはそのファイル内であればどこからでも参照可能。

関数スコープ

名前の通り、関数の中のスコープ。

その関数内であれば変数ｂが参照できることがわかります。

一方関数の外では参照できません。

ブロックスコープ

ブロックって？
↓これです

この｛｝の中をブロックスコープと言います。
記事の一番最初の例がブロックスコープの例となります。

if文やfor文の中で定義された変数もブロックスコープとなります。

もちろんこれらもブロック外からは変数を参照できません。

モジュールスコープ

モジュール（ESM）を使用した際にスクリプトスコープがモジュールスコープに切り替わる。
inport / export を使用しないと別ファイルの変数や関数を参照できない。

【JavaScript】基本的なモジュール（ESM）の使い方についてまとめ

レキシカルスコープ

これはどのようにしてスコープが決定するかの仕様のことです。

例として、まず関数f1を定義します。
その中に変数aを定義しています。

ここで1つの関数スコープができました。

main.js

const f1 = () => {
  let a = 0;
}
f1();

さらに関数f1の中に関数f2を定義します。

ここで関数スコープの中にもう1つの関数スコープができました

変数aを出力させ、実行します。
結果として、変数aの値を取得し出力されます。

main.js

const f1 = () => {
  let a = 0;
  const f2 = () => {
    console.log(a); // => 0
  }
  f2();
}
f1();

この時実行中の関数f2の外側にあるスコープから変数を参照しています。
この外側にあるスコープを外部スコープ（レキシカルスコープ）と言います。

また、このようにスコープが複数階層になっている状態をスコープチェーンと言います。

スコープチェーン

スコープが複数階層で、連なっている状態のこと。

スコープチェーンでは一番内側のスコープから順番に変数を取得していく仕様です。

main.js

let a = 0;
const f1 = () => {
  let a = 1;
  const f2 = () => {
    let a = 2; //     <-これ
    console.log(a); // => 2
  }
  f2();
}
f1();

main.js

let a = 0;
const f1 = () => {
  let a = 1; //      <-これ
  const f2 = () => {
    // let a = 2;
    console.log(a); // => 1
  }
  f2();
}
f1();

main.js

let a = 0; //        <-これ
const f1 = () => {
  // let a = 1;
  const f2 = () => {
    // let a = 2;
    console.log(a); // => 0
  }
  f2();
}
f1();

---

以上、スコープについてでした！
ここまで見ていただきありがとうございました。