JavaScript Notes

How JavaScript Runs — Complete Guide to Execution, Call Stack & Event Loop

Learn exactly how JavaScript runs in the browser and Node.js. Covers execution context, call stack, event loop, Web APIs, callback queue — with diagrams and examples.

Introduction

Have you ever wondered what actually happens when you press "Enter" in the browser console, or when a webpage loads a JavaScript file? How does your code go from text characters to actual running instructions on your computer?

Understanding how JavaScript runs is one of the most important concepts for any JavaScript developer. It explains why some code runs in a certain order, why setTimeout behaves the way it does, and how JavaScript can be "non-blocking" even though it's single-threaded.

Think of it this way: if JavaScript is a car, then knowing how it runs is like understanding the engine — you don't need to build one from scratch, but knowing how it works makes you a far better driver.

Real World Analogy: The Restaurant Kitchen

Imagine JavaScript's execution model as a restaurant kitchen:

Example

┌─────────────────────────────────────────────────────────────────┐ │ RESTAURANT ANALOGY │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ Chef (Call Stack) = The single chef who cooks one dish │ │ at a time, in order │ │ │ │ Order Queue (Task Q.) = Pending orders waiting for the chef │ │ │ │ Specialized Staff = Web APIs (timer, delivery person, │ │ (Web APIs) etc.) handling side tasks │ │ │ │ Waiter (Event Loop) = Checks if chef is free, delivers │ │ next order from queue │ │ │ │ VIP Orders (Microtasks) = Priority orders that skip the │ │ regular queue │ │ │ │ The chef (JS) can only cook ONE thing at a time. │ │ But specialized staff work simultaneously in the background! │ │ │ └─────────────────────────────────────────────────────────────────┘

Step 1: The Execution Context

When JavaScript starts running your code, it creates an Execution Context — a container that holds all the information needed to run that piece of code.

There are two main types:

1. Global Execution Context (GEC)

Created when your script first loads. There is always exactly one GEC.

js example

// When this file loads, a Global Execution Context is created:
var siteName = "WoHoTech";    // stored in global memory
let lesson = "How JS Runs";   // stored in global memory

function greet(name) {        // function stored in global memory
  return "Hello, " + name;
}

console.log(greet("Student")); // Hello, Student

Output

Hello, Student

2. Function Execution Context (FEC)

Created every time a function is called. Each call creates a brand new context.

js example

function outer() {
  let x = 10;           // stored in outer's context
  
  function inner() {
    let y = 20;         // stored in inner's context
    console.log(x + y); // x found via scope chain
  }
  
  inner();              // new FEC created for inner()
}

outer();                // new FEC created for outer()
// After outer() finishes, its context is destroyed

Output

The Two Phases of Execution Context

Every execution context goes through two phases:

Example

┌───────────────────────────────────────────────────────────────┐ │ EXECUTION CONTEXT LIFECYCLE │ ├───────────────────────────────────────────────────────────────┤ │ │ │ PHASE 1: CREATION PHASE (before any code runs) │ │ ────────────────────────────────────────────── │ │ ✓ Creates the Variable Object (VO) │ │ ✓ Scans for function declarations → hoisted fully │ │ ✓ Scans for var declarations → set to undefined │ │ ✓ Sets up the scope chain │ │ ✓ Determines the value of "this" │ │ │ │ PHASE 2: EXECUTION PHASE (code runs line by line) │ │ ──────────────────────────────────────────────── │ │ ✓ Variables are assigned actual values │ │ ✓ Functions are called (new FECs created) │ │ ✓ Expressions are evaluated │ │ ✓ Results returned to caller │ │ │ └───────────────────────────────────────────────────────────────┘

This explains hoisting — why you can call a function before you write it:

js example

// This works! (function declaration is hoisted)
console.log(sayHello()); // "Hello!" — available before its definition

function sayHello() {
  return "Hello!";
}

// This does NOT work the same way
console.log(myVar); // undefined (var hoisted but not assigned yet)
var myVar = "I am here now";
console.log(myVar); // "I am here now"

Output

Hello!
undefined
I am here now

Step 2: The Call Stack

The Call Stack is the mechanism JavaScript uses to keep track of which function is currently running and what to return to when it's done.

Think of it like a stack of plates — you can only add or remove from the top.

Example

