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

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more