JavaScript Execution Context
📜 An Execution Context (EC) is created when a JavaScript program runs, acting as a "big box" containing two key components: the Memory Component (or Variable Environment) and the Code Component (or Thread of Execution).
📌 This EC is fundamental, as "JavaScript isn't possible without this beautiful Execution Context", serving as the environment where all JavaScript code is executed.

Phases of Execution Context
⚡ Each Execution Context is created in two distinct phases: Phase 1: Memory Creation Phase (also known as the Memory Allocation Phase) and Phase 2: Code Execution Phase.
📝 In Phase 1, JavaScript scans the code and allocates memory for all variables and functions. Variables are initialized with the special value `undefined`, while functions have their entire code stored in memory.
🚀 In Phase 2, JavaScript executes the code line by line. Variable placeholders (`undefined`) are replaced with their actual values, and computations are performed.

Function Invocation & Nested Execution
🔄 When a function is invoked, a brand-new Execution Context is created specifically for that function, nested within the current EC, and it also undergoes its own two-phase creation.
📤 The `return` keyword is crucial; it signals the function's completion, returns control (and often a value) to the calling Execution Context, and causes the function's EC to be deleted from memory.
🧩 Functions act like "mini-programs," receiving arguments (values passed in) that map to parameters (variables defined in the function signature) within their own EC.

Call Stack Management
🏗️ The JavaScript engine uses a Call Stack (also known as Execution Context Stack, Program Stack, Control Stack, Runtime Stack, or Machine Stack) to efficiently manage the creation, order of execution, and deletion of Execution Contexts.
⬆️ When an EC is created (e.g., Global EC on program start, or a new EC for a function invocation), it is "pushed" onto the stack.
⬇️ Once an EC completes its execution (e.g., a function returns), it is "popped" off the stack, and control returns to the EC below it.
🧹 The JavaScript program finishes when the Call Stack becomes empty, signifying the deletion of the Global Execution Context.

Key Points & Insights
➡️ Understanding the Execution Context and Call Stack is fundamental to comprehending how JavaScript code runs "behind the scenes" and manages its execution flow.
➡️ The two-phase creation of an Execution Context (Memory Allocation then Code Execution) explains behaviors like variable hoisting and the initial `undefined` state for variables.
➡️ The Call Stack's Last-In, First-Out (LIFO) mechanism is vital for orderly execution and managing nested function calls, ensuring that the most recently called function is executed first.

📸 Video summarized with SummaryTube.com on Jul 30, 2025, 05:22 UTC