スコープチェーン

導入

何も行われていない状態ではグローバルスコープと呼ばれる全体のスコープが一つだけ存在し、その中にローカルスコープと呼ばれる個別のスコープが作成される。

スコープチェーン

• グローバルスコープの中にローカルスコープがあるように、スコープは入れ子構造=階層を持つことができる
• スコープ階層内（=入れ子の内側）からの名前検索のことをスコープチェーンと呼ぶ
• 現在のスコープ → 親 → 祖父母の順のように木構造を逆行するように動作する

1. 名前を呼び出している現在のスコープかつ、呼び出し行よりも上を検索
   （名前を呼び出している現在のスコープが起点となる）
2. 見つからない場合、その親スコープを検索
   （↑親スコープがグローバルスコープである場合を想定すると、検索対象になることを理解しやすい）
3. どの親スコープにもその名前が含まれていない場合、ReferenceErrorの例外が発生

test.js

{
    // OUTERブロックスコープ
    const x = "outer";
    {
        // INNERブロックスコープ
        const x = "inner";
        // 現在のスコープ(INNERブロックスコープ)にある`x`を参照する
        console.log(x); // => "inner"
    }
    // 現在のスコープ(OUTERブロックスコープ)にある`x`を参照する
    console.log(x); // => "outer"
}

参考

https://jsprimer.net/basic/function-scope/

変数を参照する際には、現在のスコープ（変数を参照する式が書かれているスコープ）から外側のスコープへと順番に変数が定義されているかを確認します。