┌─────────────────────────────────────────────────────────────┐ │ CALL STACK VISUALIZATION │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Step 1: Script starts │ │ ┌───────────────┐ │ │ │ Global Context│ ← Always at the bottom │ │ └───────────────┘ │ │ │ │ Step 2: first() is called │ │ ┌───────────────┐ │ │ │ first() │ ← Top of stack (currently running) │ │ ├───────────────┤ │ │ │ Global Context│ │ │ └───────────────┘ │ │ │ │ Step 3: first() calls second() │ │ ┌───────────────┐ │ │ │ second() │ ← Top (currently running) │ │ ├───────────────┤ │ │ │ first() │ ← Waiting │ │ ├───────────────┤ │ │ │ Global Context│ │ │ └───────────────┘ │ │ │ │ Step 4: second() finishes, popped off │ │ ┌───────────────┐ │ │ │ first() │ ← Back to running │ │ ├───────────────┤ │ │ │ Global Context│ │ │ └───────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘

Let's see this in real code:

js example

function third() {
  console.log("Inside third()");
  console.trace(); // Shows the call stack at this moment!
}

function second() {
  console.log("Inside second()");
  third();
}

function first() {
  console.log("Inside first()");
  second();
}

first();
console.log("Back in global scope");

Output

Inside first()
Inside second()
Inside third()
Trace:
  at third (script.js:3)
  at second (script.js:8)
  at first (script.js:13)
  at script.js:17
Back in global scope

Stack Overflow — When the Stack Gets Too Full

js example

// This will cause a "Maximum call stack size exceeded" error
function infiniteLoop() {
  return infiniteLoop(); // calls itself forever — stack fills up!
}

// infiniteLoop(); // DON'T run this!

// CORRECT: Use recursion with a base case
function countdown(n) {
  if (n <= 0) {
    console.log("Blast off! 🚀");
    return;
  }
  console.log(n);
  countdown(n - 1); // base case will stop this eventually
}

countdown(5);

Output

5
4
3
2
1
Blast off! 🚀

Step 3: The Memory Heap

The Memory Heap is where JavaScript stores objects, arrays, and functions — anything that's not a simple primitive value.

js example

// Primitives: stored directly in the call stack (by value)
let a = 10;
let b = a;    // b gets a COPY of 10
b = 20;
console.log(a); // 10 — not affected by b's change
console.log(b); // 20

// Objects: stored in the heap (by reference)
let obj1 = { name: "Rahul" };
let obj2 = obj1; // obj2 points to the SAME object in heap
obj2.name = "Priya";
console.log(obj1.name); // "Priya" — both variables point to same object!
console.log(obj2.name); // "Priya"

Output

10
20
Priya
Priya

Example

┌─────────────────────────────────────────────────────────────┐ │ STACK vs HEAP MEMORY │ ├─────────────────────────────────────────────────────────────┤ │ │ │ CALL STACK (small, fast) │ MEMORY HEAP (large, slow) │ │ ───────────────────────── │ ───────────────────────── │ │ │ │ │ a = 10 (primitive) │ 0x001: { name: "Rahul" } │ │ b = 20 (primitive) │ 0x002: [1, 2, 3, 4] │ │ obj1 = 0x001 (reference)→──┼──▶ Object in heap │ │ arr = 0x002 (reference)→──┼──▶ Array in heap │ │ │ │ └─────────────────────────────────────────────────────────────┘

Step 4: Web APIs — The Secret Powers

JavaScript's engine is single-threaded, but the runtime environment (browser or Node.js) provides extra capabilities through Web APIs:

js example

// JavaScript itself can't do timers — that's a Web API!
console.log("1: Start");

// setTimeout is a Web API call — handled OUTSIDE the JS engine
setTimeout(function callback() {
  console.log("3: Timer fired (after 2000ms)");
}, 2000);

// fetch is also a Web API — network handled by browser
// fetch("https://api.example.com/data").then(...)

console.log("2: End of synchronous code");

// JS engine is now free — Web APIs handle timer in background

Output

1: Start
2: End of synchronous code
3: Timer fired (after 2000ms)

Example

┌────────────────────────────────────────────────────────────────┐ │ WEB API EXECUTION FLOW │ ├────────────────────────────────────────────────────────────────┤ │ │ │ 1. JS engine sees setTimeout() │ │ 2. Hands the timer to Web API environment │ │ 3. JS engine CONTINUES running (does not wait!) │ │ 4. After 2000ms, Web API pushes callback to Task Queue │ │ 5. Event Loop sees call stack is empty │ │ 6. Moves callback from queue to call stack │ │ 7. Callback runs! │ │ │ │ JS Engine │ Web APIs │ Task Queue │ Event Loop │ │ ───────── │ ───────── │ ────────── │ ────────── │ │ main() │ timer(2000ms) │ │ │ │ setTimeout ─────────────────▶ │ │ │ continues │ [counting...] │ │ │ │ console.log│ │ │ │ │ EMPTY ◀────│────────────────│──callback────│─────────────── │ │ │ [done!] │ │ │ │ callback() │ │ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────────────┘

