Module 01 // Core JavaScript

Variables & Scope

Module Objective

var, let, const, block vs function scope, global scope, lexical environment, hoisting, temporal dead zone

Mental Model Realtime Simulation

INTERACTIVE_CANVAS
Editor_Pane
Loading...
Console_Output
Waiting for output...

Practical Code Examples

// Example 1
// 1. Block Scope vs Function Scope
if (true) {
  var functionScoped = 'I leak out!';
  let blockScoped = 'I stay here';
  const alsoBlockScoped = 'Me too';
}

console.log(functionScoped); // "I leak out!"
// console.log(blockScoped); // ReferenceError
// console.log(alsoBlockScoped); // ReferenceError
💡 `var` ignores block boundaries (like if/for loops), leaking into the outer function. `let`/`const` stay safely inside.
// Example 2
// 2. The "Loop Problem" (Closure + Scope)
// OLD WAY (Buggy): var shares one 'i' variable
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log('var:', i), 100);
}
// Output: var: 3, var: 3, var: 3

// MODERN WAY (Fixed): let creates a new 'j' for each loop
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log('let:', j), 100);
}
// Output: let: 0, let: 1, let: 2
💡 Using `let` in loops ensures each iteration gets its own independent variable binding, fixing async bugs.
// Example 3
// 3. Const Mutability
const user = { name: "Subhajit" };

// Allowed: Modifying the object's contents
user.name = "Alex"; 
console.log(user.name); // "Alex"

// Forbidden: Replacing the object itself
// user = { name: "New Person" }; // TypeError: Assignment to constant variable
💡 `const` protects the *variable binding* (the arrow pointing to memory), not the *value* (the object itself).
// Example 4
// 4. Temporal Dead Zone (TDZ) Safety
console.log(myVar); // undefined (risky!)
var myVar = 10;

// console.log(myLet); // ReferenceError (safe!)
let myLet = 20;
💡 TDZ ensures you don't use variables before they are ready. `var` lets you access them too early (as undefined), which hides bugs.

Engine & Memory Architecture

Storage Locations:

  • Primitives (number, boolean, undefined): Stored directly in the Stack (fast access).
  • Objects/Functions: Stored in the Heap (large memory); the Stack holds a reference (pointer) to the Heap address.

Browser Execution Context:

  • Variables: Stored in the Variable Environment of the current Execution Context (Stack).
  • Closures: Stored in the Heap (so they survive after the function returns).

Hardware:

  • CPU: Executes the instructions (Stack operations are CPU-cache friendly).
  • RAM: Physical home for both Stack and Heap.

Creation Phase:

  1. Engine parses code.
  2. Allocates memory for variables (hoisting).
    • var → initialized to undefined.
    • let/const → uninitialized (TDZ).

Execution Phase:

  1. Code runs line-by-line.
  2. Assignments happen.
  3. Accessing TDZ variables throws errors.
NEXT_MODULE Data Types & Values