Namaste JS: An Interactive Infographic

Episode 1: The Execution Context

Everything in JavaScript happens inside an **Execution Context (EC)**. Think of it as the environment where your code is evaluated. Every EC has two essential components.

🧠

Memory Component

Also known as the Variable Environment. The storage area where JS holds all your variables and functions as key-value pairs. Populated before your code runs.

⚙️

Code Component

Also known as the Thread of Execution. The single "worker" that executes your code line-by-line. This makes JS synchronous and single-threaded by nature.

Episode 2 & 3: The Two-Phase Process & Hoisting

An EC is created in two phases: Memory Creation and Code Execution. This simulator demonstrates this process, which is the reason for a core JS behavior known as **Hoisting**. Click "Next Step" to visualize it.

Your Code:

Behind the Scenes:

🧠 Memory (Variable Environment)

🖥️ Output (Console)

Episode 4, 5 & 7: The Call Stack, Global Object & Scope Chain

This animation visualizes how JavaScript manages function invocations using the **Call Stack**. When a function is called, its EC is pushed onto the stack. The base is the **Global EC**, associated with the **Global Object**. The engine uses the **Scope Chain** to find variables. Click "Play Animation" to see the flow.

Sample Code:

Execution Call Stack

Console Output

Episode 6, 8 & 9: Block Scope, TDZ & Variable Differences

Explore the crucial differences between `var`, `let`, and `const`. This simulator demonstrates **Hoisting**, **Block Scope**, the **Temporal Dead Zone (TDZ)**, and various JavaScript **Error Types**. Choose a scenario and click "Run" to see how the engine behaves and understand variable accessibility.

Select a Scenario:

Result & Explanation:

Episode 10 & 12: Closures, Data Hiding & Garbage Collection

A **closure** is a function bundled with its lexical environment. An inner function "remember" its outer scope, even after the outer function has finished execution. This powerful feature enables patterns like data privacy. Observe a counter whose `count` variable is private and can only be changed or accessed via the returned closure functions.

Counter Factory Code:

Independent Counter Instance:

Interaction & State:

The `count` variable exists only within the closure's scope. It's truly private and can't be directly accessed. Its state persists across calls. Notice how `counter` and `anotherCounter` maintain their own independent `count` variables.

This demonstrates how closures maintain state. The memory for `count` is not garbage collected because the `increment` and `getValue` functions still hold a reference to it.

Episode 14, 15 & 17: The Event Loop & Concurrency

JavaScript handles asynchronous tasks like `setTimeout` and `Promise` without blocking its single thread. It offloads tasks to Browser APIs. When ready, tasks go to the **Microtask Queue** (for Promises, higher priority) or the **Callback Queue** (for `setTimeout`). The **Event Loop** pushes tasks to the Call Stack for execution when it's empty (Microtasks first!).

Code to Execute:

Call Stack

Microtask Queue

Callback Queue

Episode 13, 18 & 19: Higher-Order Functions

A **Higher-Order Function (HOF)** takes another function as an argument or returns a function. This is possible because functions are **first-class citizens** in JavaScript. `map`, `filter`, and `reduce` are powerful HOFs for array manipulation. Interact with the demo below to see them in action.

Original Data (`users` array):

Code Snippet:

Result:

Result will be shown here after you click a button.