Step 5: The Event Loop

The Event Loop is the heart of JavaScript's concurrency model. It continuously monitors:

Is the Call Stack empty?
Are there callbacks waiting in the Microtask Queue or Task Queue?

If yes and yes → move the next callback to the call stack.

Example

console.log("A"); // synchronous setTimeout(() => console.log("B"), 0); // Task Queue (even with 0ms!) Promise.resolve().then(() => console.log("C")); // Microtask Queue console.log("D"); // synchronous // What is the order?

Output

A
D
C
B

Why? Let's trace it:

Example

┌────────────────────────────────────────────────────────────────┐ │ EVENT LOOP EXECUTION ORDER │ ├────────────────────────────────────────────────────────────────┤ │ │ │ Execution Order: │ │ │ │ 1. console.log("A") → runs immediately (sync) → A │ │ 2. setTimeout(...) → goes to Web API → callback to │ │ Task Queue after 0ms │ │ 3. Promise.resolve() → callback goes to MICROTASK QUEUE │ │ 4. console.log("D") → runs immediately (sync) → D │ │ 5. Call stack EMPTY! │ │ 6. Event Loop checks MICROTASK QUEUE first (higher priority!) │ │ → runs Promise callback → C │ │ 7. Microtask queue empty. Check Task Queue: │ │ → runs setTimeout callback → B │ │ │ │ Priority: Sync code > Microtasks > Macro Tasks (setTimeout) │ │ │ └────────────────────────────────────────────────────────────────┘

Microtask Queue vs Task Queue (Critical Difference!)

Example

// Demonstrating priority differences console.log("--- START ---"); setTimeout(() => console.log("Task Queue: setTimeout"), 0); setTimeout(() => console.log("Task Queue: setTimeout 2"), 0); Promise.resolve() .then(() => { console.log("Microtask: Promise 1"); // This creates ANOTHER microtask — runs before setTimeout! return Promise.resolve(); }) .then(() => console.log("Microtask: Promise 2")); queueMicrotask(() => console.log("Microtask: queueMicrotask")); console.log("--- END ---");

Output

--- START ---
--- END ---
Microtask: Promise 1
Microtask: queueMicrotask
Microtask: Promise 2
Task Queue: setTimeout
Task Queue: setTimeout 2

Step 6: Synchronous vs Asynchronous Code

Understanding the difference is crucial to writing good JavaScript:

Example

// ─── SYNCHRONOUS: Runs top to bottom, one line at a time ─── console.log("Sync 1"); console.log("Sync 2"); console.log("Sync 3"); // Each line waits for the previous to finish

Output

Sync 1
Sync 2
Sync 3

Example

// ─── ASYNCHRONOUS: Does not block — continues while waiting ─── console.log("Start"); // These run "in the background" via Web APIs fetch("https://api.github.com/users/torvalds") .then(res => res.json()) .then(data => console.log("Got data:", data.name)); // runs later setTimeout(() => console.log("Timer done!"), 1000); console.log("End (I ran before the async stuff!)");

Output

Start
End (I ran before the async stuff!)
Timer done!       ← after 1 second
Got data: Linus Torvalds   ← after network request completes

The Evolution of Async: Callbacks → Promises → Async/Await

Example

// ─── CALLBACKS (Old Way) ─────────────────────────────────── function getUser_callback(id, callback) { setTimeout(() => { callback({ id, name: "Rahul" }); // call when done }, 500); } getUser_callback(1, function(user) { console.log("Callback:", user.name); }); // ─── PROMISES (Better Way) ──────────────────────────────── function getUser_promise(id) { return new Promise((resolve) => { setTimeout(() => resolve({ id, name: "Priya" }), 500); }); } getUser_promise(2) .then(user => console.log("Promise:", user.name)); // ─── ASYNC/AWAIT (Modern, Cleanest Way) ─────────────────── async function getUser_async(id) { const user = await new Promise((resolve) => { setTimeout(() => resolve({ id, name: "Amit" }), 500); }); console.log("Async/Await:", user.name); } getUser_async(3);

Output

Callback: Rahul
Promise: Priya
Async/Await: Amit

Step 7: How Node.js Runs JavaScript Differently

In the browser, Web APIs are provided by the browser environment. In Node.js, they come from the C++ bindings of the Node.js runtime:

Example

