JavaScript execution context

execution context is a fundamental concept that helps understand how JavaScript code is executed. An execution context is an environment in which JavaScript code is evaluated and executed. Whenever JavaScript code is run, it is executed within a specific execution context
At its core, a JavaScript Execution Context (EC) is an abstract environment created by the JavaScript engine when your code runs. Think of it as a container or workspace where code executes.

Global Execution Context:
- Default: The initial, base execution context. There is only one GEC per JavaScript program.
  The global execution context is the outermost context in which JavaScript code is executed.
- Global Scope: Code not inside any function resides in the global context, and thus has access to global variables and functions.
  In Other Word
  Any code written outside of functions in a JavaScript program operates within the global scope, allowing it to interact with and utilize global variables and functions.
- Creation: The GEC is created before your code starts executing.

This is the window object in web browsers, or its equivalent in other JS environments. It acts as a container for all global variables and functions.
this Keyword:In the global context, this also references the global object.

Function Execution Context (FEC):
- For Each Function Call: A new FEC is created every time a function is called.
- Local Scope: Variables and functions declared inside a function have limited visibility (scope) within the FEC and cannot be accessed from outside it.
- Multiple FECs: There can be many FECs running at the same time (e.g., nested function calls).
- Each function call creates its own execution context, which includes the function's local variables, parameters, and any nested function declarations.
- The function's execution context is pushed onto the call stack, and when the function completes execution, its execution context is removed from the stack.

Two main phases in an Execution Context (EC) for JavaScript

Creation Phase
- Variable Object (VO) Creation: A special object is created to store all variables and function declarations defined within the current context (global or function).
- Memory Creation Phase in JavaScript
  
  During the memory creation phase, the JavaScript engine performs the following steps:
  1. Set up memory space for variables and functions before executing the code.
  2. Hoist variable declarations (var, let, and const) and function declarations to the top of their respective scopes.
  3. For variables declared with var, allocate memory space and initialize it with the value undefined. However, the assignment of the value to the variable is not performed until the execution phase.
  4. For function declarations, hoist the entire function body, allowing functions to be called before they are defined in the code.
  5. Allocate memory space for function parameters.
  6. Set up the environment for the execution phase by creating the Variable Environment and Lexical Environment for each execution context.

this Value Determination: The value of the this keyword is determined based on the context. In the global context, this typically refers to the global object (like window in browsers).

Execution Phase

Code Execution in JavaScript
- Variable Assignment: Variables declared with var, let, or const are assigned their defined values (or undefined if no value is assigned).
- Function Calls: When a function is called, a new Execution Context is created specifically for that function call. This process repeats for nested function calls, following the Creation and Execution phases again.
- Expression Evaluation: Expressions (calculations, comparisons, etc.) are evaluated to produce results.
- Statement Execution: Statements like if/else, for, and while control the flow of execution.

Key Points of Execution Contexts in JavaScript

There's only one Global Execution Context per program.
Each function call creates a new Function Execution Context.
The Creation Phase prepares the environment, while the Execution Phase carries out the actual code execution.
The conceptual "hoisting" of variable and function declarations happens during the Creation Phase of the Global Execution Context.

