Global, Function, and Block Scope in JavaScript

Global, Function, and Block Scope in JavaScript

JavaScript has three main scope types. Understanding each is essential for writing bug-free code.

Global Scope

Variables declared outside any function or block. Accessible everywhere.

const appName = "MyApp"; // global

function foo() {
  console.log(appName); // accessible
}
``
- `var` globals become properties of `window` (browsers).
- `let`/`const` globals live in a separate global lexical environment.
- In ES modules, top-level variables are module-scoped, not global.

### Function Scope

Variables declared inside a function. Accessible only inside that function.

```js
function foo() {
  var functionVar = "F";
  let functionLet = "L";
  console.log(functionVar, functionLet); // accessible
}
foo();
console.log(functionVar); // ReferenceError
``
Both `var` and `let`/`const` are function-scoped when declared inside a function. The difference is block scope (below).

### Block Scope

Variables declared with `let` and `const` inside a block (`{}`). Accessible only inside that block.

```js
if (true) {
  let blockLet = "BL";
  const blockConst = "BC";
  var blockVar = "BV"; // NOT block-scoped
}
console.log(blockVar); // "BV" (leaked out)
console.log(blockLet); // ReferenceError
``
`var` ignores block boundaries. `let` and `const` respect them.

### How `var`, `let`, and `const` Behave in Each Scope

| Declaration | Global | Function | Block |
|---|---|---|---|
| `var` | Property of `window` | Function-scoped | Leaks out of block |
| `let` | Global lexical env | Function-scoped | Block-scoped |
| `const` | Global lexical env | Function-scoped | Block-scoped |

### Practical Implications

- **Loops**: `var` in a loop leaks; `let` creates a fresh binding per iteration (fixes closure bugs).
- **Conditionals**: `var` inside an `if` leaks; `let` stays inside.
- **Modules**: top-level `let`/`const`/`var` are module-scoped (not global).

### Best Practice

- Use `const` by default.
- Use `let` when you need to reassign.
- Avoid `var` in modern code.
- Keep variables in the tightest scope possible.

### The Takeaway

JS has global, function, and block scope. `var` is function-scoped and leaks out of blocks. `let` and `const` are block-scoped and stay inside blocks. In modules, top-level variables are module-scoped. Use `const`/`let` and keep variables in the tightest scope.