┌─────────────────────────────────────────────────────────────────┐ │ BROWSER vs NODE.JS RUNTIME COMPARISON │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ BROWSER NODE.JS │ │ ─────── ─────── │ │ V8 Engine ✓ V8 Engine ✓ │ │ Call Stack ✓ Call Stack ✓ │ │ Event Loop ✓ Event Loop ✓ │ │ Memory Heap ✓ Memory Heap ✓ │ │ │ │ DOM APIs ✓ DOM APIs ✗ │ │ window object ✓ window object ✗ │ │ localStorage ✓ localStorage ✗ │ │ Browser fetch ✓ Built-in fetch ✓ (v18+) │ │ XMLHttpRequest ✓ XMLHttpRequest ✗ │ │ │ │ File System ✗ File System (fs) ✓ │ │ OS access ✗ OS access (os) ✓ │ │ Child Processes ✗ Child Processes ✓ │ │ HTTP server ✗ HTTP server (http) ✓ │ │ global = window global = global │ │ │ └─────────────────────────────────────────────────────────────────┘

Example

// Node.js example — runs on the SERVER, not browser const fs = require("fs"); const http = require("http"); // Read a file asynchronously (non-blocking!) fs.readFile("data.txt", "utf-8", (err, data) => { if (err) { console.log("Error:", err.message); return; } console.log("File contents:", data); }); // This runs IMMEDIATELY while file is being read console.log("File read started, not waiting...");

Output

File read started, not waiting...
File contents: [contents of data.txt]

Common Mistakes Beginners Make

1. Expecting setTimeout(fn, 0) to Run Immediately

Example

// MISTAKE: Thinking 0ms means "right now" console.log("Before"); setTimeout(() => console.log("setTimeout 0ms"), 0); console.log("After"); // The 0ms callback goes to Task Queue and waits for call stack to clear!

Output

Before
After
setTimeout 0ms

2. Not Understanding Async Function Return Values

Example

// MISTAKE: Trying to use async result synchronously async function getData() { const result = await Promise.resolve(42); return result; } // WRONG: async function returns a Promise, not the value directly const value = getData(); console.log(value); // Promise { 42 } — NOT 42! // CORRECT: Await it or use .then() getData().then(v => console.log("Correct:", v)); async function correct() { const v = await getData(); console.log("Also correct:", v); } correct();

Output

Promise { <fulfilled>: 42 }
Correct: 42
Also correct: 42

3. Blocking the Event Loop

Example

// BAD: Long synchronous operation blocks everything function badHeavyComputation() { const start = Date.now(); while (Date.now() - start < 3000) {} // blocks for 3 seconds! console.log("Done computing (but blocked everything for 3s!)"); } // GOOD: Break into smaller chunks or use Web Workers async function goodHeavyComputation(n) { let result = 0; const CHUNK = 1000000; for (let i = 0; i < n; i++) { result += i; // Yield control back to event loop every chunk if (i % CHUNK === 0) { await new Promise(resolve => setTimeout(resolve, 0)); } } return result; } console.log("Good computation started..."); goodHeavyComputation(5000000).then(r => console.log("Result:", r)); console.log("Event loop is still responsive!");

Output

Good computation started...
Event loop is still responsive!
Result: 12499997500000

4. Callback Hell

Example

// BAD: Nested callbacks (Callback Hell / Pyramid of Doom) getUserFromDB(1, function(user) { getPostsByUser(user.id, function(posts) { getCommentsForPost(posts[0].id, function(comments) { getLikesForComment(comments[0].id, function(likes) { console.log("Got likes:", likes); // 4 levels deep — unreadable! }); }); }); }); // GOOD: Use async/await instead async function getRelatedData() { const user = await getUserFromDB(1); const posts = await getPostsByUser(user.id); const comments = await getCommentsForPost(posts[0].id); const likes = await getLikesForComment(comments[0].id); console.log("Got likes:", likes); // Clean, readable, flat! }

How JavaScript Code Executes: Complete Step-by-Step

Let's trace through a real example completely:

js example

let x = 10;

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n);
}

let result = square(x);
console.log("Result:", result);

Output

Result: 100

Step-by-step execution:

Example

