How JavaScript Code Executed - Did You Ever Think ?

Have you ever wondered what happens under the hood when you run JavaScript code? Whether you're building a website or debugging a function, understanding JavaScript’s execution model is crucial. In this blog, we'll break it down into simple phases, making it easy for you to grasp how JavaScript executes your code step by step.

1. The Execution Context: The Heart of JavaScript's Engine

When JavaScript code runs, it creates something called an Execution Context. Think of it as a "box" or "environment" where your code lives and gets executed.

There are two main types:

• Global Execution Context (GEC) – Created once when your program starts.

• Function Execution Context (FEC) – Created every time a function is called.

Each Execution Context has two phases: Memory Phase and Code Execution Phase

2. Phase 1: Memory Creation Phase (Hoisting)

Before the code runs, JavaScript scans the entire file and:

• Allocates memory to variables and functions.

• Variables are initialized with undefined.

• Function declarations are hoisted (moved to the top) with their actual code.

Example -

var n = 2;
function square(num) {
    var ans = num * num;
    return ans;
}
var square2 = square(n)

Memory Phase Breakdown:

• n is hoisted and initialized to undefined

• square function is hoisted with its full definition

• square2 is hoisted and initialized to undefined

3. Phase 2: Code Execution Phase

Now that memory is set up, JavaScript starts executing line by line:

var n = 2;                 // n is now 2

function square(num) {     // already in memory
    var ans = num * num;
    return ans;
}

var square2 = square(n);   // function call triggers a new execution context

What happens when square(n) is called?

• A new Function Execution Context is created.

• num is set to 2 (the value of n)

• ans becomes 4

• Function returns 4

• square2 is now 4

4. Call Stack: JavaScript’s To-Do List

JavaScript uses a Call Stack to manage function calls. Every time a function is invoked:

1. A new Execution Context is created.

2. It’s pushed to the Call Stack.

3. After the function completes, it’s popped off the stack.

Using our example:

var n = 2;

function square(num) {
    var ans = num * num;
    return ans;
}

var square2 = square(n);

Call Stack Flow:

1. Global Execution Context is pushed

2. square(n) is called → Function Execution Context is pushed

3. Inside square, code executes (ans = 4)

4. Function returns → square context is popped

5. Back to global → square2 is now 4

5. When Does Execution Context Get Removed?

• A Function Execution Context is removed as soon as the function finishes execution.

• The Global Execution Context is removed once the entire program ends.

6. Something Special for Vedant(tech-masala) Readers - Hand Written Copy

7. Final Thoughts

Understanding how JavaScript code is hoisted, executed, and managed using the Call Stack helps you write cleaner, more predictable code.

If you’ve ever been confused about why a variable is undefined or why a function behaves unexpectedly — it’s likely due to the Execution Context phases at work!

So next time, just remember:

JavaScript first remembers, then runs your code. 😄