スコープってなに？
プログラミングにおけるScope（スコープ）とはある変数や関数が特定の名前で参照される範囲のことを言う。
要は今実行中のコードからその変数や関数が見えるか見えないか（参照できるかできないか）ということ
実際に見てみる
↓このコードを実行すると
{
let a = 0;
const b = function () {}
debugger; //実行中のコード
}
変数aと関数bが参照できているのがわかる
↓次にこのコードを実行すると
{
let a = 0;
const b = function () {}
}
debugger; //実行中のコード
aとｂが参照できない・・・
つまり実行中のコード（今回はdebugger;）から変数や関数が見える範囲をスコープという
#スコープの種類
JavaScriptには５種類のスコープが存在する。
-
グローバルスコープ
-
スクリプトスコープ
-
関数スコープ
-
ブロックスコープ
-
モジュールスコープ
#グローバルスコープ
スクリプトファイル直下にvarやfunctionで定義するとここに入る
var a = 0;
function b() {}
debugger; //実行中のコード
#スクリプトスコープ
スクリプトファイル直下にletやconstで定義するとここに入る
let a = 0;
const b = function() {}
debugger; //実行中のコード
グローバルスコープとスクリプトスコープはそのファイル内であればどこからでも参照可能。
#関数スコープ
名前の通り、関数の中のスコープ。
その関数内であれば変数ｂが参照できることがわかります。
一方関数の外では参照できません。
#ブロックスコープ
ブロックって？
↓これです
この｛｝の中をブロックスコープと言います。
記事の一番最初の例がブロックスコープの例となります。
if文やfor文の中で定義された変数もブロックスコープとなります。
もちろんこれらもブロック外からは変数を参照できません。
モジュールスコープ
モジュール（ESM）を使用した際にスクリプトスコープがモジュールスコープに切り替わる。
inport / export を使用しないと別ファイルの変数や関数を参照できない。
【JavaScript】基本的なモジュール（ESM）の使い方についてまとめ
レキシカルスコープ
これはどのようにしてスコープが決定するかの仕様のことです。
例として、まず関数f1を定義します。
その中に変数aを定義しています。
ここで1つの関数スコープができました。
const f1 = () => {
let a = 0;
}
f1();
さらに関数f1の中に関数f2を定義します。
ここで関数スコープの中にもう1つの関数スコープができました
変数aを出力させ、実行します。
結果として、変数aの値を取得し出力されます。
const f1 = () => {
let a = 0;
const f2 = () => {
console.log(a); // => 0
}
f2();
}
f1();
この時実行中の関数f2の外側にあるスコープから変数を参照しています。
この外側にあるスコープを**外部スコープ（レキシカルスコープ）**と言います。
また、このようにスコープが複数階層になっている状態をスコープチェーンと言います。
スコープチェーン
スコープが複数階層で、連なっている状態のこと。
スコープチェーンでは一番内側のスコープから順番に変数を取得していく仕様です。
let a = 0;
const f1 = () => {
let a = 1;
const f2 = () => {
let a = 2; // <-これ
console.log(a); // => 2
}
f2();
}
f1();
let a = 0;
const f1 = () => {
let a = 1; // <-これ
const f2 = () => {
// let a = 2;
console.log(a); // => 1
}
f2();
}
f1();
let a = 0; // <-これ
const f1 = () => {
// let a = 1;
const f2 = () => {
// let a = 2;
console.log(a); // => 0
}
f2();
}
f1();
以上、スコープについてでした！
ここまで見ていただきありがとうございました。