┌─────────────────────────────────────────────────────────────────┐ │ STEP-BY-STEP EXECUTION TRACE │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 1. Global EC created → x=undefined, multiply=fn, square=fn │ │ 2. x = 10 assigned │ │ 3. multiply() stored in memory (not called yet) │ │ 4. square() stored in memory (not called yet) │ │ │ │ 5. square(10) called → new FEC pushed to call stack │ │ Stack: [Global, square(n=10)] │ │ │ │ 6. Inside square: multiply(10, 10) called │ │ Stack: [Global, square(n=10), multiply(a=10, b=10)] │ │ │ │ 7. Inside multiply: returns 10 * 10 = 100 │ │ Stack: [Global, square(n=10), multiply] ← multiply popped │ │ Stack: [Global, square(n=10)] │ │ │ │ 8. square returns 100 → result = 100 │ │ Stack: [Global, square] ← square popped │ │ Stack: [Global] │ │ │ │ 9. console.log("Result:", 100) executes │ │ 10. Program ends, Global EC cleared │ │ │ └─────────────────────────────────────────────────────────────────┘

Key Takeaways

Concept	What It Does	Why It Matters
Execution Context	Container for running code	Explains scope, hoisting, `this`
Call Stack	Tracks which function is running	Explains execution order, stack overflow
Memory Heap	Stores objects and functions	Explains reference vs value types
Web APIs	Extra capabilities from environment	Explains timers, fetch, DOM events
Event Loop	Moves callbacks when stack is empty	Explains async behavior
Task Queue	Holds setTimeout/setInterval callbacks	Macro tasks — lowest priority
Microtask Queue	Holds Promise callbacks	Higher priority than task queue

Interview Questions

Q1: What is the JavaScript event loop?

Answer: The event loop is the mechanism that enables JavaScript (a single-threaded language) to perform non-blocking operations. It continuously checks if the call stack is empty, and if so, moves the next callback from the microtask queue (first) or task queue (second) onto the call stack for execution.

Q2: What is the call stack in JavaScript?

Answer: The call stack is a LIFO (Last In, First Out) data structure that tracks function calls. When a function is called, it's pushed onto the stack. When it returns, it's popped off. JavaScript's single thread can only process one stack frame at a time.

Q3: What is the difference between the microtask queue and the task queue?

Answer: The microtask queue (for Promises, queueMicrotask) has higher priority than the task queue (for setTimeout, setInterval). After every task completes, ALL microtasks are processed before the event loop picks the next task. This ensures Promises resolve before the next timer fires.

Q4: What is an execution context?

Answer: An execution context is an environment where JavaScript code is evaluated and executed. It contains the variable environment, scope chain, and the this value. The Global Execution Context is created first; each function call creates a new Function Execution Context.

Q5: Why is JavaScript called single-threaded?

Answer: JavaScript has only one call stack — it can execute only one operation at a time. This prevents race conditions and simplifies programming, but could cause blocking. Web APIs and the event loop provide the illusion of concurrency by handling async operations in the background.

Q6: What happens when you call `setTimeout(fn, 0)`?

Answer: The callback is sent to the Web API, which after 0ms pushes it to the task queue. The event loop will only pick it up after the current call stack is empty AND all microtasks have been processed. So setTimeout(fn, 0) doesn't mean "immediately" — it means "as soon as possible after current execution."

Q7: What is a stack overflow in JavaScript?

Answer: A stack overflow occurs when the call stack exceeds its maximum size, usually from infinite recursion (a function calling itself without a base case). The error is "Maximum call stack size exceeded." It can be fixed by adding proper base cases to recursive functions.

Q8: What is hoisting in the context of execution context?

Answer: Hoisting happens during the creation phase of an execution context. Function declarations are fully hoisted (available immediately), var declarations are hoisted but initialized as undefined, and let/const are hoisted but remain in the Temporal Dead Zone until their declaration is reached.

Q9: What is the difference between browser JavaScript runtime and Node.js?

Answer: Both use the V8 engine and have a call stack, event loop, and memory heap. The difference is the Web APIs they provide: browsers give you DOM, localStorage, fetch, etc. Node.js gives you file system (fs), HTTP server (http), OS access, and child processes. Node.js doesn't have window, and browsers don't have process.

Q10: What causes a memory leak in JavaScript?

Answer: Memory leaks occur when objects are allocated but never garbage collected. Common causes: global variables that never get cleared, forgotten event listeners, closures holding references to large objects, timers that never clear. The garbage collector can only free objects with no living references.

Summary

JavaScript execution follows a precise order:

Execution Context is created (global first, then per function call)
Call Stack tracks the current execution — single-threaded, LIFO
Memory Heap stores objects and complex data
Web APIs handle async operations (timers, fetch, DOM events) outside the engine
Microtask Queue holds Promise callbacks — processed with highest priority
Task Queue holds macro callbacks (setTimeout) — lower priority
Event Loop continuously moves callbacks from queues to the call stack

