Exploring the Journey of JavaScript Code in Engines

JavaScript operates exclusively within an execution context, encompassing all its internal processes. Moreover, it functions as a synchronous, single-threaded language.

Decoding JavaScript's execution process.

1. var n= 5;
2. function square(num) {
3.   var ans = num * num;
4.   return ans;
5. }

6. var square1 = square(n);

Each time we execute the aforementioned code, a global execution context is formed. This execution context undergoes two distinct phases of creation.

• The first phase is known as the "creating phase" or "memory creation phase," while the second phase is referred to as the "code execution phase."

a) During the initial phase of memory creation, JavaScript allocates memory to variables and functions.

• When encountering line 1, JavaScript assigns memory to the variable n and initializes it with a special value known as "undefined".

• Moving to line 2, JavaScript identifies the presence of a function named "square" and proceeds to allocate memory for it. In the case of functions, JavaScript stores the entire code within the memory allocation. Additionally, memory is allocated for the variables square1 and square2, initializing them with the value "undefined" due to the presence of another variable.

b) During the code execution phase:

• During the code execution phase, JavaScript processes the entire program line by line, executing functions and performing calculations. At this stage, the value 5 is assigned to the variable n.

• Moving forward, as lines 2 to 5 contain no executable code, the program proceeds to line 6 where the function is invoked. Function invocation resembles a miniature program, triggering the creation of a fresh execution context. This new execution context comprises two essential components: memory and code.

• Entering the execution context once more, we encounter two phases. In phase 1, the memory creation phase, executing square(n) focuses solely on lines 2 to 5 of the code. Memory allocation takes place for the parameter num, while no other variables or functions require memory allocation within this section.

• In phase 1, memory is allocated for num and ans on line 3, both initialized as "undefined". Phase 2 involves code execution, where each line is processed. Upon invoking the square(n) function, the value of n (2 from line 1) is passed as an argument to num, which acts as a parameter within the function.

• Proceeding to line 3, the code performs a calculation and assigns the resulting value to ans. Within the code block, num * num is evaluated, and the previously undefined ans is replaced with the computed value, which occupies memory space.

• Moving on to line 4, we encounter the special keyword "return" followed by ans. This signifies the return of control back to the execution context where the function was invoked at line 6. The function retrieves the value of ans from its local memory, which is 10 in this case, and returns it to line 6.

During the code execution, another significant occurrence is the complete detection of all function instances. With the execution completed, JavaScript concludes its tasks, indicating the end of the program. Consequently, the entire Global Execution Context is deleted.

The Call Stack serves as a vital mechanism for preserving the precise sequence of execution contexts. It goes by several alternative names, such as Execution Context Stack, Program Stack, Control Stack, Runtime Stack, and Machine Stack.

• The stacks within the Call Stack are specifically designed to handle execution management. Whenever an execution is completed or an execution context is no longer needed, it is removed from the stack. This ensures efficient organization and a seamless flow of execution within the system.

• Once all the global execution has been executed, the Global Execution Stack is emptied, marking the completion of our JavaScript program. The code within the JavaScript engine is then executed accordingly.