スコープチェーン | スコープ | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

スコープチェーンとは？

スコープチェーンとは、JavaScriptにおける変数の検索メカニズムの一部です。JavaScriptでは、変数や関数がどこで定義されているかによってアクセスできる範囲（スコープ）が決まりますが、スコープがネストされている場合、内側のスコープから外側のスコープに順にアクセスして変数を探す仕組みをスコープチェーンと呼びます。

スコープチェーンの動作

関数やブロック内で変数が参照されたとき、その変数がまず最も内側のスコープで検索されます。もし見つからなければ、外側のスコープを順にたどり、最終的にグローバルスコープまで検索が行われます。これがスコープチェーンの動作です。

スコープチェーンの例

const globalVar = "global";

function outerFunction() {
    const outerVar = "outer";

    function innerFunction() {
        const innerVar = "inner";
        console.log(innerVar);  // "inner"
        console.log(outerVar);  // "outer"
        console.log(globalVar);  // "global"
    }

    innerFunction();
}

outerFunction();

この例では、innerFunction内でinnerVar、outerVar、そしてglobalVarが順に参照されています。innerFunctionは自身のスコープでinnerVarを見つけ、次に外側のouterFunctionのスコープでouterVarを見つけ、最終的にグローバルスコープでglobalVarを見つけます。この動作がスコープチェーンです。

スコープチェーンの流れ

スコープチェーンの流れは次の通りです：

  1. まず、変数や関数の宣言が現在のスコープ内にあるかを確認します。
  2. 見つからない場合、外側のスコープ（親スコープ）を順に探します。
  3. 最終的に、グローバルスコープに到達しても見つからない場合、ReferenceErrorが発生します。

スコープチェーンの重要性

スコープチェーンは、変数の見つけ方を制御し、特にネストされた関数やブロックがある場合に、正しく変数にアクセスするために不可欠です。各スコープは独立しており、内側のスコープで変数が宣言されていれば、外側のスコープに影響を与えません。この特性を利用することで、スコープの意図しない衝突や上書きを避けることができます。

スコープチェーンによる変数の遮蔽（シャドーイング）

const varName = "global";

function testFunction() {
    const varName = "local";
    console.log(varName);  // "local"
}

testFunction();
console.log(varName);  // "global"

この例では、testFunction内で宣言されたvarNameが、外側のグローバルスコープのvarNameを上書きすることなく、スコープ内で独立して存在します。このように、内側のスコープで同じ名前の変数を定義すると、外側の変数が遮蔽（シャドーイング）されます。

グローバルスコープまでの流れ

スコープチェーンは、特定のスコープで変数が見つかるまで、次々に外側のスコープをたどりますが、最終的にグローバルスコープまで到達します。グローバルスコープはすべてのスコープの親スコープであり、どの関数やブロックからも参照可能です。ただし、できるだけグローバルスコープへの依存を避けることが推奨されます。

まとめ

JavaScriptにおけるスコープチェーンは、変数や関数がどのスコープで定義されているかに基づいてアクセスの順序を制御する重要な仕組みです。内側のスコープから外側のスコープに順に変数を検索し、必要な変数を見つけます。スコープチェーンを理解することで、JavaScriptの変数管理がより効果的になり、予期せぬバグを防ぐことができます。

スポンサーリンク