Understanding this model explains every "weird" JavaScript behavior you'll ever encounter — from why setTimeout(fn, 0) doesn't run immediately, to why Promises resolve in a specific order.

What's Next?

In the next lesson, we'll go deeper into the JavaScript Engine — how V8 specifically parses, compiles, and optimizes your code using techniques like JIT compilation, hidden classes, and inline caching.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for How JavaScript Runs — Complete Guide to Execution, Call Stack & Event Loop.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, introduction, how, runs

Continue learning this concept

IntroductionYour First JavaScript Program — Hello World & Beyond Complete Guide 2026Learn to write your very first JavaScript program from scratch. Master console.log, alert, variables, and string operations with 8+ hands-on code examples. Perfect beginner guide with detailed explanations.IntroductionHistory of JavaScript — Complete Timeline from 1995 to 2026JavaScript ka poora itihas — from Brendan Eich IntroductionJavaScript Engine Explained — V8, JIT Compilation & How Code Gets FastDeep dive into JavaScript engines: how V8 parses, compiles, and optimizes your code. Learn about AST, JIT compilation, hidden classes, and inline caching with examples.IntroductionJavaScript Use Cases — 15 Things You Can Build with JavaScript (2026)What can you build with JavaScript? From web apps to AI, games, IoT, and serverless — 15+ real-world JavaScript use cases with working code examples and outputs.IntroductionJavaScript vs Other Languages — Complete Comparison Guide 2026JavaScript vs Python, Java, TypeScript, Go, C++, PHP, Rust — which language to learn? Detailed comparison with code examples, tables, and career guidance for 2026.IntroductionWhat is JavaScript? Complete BeginnerWhat is JavaScript? Learn what JavaScript is, how it works, key features, and why it

PreviousHistory of JavaScript — Complete Timeline from 1995 to 2026 NextJavaScript Engine Explained — V8, JIT Compilation & How Code Gets Fast

JavaScript Notes

How JavaScript Runs — Complete Guide to Execution, Call Stack & Event Loop

Learn exactly how JavaScript runs in the browser and Node.js. Covers execution context, call stack, event loop, Web APIs, callback queue — with diagrams and examples.

Introduction

Real World Analogy: The Restaurant Kitchen

Imagine JavaScript's execution model as a restaurant kitchen:

Example

Step 1: The Execution Context

When JavaScript starts running your code, it creates an Execution Context — a container that holds all the information needed to run that piece of code.

There are two main types:

1. Global Execution Context (GEC)

Created when your script first loads. There is always exactly one GEC.

js example

// When this file loads, a Global Execution Context is created:
var siteName = "WoHoTech";    // stored in global memory
let lesson = "How JS Runs";   // stored in global memory

function greet(name) {        // function stored in global memory
  return "Hello, " + name;
}

console.log(greet("Student")); // Hello, Student

Output

Hello, Student

2. Function Execution Context (FEC)

Created every time a function is called. Each call creates a brand new context.

js example

function outer() {
  let x = 10;           // stored in outer's context
  
  function inner() {
    let y = 20;         // stored in inner's context
    console.log(x + y); // x found via scope chain
  }
  
  inner();              // new FEC created for inner()
}

outer();                // new FEC created for outer()
// After outer() finishes, its context is destroyed

Output

The Two Phases of Execution Context

Every execution context goes through two phases:

Example

This explains hoisting — why you can call a function before you write it:

js example

// This works! (function declaration is hoisted)
console.log(sayHello()); // "Hello!" — available before its definition

function sayHello() {
  return "Hello!";
}

// This does NOT work the same way
console.log(myVar); // undefined (var hoisted but not assigned yet)
var myVar = "I am here now";
console.log(myVar); // "I am here now"

Output

Hello!
undefined
I am here now

Step 2: The Call Stack

The Call Stack is the mechanism JavaScript uses to keep track of which function is currently running and what to return to when it's done.

Think of it like a stack of plates — you can only add or remove from the top.

Example

Let's see this in real code:

js example

function third() {
  console.log("Inside third()");
  console.trace(); // Shows the call stack at this moment!
}

function second() {
  console.log("Inside second()");
  third();
}

function first() {
  console.log("Inside first()");
  second();
}

first();
console.log("Back in global scope");

Output

Inside first()
Inside second()
Inside third()
Trace:
  at third (script.js:3)
  at second (script.js:8)
  at first (script.js:13)
  at script.js:17
Back in global scope

Stack Overflow — When the Stack Gets Too Full

js example

