JavaScriptの基礎 実行コンテキストとスコープについて
対象者
- JavaScriptのコード実行環境の用語で「グローバル ●●」や「関数 ●●」などが複数存在し、こんがらがっている方（自分）
- JavaScript初学者（基礎からしっかり学びたい方）
実行コンテキスト
実行コンテキストには変数や関数が定義されている環境が保存されており、その環境を使用してJavaScriptコードは動作します。また、JavaScriptコードの出力結果は、コードを実行する際の環境や状況（実行コンテキスト）によって異なります。
実行コンテキストは3種類存在します。
-
グローバルコンテキスト
ユーザーのコード本体(main body)を実行する際に作成されるコンテキストです。
→JavaScriptの関数の外側に存在するあらゆるコードは、それが実行される際にグローバルコンテキストが作成されます。 -
関数コンテキスト
関数が実行されるときに生み出されるコンテキストです。
→ 各関数は、それ自身の実行コンテキスト内で実行されます。 -
evalコンテキスト
現在は非推奨な関数であるeval()関数によって作成される実行コンテキストです。
スコープ
スコープとは、変数や関数がどのような範囲でアクセス可能かを定義しているものです。
スコープには5種類存在します。
- グローバルスコープ
→script直下のvarやfunction - スクリプトスコープ
→script直下のletやconst - 関数スコープ
→ 関数functionに囲まれた{}内のletやconst - ブロックスコープ
→ ブロック{}内のletやconst - モジュールスコープ
→ モジュールを使用した際のスクリプトスコープ
実行コンテキストとスコープの関係性について
実行コンテキストとスコープはお互いに独立した概念になります。
実行コンテキストは「実行する環境」で、スコープは「コードから見える範囲」だと理解してください。
実行コンテキストが生成されると、それに対応するスコープが生成されます。
例えば、グローバル実行コンテキストが生成されると、グローバルスコープが生成されます。
また、関数が実行されるとその関数スコープが生成されます。
コンテキストが生成されると、そのスコープの有効範囲（レキシカルスコープ）が決定します。
おまけ
ChatGPTに「JavaScriptのスコープを現実世界のものに例えると何？」って質問したところ、以下の回答が得られました。
現実世界で例えると、JavaScript のスコープは、家の中と家の外をイメージすることができます。
家の中で定義されたもの（例えば、家の中にあるテレビや本棚など）は、家の中でしかアクセスできません。一方、家の外で定義されたもの（例えば、家の外にある車や玄関のボタンなど）は、家の中からでも家の外からでもアクセスできます。
同様に、JavaScript では、ローカルスコープで定義された変数や関数は、そのスコープ内（家の中）でしかアクセスできず、グローバルスコープで定義された変数や関数は、どこからでもアクセスできます（家の中からでも家の外からでもアクセスできます）。
うーん、わかったような、わからないような、、、
Discussion