Scope in ES Modules vs Scripts in JavaScript

Scope in ES Modules vs Scripts in JavaScript

ES modules (import/export) change how top-level scope works compared to classic scripts. This affects globals, this, and variable visibility.

Classic Script Scope

In a classic <script> tag or a CommonJS file:

• Top-level var becomes a property of window (browsers).
• Top-level let/const live in a global lexical environment (not on window).
• Top-level this is the global object (window in browsers).
• Multiple scripts share the same global scope.

// script.js (classic)
var x = 5;
console.log(window.x); // 5
console.log(this === window); // true
``
### ES Module Scope

In an ES module (`<script type="module">` or a file with `import`/`export`):

- Top-level `var`, `let`, `const`, and `class` are **module-scoped**, not global.
- They are only accessible outside the module if explicitly exported.
- Top-level `this` is `undefined`.
- Each module has its own top-level scope; modules do not share globals.

```js
// module.js (ES module)
var x = 5;
console.log(window.x); // undefined (x is module-scoped)
console.log(this);     // undefined
export const y = 10;   // y is accessible to importers
``
### Key Differences

| Feature | Classic Script | ES Module |
|---|---|---|
| Top-level `var` | Property of `window` | Module-scoped |
| Top-level `let`/`const` | Global lexical env | Module-scoped |
| Top-level `this` | `window` | `undefined` |
| Strict mode | Optional | Automatic |
| Shared globals | Yes (across scripts) | No (each module is isolated) |

### Why This Matters

- **No global pollution**: modules keep their top-level variables private by default.
- **Safer `this`**: `undefined` prevents accidental global mutation.
- **Explicit exports**: you must opt-in to share variables.
- **Strict mode by default**: catches more bugs.

### Practical Implications

- If you need the global object in a module, use `globalThis`.
- If you need to share a value across modules, `export` it.
- If you need a truly global variable (rare), attach to `globalThis`.

### The Takeaway

ES modules have their own top-level scope. Top-level variables are module-scoped, not global. Top-level `this` is `undefined`. Strict mode is automatic. Use `export` to share values, `globalThis` for the global object, and prefer modules over classic scripts.