01 How JavaScript works & Execution context ?

🔥 01. How JavaScript Works – Overview

JavaScript is:

• Single-threaded → one task at a time

• Synchronous by default (but supports async with Web APIs)

• Interpreted/Just-in-time compiled (V8 engine etc.)

JavaScript runs inside the JavaScript Engine (e.g., V8 in Chrome, SpiderMonkey in Firefox). It consists of:

• Call Stack

• Memory Heap

• Execution Context

• Event Loop

---

⚙️ JavaScript Engine Workflow

1. Parsing Phase (Compile Time)

   • Code is parsed into tokens

   • Converted into Abstract Syntax Tree (AST)

   • Variables and function declarations are hoisted

2. Execution Phase

   • JS runs top-to-bottom

   • Creates Execution Contexts for each scope

   • Handles function calls using the Call Stack

---

🧠 Execution Context (EC) – Core Concept

An Execution Context is an environment where JavaScript code is evaluated and executed.

There are 3 main types:

1. Global Execution Context (GEC)

2. Function Execution Context (FEC)

3. Eval Execution Context (rarely used)❌

---

🔹 Global Execution Context

Created when the JS file is loaded:

• Creates a global object (window in browsers, global in Node.js)

• Binds this to global object

• Hoists global variables and functions

Example:

var a = 10;

function greet() {
  console.log("Hello");
}

→ GEC is created, where:

• a is added to memory

• greet function is hoisted

---

🔹 Function Execution Context

Created every time a function is invoked:

• Has its own Variable Environment (VE)

• Arguments, local variables, inner functions live here

• Forms part of the Call Stack

Example:

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

add(3, 4);

When add(3, 4) is called:

1. New FEC is created

2. Parameters x=3, y=4, local total=7

3. FEC is popped off after return

---

📦 What’s Inside an Execution Context?

Every EC contains:

1. Variable Environment (VE)

   • var, function declarations

   • arguments object

2. Lexical Environment

   • Tracks where variables/functions were defined

   • Helps with scope chain

3. this Binding

   • Depends on how a function is called

---

🔁 Execution Stack (Call Stack)

The Call Stack manages Execution Contexts in a LIFO manner:

function one() {
  two();
}
function two() {
  console.log("2");
}
one();

Call Stack Flow:

Global EC
→ one() EC
  → two() EC
    → console.log() EC

Each function creates a new EC which is pushed onto the stack, then popped off when done.

---

🧠 Summary

---

🔍 Visual Mind Map

JavaScript Engine
├─ Memory Heap
├─ Call Stack
│  ├─ GEC
│  ├─ FEC
│  └─ Eval EC (rare)
└─ Event Loop (later topic)