// This will cause a "Maximum call stack size exceeded" error
function infiniteLoop() {
  return infiniteLoop(); // calls itself forever — stack fills up!
}

// infiniteLoop(); // DON'T run this!

// CORRECT: Use recursion with a base case
function countdown(n) {
  if (n <= 0) {
    console.log("Blast off! 🚀");
    return;
  }
  console.log(n);
  countdown(n - 1); // base case will stop this eventually
}

countdown(5);

Output

5
4
3
2
1
Blast off! 🚀

Step 3: The Memory Heap

The Memory Heap is where JavaScript stores objects, arrays, and functions — anything that's not a simple primitive value.

js example

// Primitives: stored directly in the call stack (by value)
let a = 10;
let b = a;    // b gets a COPY of 10
b = 20;
console.log(a); // 10 — not affected by b's change
console.log(b); // 20

// Objects: stored in the heap (by reference)
let obj1 = { name: "Rahul" };
let obj2 = obj1; // obj2 points to the SAME object in heap
obj2.name = "Priya";
console.log(obj1.name); // "Priya" — both variables point to same object!
console.log(obj2.name); // "Priya"

Output

10
20
Priya
Priya

Example

Step 4: Web APIs — The Secret Powers

JavaScript's engine is single-threaded, but the runtime environment (browser or Node.js) provides extra capabilities through Web APIs:

js example

// JavaScript itself can't do timers — that's a Web API!
console.log("1: Start");

// setTimeout is a Web API call — handled OUTSIDE the JS engine
setTimeout(function callback() {
  console.log("3: Timer fired (after 2000ms)");
}, 2000);

// fetch is also a Web API — network handled by browser
// fetch("https://api.example.com/data").then(...)

console.log("2: End of synchronous code");

// JS engine is now free — Web APIs handle timer in background

Output

1: Start
2: End of synchronous code
3: Timer fired (after 2000ms)

Example

Step 5: The Event Loop

The Event Loop is the heart of JavaScript's concurrency model. It continuously monitors:

Is the Call Stack empty?
Are there callbacks waiting in the Microtask Queue or Task Queue?

If yes and yes → move the next callback to the call stack.

Example

Output

A
D
C
B

Why? Let's trace it:

Example

Microtask Queue vs Task Queue (Critical Difference!)

Example

Output

--- START ---
--- END ---
Microtask: Promise 1
Microtask: queueMicrotask
Microtask: Promise 2
Task Queue: setTimeout
Task Queue: setTimeout 2

Step 6: Synchronous vs Asynchronous Code

Understanding the difference is crucial to writing good JavaScript:

Example

// ─── SYNCHRONOUS: Runs top to bottom, one line at a time ─── console.log("Sync 1"); console.log("Sync 2"); console.log("Sync 3"); // Each line waits for the previous to finish

Output

Sync 1
Sync 2
Sync 3

Example

Output

Start
End (I ran before the async stuff!)
Timer done!       ← after 1 second
Got data: Linus Torvalds   ← after network request completes

The Evolution of Async: Callbacks → Promises → Async/Await

Example

Output

Callback: Rahul
Promise: Priya
Async/Await: Amit

Step 7: How Node.js Runs JavaScript Differently

In the browser, Web APIs are provided by the browser environment. In Node.js, they come from the C++ bindings of the Node.js runtime:

Example

Output

File read started, not waiting...
File contents: [contents of data.txt]

Common Mistakes Beginners Make

1. Expecting setTimeout(fn, 0) to Run Immediately

Example

Output

Before
After
setTimeout 0ms

2. Not Understanding Async Function Return Values

Example

Output

Promise { <fulfilled>: 42 }
Correct: 42
Also correct: 42

3. Blocking the Event Loop

Example

Output

Good computation started...
Event loop is still responsive!
Result: 12499997500000

4. Callback Hell

Example

How JavaScript Code Executes: Complete Step-by-Step

Let's trace through a real example completely:

js example

let x = 10;

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n);
}

let result = square(x);
console.log("Result:", result);

Output

Result: 100

Step-by-step execution:

Example

Key Takeaways

Concept	What It Does	Why It Matters
Execution Context	Container for running code	Explains scope, hoisting, `this`
Call Stack	Tracks which function is running	Explains execution order, stack overflow
Memory Heap	Stores objects and functions	Explains reference vs value types
Web APIs	Extra capabilities from environment	Explains timers, fetch, DOM events
Event Loop	Moves callbacks when stack is empty	Explains async behavior
Task Queue	Holds setTimeout/setInterval callbacks	Macro tasks — lowest priority
Microtask Queue	Holds Promise callbacks	Higher priority than task queue

