How JavaScript Runs Code

Everything in JavaScript happens inside an execution context.

An execution context is like a big box that contains all the types of code in JavaScript.

The execution context is divided into two parts:

1. Memory

2. Code

In the memory part, JavaScript stores values in terms of key and value pairs. This is also known as the variable environment.

In the code part, JavaScript always runs one line at a time.

This is also known as the thread of execution.

JavaScript is known as a single-threaded language, meaning it runs one line of code at a time.

JavaScript is also known as a synchronous, single-threaded language.

The execution context is created in two phases:

1. Memory Creation Phase

2. Code Execution Phase

Let's take an example:

var n = 3;
function cube(num) {
  var ans = num * num * num;
  return ans;
}

var res1 = cube(3);

First JavaScript Engine during the creation phase:

Memory Creation Phase:

• n is initialized with undefined

• cube is assigned the entire function code.

• res1 is initialized with undefined

Second Phase of Execution Context: Code Execution Phase

• n is assigned the value 3 (undefined is replaced by 3).

• When the function cube is invoked, it creates its own execution context, which also goes through two phases: creation and execution.

  In the creation phase of the function:

  • num is set to undefined.

  • ans is also initialized to undefined.

• During the execution phase of the function, num will be assigned the value 3, and ans will be computed as 27 (3 * 3 * 3).

• Once the function finishes executing, it returns the value 27, and control is handed back to where the function was invoked.

Global Execution Context:

The global execution context is the default context in which all JavaScript code is executed initially. When your JavaScript code runs, the global execution context is created, and this context contains:

• Global Object: In a browser environment, it's window. In Node.js, it's global.

• this value: Inside the global execution context, this refers to the global object (window in browsers).

• Variables and functions: Any variables and functions declared in the global scope (like n and cube) are part of this context.

Call stack
The call stack is like a stack.

The call stack always contains the Global Execution Context (GEC).

Each execution context is pushed onto the call stack.

When a function is invoked, a new execution context is created.

Once the function's operations are completed and it reaches the return statement, the function is removed from the stack, and control returns to the previous execution context.

The call stack is responsible for managing execution contexts.

When all code execution is completed, the global execution context is removed from the call stack.

call stack is a stack data structure that keeps track of the function execution.

When a function is invoked, a new execution context is created for that function and added to the top of the stack.

Once the function finishes executing, its execution context is popped off the stack.

var n = 3;  
function cube(num) { 
  var ans = num * num * num;  
  return ans; 
}

var res1 = cube(3);

• Step 1: When JavaScript starts executing the code, it enters the global execution context.

  • The global execution context contains the variable n = 3 and the function cube(num).

  • The global execution context is at the bottom of the call stack.

• Step 2: Then, the line var res1 = cube(3) is encountered.

  • JavaScript sees that you are calling the cube function, so it creates a new execution context for the cube function and pushes it onto the call stack.

Now, the call stack looks like this:

• [ cube ] (the current function being executed is cube)

• Step 3: Inside the cube function:

  • The argument num = 3 is passed, and ans = num * num * num is executed, which gives 27. This value is returned by the cube function.

  • Once the function returns the result, the cube execution context is popped off the call stack.

• Step 4: The result from the cube function is assigned to the variable res1.

  Now, the call stack goes back to just the global execution context, and the program finishes executing.

Visualizing the Call Stack:

Here’s what the call stack would look like during execution:

1. Before the function call (cube(3)):

    [Global Execution Context]
   

2. During the function call (cube(3)):

    [cube Execution Context]
    [Global Execution Context]
   

3. After the function returns (and cube execution context is popped):

    csharpCopy[Global Execution Context]
   

   Call stack also known as many name:

   • Execution Context Stack – This refers to the stack holding execution contexts (environment for running code) created during function execution.

   • Program Stack – A general term referring to the memory stack used for function calls and storing local variables.

   • Control Stack – This emphasizes the stack's role in managing the control flow of a program, specifically handling function invocations and returns.

   • Runtime Stack – Refers to the stack used during the program's runtime, managing function calls and local variables.

   • Machine Stack – This term is sometimes used to refer to the stack in the context of machine-level execution, dealing with low-level function call handling.