Understanding JavaScript Execution Context: A Deep Dive

Javascript Global Execution Phase

When JavaScript code runs, it doesn’t just execute line by line in a vacuum; it operates within what’s known as an execution context. This concept is fundamental to understanding how JavaScript handles variables, functions, and their scope. The execution context consists of two main phases: Memory Creation and Code Execution.

1. Memory Creation Phase

In the memory creation phase, JavaScript sets the stage by allocating memory for all the variables and functions in the current scope.

• Variables: During this phase, all variables declared with var are hoisted and set to undefined. This is why you can reference a variable before it's actually assigned a value in the code (although it’s generally a bad practice).
• Functions: Full function definitions are also hoisted. The memory space is allocated to the function name, and the function body (the code inside the function) is stored in memory.

var a = 5;
function temp(para1, para2) {
    var b = 'Hello';
    return `${b} ${para1} and ${para2}`;
}
var call1 = temp('Html', 'Css');
var call2 = temp('React', 'Next');

During the memory creation phase, the memory is allocated as follows:

• a: undefined
• temp: The entire function is stored in memory.
• call1: undefined
• call2: undefined

At this stage, variables like a, call1, and call2 are placeholders set to undefined, while the temp function is fully defined and ready to be executed.

2. Code Execution Phase

Once the memory is set up, the JavaScript engine enters the code execution phase. In this phase, the code is executed line by line, and the values of the variables are updated accordingly.

• The variable a is updated to 5.
• The temp function remains the same as it was already fully defined during the memory creation phase.
• When temp is invoked, a new execution context is created specifically for that function call. This new context goes through its own memory creation and code execution phases.

For example:

• When var call1 = temp('Html', 'Css'); is executed, a new execution context for temp is created.
• In the memory creation phase of this context:
• para1: undefined
• para2: undefined
• b: undefined

During the code execution phase:

• para1 is updated to 'Html'.
• para2 is updated to 'Css'.
• b is assigned 'Hello'.
• The function returns "Hello Html and Css", which is then assigned to call1.
• This process repeats for call2, with the arguments 'React' and 'Next'.

Once the function execution completes, the inner execution context (created for temp) is removed from memory, ensuring efficient memory usage.

The Role of the Call Stack

JavaScript uses a call stack to manage these execution contexts. The call stack operates on a Last In, First Out (LIFO) principle, meaning the most recent function call gets executed first and removed from the stack once completed. If a function invokes another function, a new execution context is added to the stack. This nesting of execution contexts can continue indefinitely, depending on the code.

Conclusion

Understanding the execution context is crucial for mastering JavaScript. It explains why variables behave the way they do, how functions are executed, and how JavaScript manages the flow of code. This knowledge helps developers write more predictable, efficient, and bug-free code.