JavaScript Under the Hood
JavaScript Execution Context
The World Your Code Lives In
When the JavaScript engine starts to read your script, it doesn't just run it immediately. First, it creates a special environment for your code to live in. This environment is called an execution context.
Every line of JavaScript runs inside an Execution Context — this is the foundation of how JS works.
Think of an execution context as a container. It holds all the necessary information for your code to be executed, like the variables you've defined and the functions you've written. There are two main types of execution contexts.
The first is the Global Execution Context. This is the default or base context. It's created when your script is loaded for the first time. There's only one global context, and it exists as long as your application is running. It creates a global object (window in a browser, global in Node.js) and a special variable called this.
The second type is the Function Execution Context. A new one of these is created every single time a function is called. Each function gets its own private context, separate from the global one and from other functions. When the function finishes running, its execution context is destroyed.
The Two Phases of Execution
Creating an execution context isn't an instant process. It happens in two distinct phases: the Creation Phase and the Execution Phase.
Phase 1: Creation Phase The JavaScript engine scans through the code, sets up memory space for variables and functions, but doesn't execute anything.
During the creation phase, the engine is just getting everything ready. It allocates memory for all the variables and functions defined within that context. For variables declared with var, it initializes them with a value of undefined. For function declarations, it stores the entire function definition in memory. This process is often called hoisting.
Phase 2: Execution Phase The engine goes through the code line-by-line and runs it. It assigns the actual values to variables and calls the functions.
Once the setup is complete, the execution phase begins. This is where the assignments happen, and the logic of your code is actually carried out.
Putting It All Together
Let's see how this works with a concrete example. Consider this simple script:
var name = 'Alex';
function greet() {
var greeting = 'Hello';
return greeting + ' ' + name;
}
var message = greet();
console.log(message);
First, the JavaScript engine creates the Global Execution Context.
| Phase | Variable | Value |
|---|---|---|
| Creation | name | undefined |
| Creation | greet | function() { ... } |
| Creation | message | undefined |
During the Creation Phase, the engine scans the global scope. It finds three things: a variable name, a function greet, and a variable message. It allocates memory for them, setting the variables to undefined and storing the greet function.
Next, the Execution Phase of the global context begins.
var name = 'Alex';The value ofnameis set to 'Alex'.
var message = greet();The engine sees a function call. It pauses the global execution and creates a brand new Function Execution Context forgreet().
Now, the two-phase process happens all over again, but this time just for the greet function.
| Phase (greet) | Variable | Value |
|---|---|---|
| Creation | greeting | undefined |
In the function's Creation Phase, the engine finds the variable greeting and initializes it as undefined.
Then, the function's Execution Phase starts.
var greeting = 'Hello';The value ofgreetingis set to 'Hello'.
return greeting + ' ' + name;The function returns the string 'Hello Alex'. After the return statement, thegreet()function is finished. Its execution context is destroyed.
The engine now resumes where it left off in the Global Execution Context. The return value from greet(), which is 'Hello Alex', is assigned to the message variable.
console.log(message);The value ofmessage('Hello Alex') is printed to the console.
Understanding this two-phase process within different contexts is key to figuring out how JavaScript handles scope and the order of operations.
What is the primary role of an execution context in JavaScript?
A new Function Execution Context is created every time a function is declared.
Grasping how these contexts are created and executed provides a solid base for understanding more complex JavaScript concepts.