In JavaScript, the Execution Context (EC) is an environment where JavaScript code is executed. It determines the scope, available variables, functions, and the value of this.

Types of Execution Contexts

JavaScript has three types of execution contexts:

  1. Global Execution Context (GEC)
    • Created when the JavaScript file starts executing.
    • Contains the global object (window in browsers, global in Node.js).
    • this refers to the global object.
  2. Function Execution Context (FEC)
    • Created whenever a function is invoked.
    • Has its own variables, function definitions, and this binding.
    • Each function call gets its own execution context.
  3. Eval Execution Context
    • Created when eval() is used.
    • Executes JavaScript code inside a string (not recommended for security reasons).

Execution Context Lifecycle

Each execution context goes through three phases:

  1. Creation Phase (Memory Allocation)
    • Creates the Global Object (e.g., window in browsers).
    • Sets up the “this” binding.
    • Stores function declarations in memory.
    • Allocates memory for variables (var is hoisted with undefined, let & const are in TDZ).
  2. Execution Phase
    • Executes the code line by line.
    • Assigns values to variables.
    • Executes function calls.
  3. Destruction Phase
    • The execution context is removed from the call stack once execution is complete.

Similar Posts

What is TypeScript? Strongly typed JavaScript

Byidev0085

TypeScript is a strongly typed superset of JavaScript developed and maintained by Microsoft. It adds static typing, interfaces, and advanced features to JavaScript, making it more robust for large-scale applications. TypeScript compiles to plain JavaScript, ensuring compatibility with all JavaScript environments, such as browsers, Node.js, and other platforms. One of TypeScript’s key advantages is its…

What is Event propagation, capturing, bubbling ?

Byidev0085

Yes! Event propagation in the HTML DOM determines the order in which event handlers are triggered when an event occurs on a nested element. There are two phases of event propagation: 1. Event Bubbling (Default) component3 → component2 → component1 2. Event Capturing (Trickling) component1 → component2 → component3 Example Code Here’s a simple example…

Converting Vanilla JS to JSX

Byidev0085

Converting Vanilla JavaScript to JSX involves making changes to the code structure and syntax to work with React. Here’s a simple guide: 1. HTML to JSX JSX uses XML-like syntax, so you must ensure proper casing, closing of all tags, and correct attribute names: Example: HTML: JSX: Key Changes: 2. Inline JavaScript Use {} to…

How To Return the Response From an Asynchronous Call in JavaScript?

Byidev0085

To return the response from an asynchronous call in JavaScript, it’s important to understand how JavaScript handles asynchronous operations like fetching data, reading files, or executing time-based actions. JavaScript is a single-threaded nature means it can only handle one task at a time, but it uses asynchronous programming to execute tasks without blocking the main…

Write to the DOM or Not: When JS Frameworks Are Necessary

Byidev0085

The phrase “Frameworks are declarative, not imperative” highlights a fundamental difference in how frameworks handle programming tasks. In a declarative approach, developers describe what they want the program to achieve, and the framework takes care of the underlying process to accomplish it. This approach abstracts away low-level details, allowing developers to focus on defining outcomes…