【実務・中級編】モジュールスコープとグローバルスコープの境界：ブラウザのscriptタグとES Modulesのメモリ空間の違い – JavaScriptコア文法・モダン言語仕様と変数・関数解析バイブル

コードレビューをしていて、未だに散見される悪夢がある。グローバルスコープを汚染し、意図せぬ変数の上書きによって引き起こされる、再現性の低い偶発的なバグだ。

「なぜ動かないのか分からない」「別ファイルのスクリプトで書き換わっている」。
モダンなフロントエンド開発において、このようなプリミティブなスコープ汚染で時間を溶かすのはもう終わりにしよう。

今回は、ブラウザの伝統的な `

この場合、`api.js` で `let` や `const` を使わずに（あるいはうっかり `var` や変数名漏れで）宣言された変数は、すべてグローバルオブジェクトのプロパティ、あるいはグローバルLexical Environmentの最上位にブチ込まれる。

// api.js
var globalApiEndpoint = "https://api.example.com/v1";
// これはお行儀悪く window.globalApiEndpoint になり、どこからでも書き換え可能になる

V8のヒープメモリ上において、これらはアプリケーションが終了するまでガベージコレクション（GC）の対象外となり、メモリ効率の観点からも最悪のアンチパターンだ。

---

ここで救世主となるのが `