01. How JavaScript works and Execution Context.md

How JavaScript works and Execution Context

How JavaScript Works

JavaScript is:

• Single-threaded → Only one command is executed at a time.
• Synchronous by default → Code runs line-by-line, unless asynchronous features (promises, setTimeout, async/await) are used.
• Interpreted / Just-in-Time Compiled → The JS engine parses and executes code quickly.

Execution happens inside a JavaScript engine (like Chrome's V8 or Node.js's V8-based engine), which has two main parts:

• Memory Heap – Stores variables and function definitions.
• Call Stack – Keeps track of what function is currently running.

The Execution Context

Think of Execution Context (EC) as the environment in which JavaScript code is evaluated and executed. It determines:

• Which variables can be accessed
• The value of this
• How functions run and interact

Types of Execution Context

Global Execution Context (GEC)

• Created when the script starts running.
• Creates a global object (window in browsers, global in Node.js).
• Sets this to the global object (in non-strict mode).
• Only one GEC exists at any time.

Function Execution Context (FEC)

• Created whenever a function is invoked.
• Each function call gets its own context.
• Has access to:
  • Its own variables
  • Outer variables (via scope chain)
  • Global variables

Eval Execution Context

• Created by code inside eval() (rarely used in modern development).

Execution Context Lifecycle

Each EC is created in two phases:

Phase 1 – Creation Phase

• Scope Chain is established.
• Variables & functions are hoisted:
  • Variables declared with var are initialized to undefined.
  • Functions are fully hoisted with their definitions.
• this value is determined.

Phase 2 – Execution Phase

• Code is executed line by line.
• Variable values are assigned.
• Functions are invoked (which may create new FECs).

The Call Stack

JavaScript keeps track of execution contexts using the call stack.

• Global Execution Context is at the bottom.
• When a function is called → a new Function Execution Context is pushed onto the stack.
• When the function finishes → its EC is popped off the stack.

Example:

function first() {
  console.log('First');
  second();
}
function second() {
  console.log('Second');
}
first();

Call stack progression:

1. Push GEC → run script
2. first() called → push first FEC
3. second() called inside → push second FEC
4. second finishes → pop
5. first finishes → pop
6. GEC finishes → stack empty

Big Picture

Here's the mental model you can present in an interview:

"JavaScript runs in a single-threaded environment with a call stack and a memory heap. The code is executed inside an execution context, which provides the scope, variables, and value of this. When the script starts, the Global Execution Context is created, followed by Function Execution Contexts whenever functions are invoked. Execution contexts are managed in the call stack, with the creation and execution phases handling hoisting and code execution respectively."

Diagram (Good for Interviews)

 [Memory Heap]           [Call Stack]
 ┌─────────────┐        ┌───────────────┐
 │ Variables   │        │  second()     │ ← top
 │ Functions   │        │  first()      │
 └─────────────┘        │  GEC          │ ← bottom
                        └───────────────┘