How Hoisting works internally?

🔹What is Hoisting?

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope during the memory creation phase, before code execution.

🔹How Hoisting Works Internally

JS code runs in two phases:

1. Memory Creation Phase (Hoisting happens here)

During the memory creation phase, JavaScript parses the code and allocates memory for variable and function declarations, storing them inside the execution context before code execution begins.

Or

In simple terms, JavaScript scans the code and then allocates memory for variables, functions etc and then stores them in memory.

• JS scans the code

• Allocates memory for:

  • Variables
  • Functions

• Stores them in memory

2. Execution Phase

• Code runs line by line

• Assignments happen

• Functions are executed

---

🔹Types of Hoisting in JavaScript

• var hoisting

• let hoisting

• const hoisting

• Function declaration hoisting

• Function expression hoisting

• Class hoisting

1. var Hoisting (Fully Hoisted)

console.log(a);
var a = 10;

Internal:
var a; // undefined

✔ Declaration is hoisted
✔ Initialized with undefined

---

2. let and const Hoisting (Hoisted but NOT initialized)

console.log(b);
let b = 20;

Error:
ReferenceError: Cannot access 'b' before initialization

---

console.log(c);
const c = 30;
❌ Error:

ReferenceError: Cannot access 'c' before initialization

let and const is hoisted, But placed in Temporal Dead Zone (TDZ)

🔥 Temporal Dead Zone (TDZ)
TDZ = time between: entering scope and variable initialization

// TDZ starts
console.log(b); // ❌ error
let b = 20;
// TDZ ends

let is hoisted but not initialized, and accessing it before declaration causes a ReferenceError due to TDZ.

---

3. Function Declaration Hoisting (Fully Hoisted)

sayHello();

function sayHello() {
  console.log("Hello!");
}

Internally:
sayHello → function reference

---

4. Function Expression Hoisting

sayHi();

var sayHi = function () {
  console.log("Hi");
};

TypeError: sayHi is not a function

Why?
-> sayHi is hoisted as undefined
-> Calling undefined() ❌

sayHi();
const sayHi = function () {
  console.log("Hi");
};

ReferenceError (TDZ)

Only function declarations are fully hoisted, not function expressions.

---

🔹Execution Context

When JavaScript runs your code, it does not execute it line by line immediately.

It does two phases for every execution context:

1. Memory Creation Phase (also called Creation / Hoisting phase)
2. Execution Phase

What is an Execution Context?

Execution Context = an environment where JavaScript code is evaluated and executed

Think of it like a box created by JS to run code.

Each execution context contains two main things:

1. Memory (Variable Environment) ⇒ Variables + Functions stored here
2. Code (Thread of Execution) ⇒ Code executes line by line

---

👉 Types of Execution Context

1. Global Execution Context (GEC)
   – Created when the program starts
   – Only one

2. Function Execution Context (FEC)
   – Created each time a function is called

---

👉 Memory Component Stores

During memory creation phase:

• Variables
• Function declarations
• Function parameters
• Scope references

---

👉 Where This Memory Lives Physically?

Stack = where execution happens
Heap = where data lives

Heap Memory

• Large and unstructured
• Stores:
  • Objects
  • Functions
  • Closures
  • Complex data

Stack Memory

• Fast and LIFO ordered
• Stores:
  • Execution contexts
  • Primitive values (often)
  • References (addresses) to heap

---

👉 Who Gives This Memory?

JavaScript Engine

Examples:

• V8 (Chrome, Node.js)
• SpiderMonkey (Firefox)
• JavaScriptCore (Safari)

The JS Engine:

• Allocates memory
• Manages memory
• Frees memory (Garbage Collection)

---

🔹 Internally What Happens?

When JS runs:

Step 1 → Engine creates Execution Context

Step 2 → Allocates memory for variables/functions

Step 3 → Runs code

---

🔥 Real Flow

Browser / Node
   ↓
JavaScriptEngine(V8 etc.)
   ↓
Creates Execution Context
   ↓
AllocatesMemory(Hoisting Phase)
   ↓
Executes Code

Example:

var a = 10;
let b = 20;
const c = 30;

function add(x, y) {
  var sum = x + y;
  return sum;
}

let result = add(2, 3);

STEP 1. Global Execution Context (GEC) is created

• GEC is pushed into the CALL STACK
• Memory Creation Phase (inside GEC)

🔹What goes to STACK memory?

Primitive variables

var a;
let b;
const c;
let result;

Stored in stack memory (inside GEC):

a      → undefined
b      →<uninitialized>
c      →<uninitialized>
result →<uninitialized>

🔹 What goes to HEAP memory?

Function declaration

functionadd(x, y) { ... }

• Function object is stored in heap
• Stack stores reference (address) to it

STACK (GEC)           HEAP
─────────────        ─────────────
add  →0x123  ───▶function add(){...}

STEP 2: Execution Phase starts

All primitives → stored directly in STACK

STACK
a →10
b →20
c →30

STEP 3: Function call happens

let result =add(2,3);

🔹What happens internally?

• New Function Execution Context (FEC) created

• Pushed into CALL STACK
  

CALL STACK
────────────
|  FEC(add)|
|    GEC|
────────────

---

🔹 Function Execution Context Memory

Parameters & local variables

x =2
y =3
sum =undefined

All are primitives → STACK

STACK (FEC)
x   →2
y   →3
sum → undefined

Execution inside function

sum = x + y;// 5
return sum;

• sum becomes 5
• Value returned to global context

Function ends

❌ Function Execution Context is popped from stack

CALL STACK
──────────
|  GEC   |
──────────

Returned value assigned:

result → 5   (STACK)

---