Interview Questions

Q1: What is the JavaScript event loop?

Q2: What is the call stack in JavaScript?

Q3: What is the difference between the microtask queue and the task queue?

Q4: What is an execution context?

Q5: Why is JavaScript called single-threaded?

Q6: What happens when you call `setTimeout(fn, 0)`?

Q7: What is a stack overflow in JavaScript?

Q8: What is hoisting in the context of execution context?

Q9: What is the difference between browser JavaScript runtime and Node.js?

Q10: What causes a memory leak in JavaScript?

Summary

JavaScript execution follows a precise order:

Execution Context is created (global first, then per function call)
Call Stack tracks the current execution — single-threaded, LIFO
Memory Heap stores objects and complex data
Web APIs handle async operations (timers, fetch, DOM events) outside the engine
Microtask Queue holds Promise callbacks — processed with highest priority
Task Queue holds macro callbacks (setTimeout) — lower priority
Event Loop continuously moves callbacks from queues to the call stack

Understanding this model explains every "weird" JavaScript behavior you'll ever encounter — from why setTimeout(fn, 0) doesn't run immediately, to why Promises resolve in a specific order.

What's Next?

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for How JavaScript Runs — Complete Guide to Execution, Call Stack & Event Loop.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, introduction, how, runs

Continue learning this concept

PreviousHistory of JavaScript — Complete Timeline from 1995 to 2026 NextJavaScript Engine Explained — V8, JIT Compilation & How Code Gets Fast

Introduction

Real World Analogy: The Restaurant Kitchen

Step 1: The Execution Context

1. Global Execution Context (GEC)

2. Function Execution Context (FEC)

The Two Phases of Execution Context

Step 2: The Call Stack

Stack Overflow — When the Stack Gets Too Full

Step 3: The Memory Heap

Step 4: Web APIs — The Secret Powers

Step 5: The Event Loop

Microtask Queue vs Task Queue (Critical Difference!)

Step 6: Synchronous vs Asynchronous Code

The Evolution of Async: Callbacks → Promises → Async/Await

Step 7: How Node.js Runs JavaScript Differently

Common Mistakes Beginners Make

1. Expecting setTimeout(fn, 0) to Run Immediately

2. Not Understanding Async Function Return Values

3. Blocking the Event Loop

4. Callback Hell

How JavaScript Code Executes: Complete Step-by-Step

Key Takeaways

Interview Questions

Q1: What is the JavaScript event loop?

Q2: What is the call stack in JavaScript?

Q3: What is the difference between the microtask queue and the task queue?

Q4: What is an execution context?

Q5: Why is JavaScript called single-threaded?

Q6: What happens when you call setTimeout(fn, 0)?

Q7: What is a stack overflow in JavaScript?

Q8: What is hoisting in the context of execution context?

Q9: What is the difference between browser JavaScript runtime and Node.js?

Q10: What causes a memory leak in JavaScript?

Summary

What's Next?

Continue learning this concept

Introduction

Real World Analogy: The Restaurant Kitchen

Step 1: The Execution Context

1. Global Execution Context (GEC)

2. Function Execution Context (FEC)

The Two Phases of Execution Context

Step 2: The Call Stack

Stack Overflow — When the Stack Gets Too Full

Step 3: The Memory Heap

Step 4: Web APIs — The Secret Powers

Step 5: The Event Loop

Microtask Queue vs Task Queue (Critical Difference!)

Step 6: Synchronous vs Asynchronous Code

The Evolution of Async: Callbacks → Promises → Async/Await

Step 7: How Node.js Runs JavaScript Differently

Common Mistakes Beginners Make

1. Expecting setTimeout(fn, 0) to Run Immediately

2. Not Understanding Async Function Return Values

3. Blocking the Event Loop

4. Callback Hell

How JavaScript Code Executes: Complete Step-by-Step

Key Takeaways

Interview Questions

Q1: What is the JavaScript event loop?

Q2: What is the call stack in JavaScript?

Q3: What is the difference between the microtask queue and the task queue?

Q4: What is an execution context?

Q5: Why is JavaScript called single-threaded?

Q6: What happens when you call setTimeout(fn, 0)?

Q7: What is a stack overflow in JavaScript?

Q8: What is hoisting in the context of execution context?

Q9: What is the difference between browser JavaScript runtime and Node.js?

Q10: What causes a memory leak in JavaScript?

Summary

What's Next?

Continue learning this concept

Q6: What happens when you call `setTimeout(fn, 0)`?

Q6: What happens when you call `setTimeout(fn, 0)`?