Exploring JavaScript Execution Context: Key Fundamentals and Functionality

How JavaScript works and execution context

ยท

3 min read

Core fundamentals:

  • Everything in JavaScript happens inside the execution context.

  • The execution context is like a container in which the entire JavaScript code is executed.

Components of execution context:

Execution context has two main components

Memory component (variable component):

  1. This component stores variables and functions as key-value pairs.

  2. Variables like 'a' with Value 10 are stored in the memory component.

  3. Functions are also stored in the memory component.

Code component (thread of execution):

  1. The code component is where the code is executed line by line.

  2. It is known as the thread of execution.

  3. JavaScript is single-threaded, meaning it can only execute one command at a time.

  4. JavaScript is also asynchronous, which means it executes commands in a specific order, waiting for the current command to finish before moving to the next one.

How JavaScript is executed:

var n =2;
function square(num){
    var ans = num*num;
    return ans;
}

var Square2 = Square(n);
var Square4 = Square(4);

Memory creation phase:

  1. In the memory creation phase, JavaScript allocates memory to all variables and functions in the program.

  2. Variables are assigned a special value known as "undefined" during this phase.

  3. Functions, on the other hand, have their entire code stored in the memory space allocated to them.

  4. Consider the above code and figure. If the code contains a variable 'n' with the value of 2 and a function 'square' that returns the square of a number, memory is allocated to 'n,' storing the value "undefined," and 'square,' storing its entire function code.

  5. Any other variables are also allocated in memory with the initial value "undefined."

Code execution phase:

  1. In the code execution phase, JavaScript goes through the program line by line and executes the code.

  2. When it encounters a line that assigns a value to a variable, it places that value inside the corresponding memory location.

  3. For example, if 'n' was initially assigned "undefined" during code execution, it would now be assigned the value of 2.

  4. When a function is invoked (called), a new execution context is created for that function.

  5. This new execution context also has two components: memory and code.

  6. The function's parameters and local variables are also allocated memory with the initial value "undefined."

  7. The code inside the function is executed, and calculations are performed.

  8. When the function is done executing, its execution context is deleted.

Call stack:

  1. Whenever an execution context is created, it is pushed onto the call stack.

  2. The call stack manages the order of execution for the execution context.

  3. When a function is invoked, a new execution context is created and pushed onto the stack.

  4. When the function is done executing, its execution context is popped out of the stack, and the control returns to the previous execution context.

  5. The call stack helps maintain the flow of control during the program execution.

  6. If a function invokes another function, multiple execution contexts can be stacked on top of each other, forming a chain.

  7. The call stack can handle multiple levels of function invocations, managing the order in which they are executed.

ย