Execution Context

What is Execution Context?

An Execution Context is an internal environment created by the JavaScript engine to evaluate and execute code.

JavaScript has Global execution context and Local Execution context.

When Execution context is created?

Whenever a function is called, a new execution context is created.

const user = {
    name: "Kartik",
    greet() {
        console.log(this);
    }
};

user.greet();


function test() {
    console.log(this);
}

test();
//---------------------------------------------------
Execution Context of greet()
{
    variables: {...},
    functionDefinations : {...},
    scopeChain: [...],
    thisValue: user
}

Execution Context of test()
{
    variables: {...},
    functionDefinations : {...},
    scopeChain: [...],
    this: window / module.exports
}

Important thing to note that execution context also contains this which is accessible inside function. That's why it is said `this refers to the context`. It is not actually pointing to the execution context, but the pointing to the object who has called the function.

Call Stack

Call stack in JavaScript manages execution contexts based on Last in, First out principle.

2 phases of Execution Context

Execution Context works in two phases, one is Memory phase and one is Execution phase.

Global vs Local execution context

The Global Execution Context is created when the JavaScript engine starts running the script and remains in the call stack until the program completes.

The Local Execution Context is created when a function is invoked. It is destroyed after the function is fully executed.

So first of GEC goes inside the stack, and When JavaScript encounters a function invocation, it puts it into the call stack for execution. Every function has its own Execution context.

Each execution context is processed in two phases:

Memory phase:

1. All the variables delclared with var keyword are allocated memory with undefined

2. All the function definitions are stored in the memory.

3. Let and const stays in temporal dead zone.

Execution phase:

1. JS reads the code from top to bottom and start initializing the variables with the values

2. Invokes another functions.

As soon as another function call is found, a new local execution context is created and it also works in two phases it the same way as global execution context. When a function finishes execution, its execution context is removed from the call stack and its value is returned to the Parent Context.

Hoisting

This Process is also called Hoisting, where function definitions and variable declarations are registered in memory during the Memory phase before execution phase begins.

Due to Hoisting we can make function calls before defining the function in our code and use variables declared using var keyword before declaration.

Let and const is also hoisted and allocated memory but it stays in temporal dead zone which prevents us from using it before declaration.

The proof that let and const is hoisted?

when we try to access let and const before their declarations, then the error message we get is "cannot access before initialization" and not "not defined";