DEV Community

Cover image for JavaScript Execution Context
Md Pervez Hossain
Md Pervez Hossain

Posted on

JavaScript Execution Context

JavaScript Execution Context: Detailed Breakdown

1. Everything in JavaScript Happens Inside an Execution Context

  • All JavaScript code runs within an execution context, which provides an environment for the code execution.

2. Global Execution Context (GEC) :

  • When JavaScript code runs, it first creates a Global Execution Context (GEC).
  • The GEC acts like a container with two main components:
  1. => Memory Component (Variable Environment)
  2. => Code Component (Thread of Execution)

3. Phases of Execution Context Creation :

  • The GEC undergoes two phases:
  • => Creation Phase (Memory Creation Phase)
  • => Execution Phase (Code Execution Phase)

4. Memory Creation Phase :

  • JavaScript code is processed line by line.
  • During the Memory Creation Phase, it allocates memory for variables and functions:
  • Variables are stored as key-value pairs.
  • Initially, variables are assigned a value of undefined.
  • Functions are stored in their entirety, including their code.

5. Execution Phase

  • In this phase, the actual code executes line by line.
  • Variables are assigned their actual values, replacing undefined.

6. Function Execution Context :

  • When a function is invoked (called), a new execution context is created within the GEC.

  • This new context undergoes the same phases:

  • Memory Creation Phase : Allocates memory for parameters and local variables, initially setting them to undefined.

  • Execution Phase : Executes the function code line by line, assigning actual values to variables.

  • Once the function completes execution, its context is removed, and control returns to the GEC.

7. Call Stack :

  • The Call Stack manages the order of execution contexts.
  • The GEC is the first entry in the Call Stack.
  • When a new execution context is created (e.g., a function is called), it is added to the top of the Call Stack.
  • Once execution is completed, the context is removed from the stack, and control returns to the previous context.
  • When the entire program completes, the Call Stack becomes empty.

8. Different Names for the Call Stack :

  • The Call Stack, a LIFO (Last In, First Out) data structure, is also known as: => Call Stack => Execution Context Stack => Program Stack => Machine Stack => Control Stack

9. JavaScript Code Analysis :

  • Before execution, JavaScript code is analyzed and broken into parts known as tokens (tokenization).
  • An Abstract Syntax Tree (AST) is created from these tokens.
  • The JavaScript engine uses the AST to convert the code into machine code.

10. Global Execution Context Without Code :

  • Even if no code is present, JavaScript still creates a Global Execution Context.
  • The initial state of the GEC contains:
  • => window (Global Object)
  • => this keyword, which refers to the global object in the global context
  • console.log(window === this);
  • => Output : true

Top comments (0)