Execution Context
Before learning closures, hoisting, or the call stack, you need to know where JavaScript code actually runs. The answer is the Execution Context.
Definition
An execution context is a container in which JavaScript code is evaluated and executed. Everything in JavaScript happens inside one.
Analogy: think of a kitchen. It has a storeroom for ingredients and tools, and a cook who follows the recipe step by step. The kitchen is the execution context. The storeroom is the memory, and the cook is the thread of execution.
Two Components
Every execution context has two parts:
| Component | Also called | What it does |
|---|---|---|
| Memory component | Variable Environment | Stores variables and functions as key-value pairs |
| Code component | Thread of Execution | Runs the code one line at a time |
var n = 2;function square(num) {var result = num * num;return result;}var square2 = square(n);
Here is how this program is stored in the memory component of the global execution context:
| Key | Value |
|---|---|
n | the value 2 |
square | the whole function code |
square2 | the result of calling square(n) |
The code component then walks through the lines from top to bottom, one by one.
Global and Function Execution Contexts
| Type | Created when | How many |
|---|---|---|
| Global execution context | The program starts | One per program |
| Function execution context | A function is called | A new one for every call |
So when square(n) runs in the example, JavaScript creates a new execution context for that call, with its own memory (num, result) and its own thread of execution. When the function returns, that context is removed. These contexts are tracked in the call stack, which is the next topic.
JavaScript Is Synchronous and Single-Threaded
This is the most important property of the thread of execution:
- Single-threaded: there is only one thread, so JavaScript can do one thing at a time.
- Synchronous: commands run in a specific order. The next line starts only after the current line finishes.
console.log("First");console.log("Second");console.log("Third");// Always prints: First, Second, Third
If one line takes a long time, everything after it waits. This is why a long-running loop can freeze a web page.
Summary
- An execution context is the container where JavaScript code runs.
- It has a memory component (variables and functions as key-value pairs) and a code component (the thread of execution, line by line).
- There is one global execution context, and each function call creates its own.
- JavaScript is synchronous and single-threaded: one command at a time, in order.
Interview Answer: What Is an Execution Context?
An execution context is the environment where JavaScript code is evaluated and executed. It has two parts: a memory component, also called the variable environment, which stores variables and functions as key-value pairs, and a code component, also called the thread of execution, which runs the code one line at a time.
When a program starts, JavaScript creates a global execution context, and every function call creates a new function execution context. JavaScript is a synchronous, single-threaded language, so it executes only one command at a time, in order.
The next topic is how an execution context is created in two phases: memory creation and code execution.