👟

JavaScriptの基礎 実行コンテキストとスコープについて

2023/01/08に公開約1,800字

対象者

  • JavaScript のコード実行環境の用語で「グローバル ●●」や「関数 ●●」などが複数存在し、こんがらがっている方(自分)
  • JavaScript 初学者(基礎からしっかり学びたい方)

実行コンテキスト

実行コンテキストには変数や関数が定義されている環境が保存されており、その環境を使用して JavaScript コードは動作します。また、JavaScript コードの出力結果は、コードを実行する際の環境や状況(実行コンテキスト)によって異なります。

実行コンテキストは 3 種類存在します。

  • グローバルコンテキスト

    ユーザーのコード本体(main body)を実行する際に作成されるコンテキストです。
    →JavaScript の関数の外側に存在するあらゆるコードは、それが実行される際にグローバルコンテキストが作成されます。

  • 関数コンテキスト

    関数が実行されるときに生み出されるコンテキストです。
    → 各関数は、それ自身の実行コンテキスト内で実行されます。

  • eval コンテキスト
    現在は非推奨な関数である eval() 関数によって作成される実行コンテキストです。

スコープ

スコープとは、変数や関数がどのような範囲でアクセス可能かを定義しているものです。

スコープには 5 種類存在します。

  • グローバルスコープ
    →script 直下のvarfunction
  • スクリプトスコープ
    →script 直下のletconst
  • 関数スコープ
    → 関数functionに囲まれた{}内のletconst
  • ブロックスコープ
    → ブロック{}内のletconst
  • モジュールスコープ
    → モジュールを使用した際のスクリプトスコープ

実行コンテキストとスコープの関係性について

実行コンテキストとスコープはお互いに独立した概念になります。

実行コンテキストは「実行する環境」で、スコープは「コードから見える範囲」だと理解してください。
実行コンテキストが生成されると、それに対応するスコープが生成されます。

例えば、グローバル実行コンテキストが生成されると、グローバルスコープが生成されます。
また、関数が実行されるとその関数スコープが生成されます。
コンテキストが生成されると、そのスコープの有効範囲(レキシカルスコープ)が決定します。

おまけ

ChatGPT に「JavaScript のスコープを現実世界のものに例えると何?」って質問したところ、以下の回答が得られました。

現実世界で例えると、JavaScript のスコープは、家の中と家の外をイメージすることができます。

家の中で定義されたもの(例えば、家の中にあるテレビや本棚など)は、家の中でしかアクセスできません。一方、家の外で定義されたもの(例えば、家の外にある車や玄関のボタンなど)は、家の中からでも家の外からでもアクセスできます。

同様に、JavaScript では、ローカルスコープで定義された変数や関数は、そのスコープ内(家の中)でしかアクセスできず、グローバルスコープで定義された変数や関数は、どこからでもアクセスできます(家の中からでも家の外からでもアクセスできます)。

うーん、わかったような、わからないような、、、

参考資料

GitHubで編集を提案

Discussion

ログインするとコメントできます