code Example


                function nameOne() {
                    console.log("one")
                   
                   }
                   
                   function nameTwo() {
                    console.log("two")
                   
                   }
                   function nameThree() {
                    console.log("three")  
                   }
                   
                   nameOne()
                   nameTwo()
                   nameThree()


                Overall Execution Flow in JavaScript
    
    Global Execution Context (GEC) Creation
    
      Variable Object: nameOne, nameTwo, and nameThree are hoisted and placed into memory.
      Scope Chain: The GEC forms the base of the scope chain.
      this: Set to the global object (e.g., window in browsers).
    
    
    Global Execution Context (GEC) Execution
    
    
      nameOne() Called:
        
          FEC for nameOne Created:
            
              Creation Phase: Variable Object (VO) for nameOne is created (no internal variables), scope chain is established, this likely points to the global object.
              Execution Phase: "one" is logged to the console.
            
          
          FEC for nameOne Destroyed: Control returns to the GEC.
        
      
      
      nameTwo() Called:
        
          FEC for nameTwo Created: (similar process to nameOne)
          FEC for nameTwo Destroyed
        
      
      
      nameThree() Called:
        
          FEC for nameThree Created: (similar process to nameOne)
          FEC for nameThree Destroyed
        
      
      
      GEC Destroyed: The program finishes.
    
    
    Key Points
    
    
      Call Stack: The JavaScript engine uses the call stack to keep track of which function is currently executing and to manage the creation and destruction of function execution contexts.
      One at a Time: Functions are executed one after the other with each function getting its own temporary execution context.
      Hierarchy: The GEC is the base, and each function call temporarily creates a new execution context on top of it.


    
                Understanding Execution Contexts in JavaScript: Handling User Authentication Example
    
    Let's delve into execution contexts with a detailed example comparing global and function execution contexts in a real development scenario.
    
    Example: Handling User Authentication
    
    Suppose you're building a web application that requires user authentication. You have a function to check if a user is logged in and another function to display the user's profile. Let's explore how execution contexts work in this scenario.
    
    // Global variables
    var isLoggedIn = false;
    var username = "guest";
    
    // Function to check if user is logged in
    function checkLogin() {
        if (isLoggedIn) {
            console.log("User is logged in as " + username);
        } else {
            console.log("User is not logged in");
        }
    }
    
    // Function to display user profile
    function displayProfile() {
        checkLogin(); // Calling checkLogin function from displayProfile function
        console.log("Displaying user profile for " + username);
    }
    
    // Simulating user login
    function login(user) {
        isLoggedIn = true;
        username = user;
        console.log("User " + username + " logged in successfully");
    }
    
    Now, let's examine how execution contexts work:
    
    Global Execution Context:
    
    
      When the JavaScript file is loaded, the global execution context is created.
      The global variables isLoggedIn and username are created in the global execution context.
      The functions checkLogin(), displayProfile(), and login(user) are also defined in the global execution context.
      These functions are available globally and can be called from anywhere in the script.
    
    
    Function Execution Context:
    
    
      When a function is called, a new function execution context is created for that function.
      For example, when displayProfile() is called, a new function execution context is created for it.
      Within the displayProfile() function execution context, variables like isLoggedIn and username are resolved first in the function's local variable environment. If not found, JavaScript looks up the scope chain to the outer variable environment (the global execution context) to resolve them.
      Similarly, when checkLogin() is called from within displayProfile(), a new function execution context is created for checkLogin().
    
    
    Real Development Scenario:
    
    In a real development scenario, you might use this setup to handle user authentication on a website.
    
    
      The checkLogin() function could be called whenever you need to verify if the user is logged in before displaying certain content or accessing protected resources.
      The displayProfile() function could be used to display the user's profile information after they log in.
      The login(user) function could be called when the user successfully logs in, updating the global variables isLoggedIn and username.

Blogs

51

Success in getting happy customer

3

Hundred of successful business

25

Total clients who love HighTech

5

Stars reviews given by satisfied clients

JavaScript execution context

Global Execution Context:

Function Execution Context (FEC):

Two main phases in an Execution Context (EC) for JavaScript

Creation Phase

Memory Creation Phase in JavaScript

Execution Phase

Code Execution in JavaScript

Key Points of Execution Contexts in JavaScript

code Example

Overall Execution Flow in JavaScript

Global Execution Context (GEC) Creation

Global Execution Context (GEC) Execution

Key Points

Understanding Execution Contexts in JavaScript: Handling User Authentication Example

Example: Handling User Authentication

Now, let's examine how execution contexts work:

Global Execution Context:

Function Execution Context:

Real Development Scenario:

Summary

Memory Creation Phase

Execution Phase

InfoGex