JavaScript: Under The Hood - How JavaScript Scripts Run

The execution process of JavaScript scripts involves several key concepts and phases. This article aims to explore the underlying mechanisms of JavaScript script execution, focusing on execution contexts, the call stack, and the phases involved in running a script.

Concepts:

• Execution Context: An execution context represents the environment in which JavaScript code is executed. There are two types of execution contexts: the global execution context and function execution contexts. Each execution context has two phases: the creation phase and the execution phase.
• Call Stack / Execution Stack: The call stack, or execution stack, is a Last-In-First-Out (LIFO) data structure that keeps track of the execution contexts. When the execution of a context begins, it is pushed onto the call stack. Once the execution is completed, the context is popped from the stack.
• Hoisting: is the concept in JavaScript in which the function and variable are declared in memory before starting execution, so the function can be called before declaration.

JavaScript Script Execution Process:

• Creation Phase: During the creation phase, the global execution context is created. This phase involves the allocation of memory for variables and functions defined in the script and default object (called window in browser and global in Nodejs) and "this" keyword is equal to this default object and this default object contains all variables and functions in global scope.
• Execution Phase: After the creation phase, the global execution context is pushed onto the call stack. The code is then executed line by line, following the order of appearance in the script.
• Execution Contexts for Functions: For functions defined within the script, the same process of creation and execution phases occurs. Each function has its own execution context, which is created when the function is called. The execution context for the function is pushed onto the call stack, and the function code is executed.
• Execution Context Removal: Once the execution of an execution context, whether global or function, is completed, it is popped from the call stack. The control then returns to the previous execution context in the stack.

Example

a();
console.log(b);
function a() {
    console.log("function a is called");
}

let b = 2;        

Output:

function a is called
undefined        

Explanation:

1. The global execution Context and global object is created.
2. memory is reserved for a function called "a” and a variable called “b” with value undefined in memory.
3. The global execution Context is pushed into the call stack and the execution is started.

4. The execution Context is created and pushed into the call stack for function “a” and the execution is started.

5. The execution Context is created and pushed into the call stack for log function and the execution is started and “function a is called” is printed.

6. The execution Context of the log function is popped from the call stack.

7. The execution Context of function “a” is popped from the call stack.

8. The execution Context is created and pushed into the call stack for log function and the execution is started and undefined is printed because the variable b is reserved in memory but not initialized yet.

9. The execution Context of the log function is popped from the call stack.

10. the variable b is initialized with value 2.

11. The global execution Context is popped from the call stack and the program is terminated.

Conclusion:

JavaScript script execution involves the creation and execution phases of execution contexts. The global execution context is created first, followed by the execution of code line by line. Function execution contexts are created when functions are called, and their execution follows a similar pattern. Understanding these underlying mechanisms provides insights into how JavaScript scripts are processed and executed.