JavaScript Execution Context in Depth: Functions, Scope & Call Stack

In JavaScript, everything runs inside something called an Execution Context. This is a very important concept because it controls how variables are stored, how functions are executed, and how memory is managed.

When your program starts, JavaScript creates a Global Execution Context. Later, whenever a function is called, a new execution context is created for that function. Each context has its own memory, which is why variables do not conflict with each other even if they have the same name.

Execution context and memory separation in JavaScript

1. Example Program

Let us take a simple example to understand how JavaScript handles multiple functions and variables.

var x = 1;

function a(){
  var x = 10;
  console.log(x);
}

function b(){
  var x = 100;
  console.log(x);
}

a();
b();

console.log(x);

2. Output

When you run the above program, JavaScript produces the following output:

10
100
1

3. Why This Output Happens

At first, this might look confusing because all variables have the same name x. But the key idea is that each function creates its own execution context with its own memory.

The variable x inside function a() is completely different from the variable x inside function b(), and both are different from the global variable x. This separation prevents conflicts and makes JavaScript flexible.

4. Step-by-Step Execution

Step 1: Global Execution Context Creation

When the program starts, JavaScript creates a global execution context. During this phase, memory is allocated for variables and functions before code execution begins.

x → undefined
a → function stored
b → function stored

Step 2: Code Execution Begins

Now JavaScript starts executing code line by line. The variable x is assigned the value 1.

x = 1

Step 3: Calling Function a()

When function a() is called, a new execution context is created. This context has its own memory. Inside this function, a new variable x is created and assigned the value 10.

Local x → undefined → 10

So JavaScript prints:

10

Step 4: Function a() Ends

After execution, the function’s execution context is removed from memory. This ensures efficient memory usage.

• The function context is deleted
• Memory used by that function is cleared

Step 5: Calling Function b()

Now function b() is executed. Again, a new execution context is created. A separate variable x is created and assigned the value 100.

Local x → undefined → 100

So JavaScript prints:

100

Step 6: Back to Global Execution

After both functions complete, control returns to the global execution context. The global variable x still holds the value 1.

console.log(x) → 1

5. Important Concept

Each execution context has its own separate memory space. Even if variables have the same name, they exist in different contexts and do not interfere with each other.

• Global context → global variables
• Function a → local variables
• Function b → local variables

6. Call Stack Explained

JavaScript uses a Call Stack to manage execution. It works like a stack where functions are added when called and removed after execution.

Global → a() → removed → b() → removed → Global

• Functions are pushed into the stack when called
• Functions are removed after execution
• This ensures correct execution order

Conclusion

Now you clearly understand how JavaScript manages execution contexts, memory, and function calls. This concept is very important and forms the base for advanced topics like closures, scope chain, and asynchronous programming.

You are now building strong JavaScript fundamentals 🚀