Execution Context ? Exploring The Core Concepts Of javascript...
Tags: javascript, coreconcepts, globalexecutioncontext
Published: 2021-08-28 07:21:15

Everything in javascript happens inside of **Global Execution Context(GEC).**

You can visualize this execution context as a big magical box.

#### 2 Main Components Of GEC are -
* Memory also called **Variable Environment**
* Code also called **Thread Of Execution**

            # code snippet-1
            var n =2;
            function square(num){
              var ans = num *num;
              return ans;
            }
            var square2 = square(n);
            var square4 = square(4);

            # after running the above code snippet
            # a global context execution is created with two components Memory and Code.

            Memory | Code
                   |
                   |
                   |

## Execution Context is created in two phases >

### a) Memory Creation Phase
- Allocation of memory space to all variables and functions.

              # for the code snippet-1
              # global execution context first phase

              Memory                 |  Code
              n: undefined           |
              square: {entire        |
                 body of             |
                 the function}       |
              square2: undefined     |
              square4: undefined     |
                                     |
                                     |
- **undefined is a placeholder for variables declared in the js code, while whole body  of the function act as placeholder for functions in memory allocation.**

#### b) Code Execution Phase



          # for the code snippet-1
          # global execution context Second phase

          Memory                 |  Code
          n: 2                   | initializes value of n and change happens in memory  
          square: {entire        |  Nothing Happens
             body of             |
             the function}       |
          square2: undefined     |   function invocation is understood a new Execution Context is created
          square4: undefined     |
                                 |
                                 |
-  **When a function invocation is encountered a new execution context is created consider it like a nested context execution inside of global execution context**

-  **Same two phases i.e memory creation phase and code execution phase are followed for local/nested context execution for a function invocation**

#### b.1) Local/nested execution context on function invocation

          # for the code snippet-1
          # global execution context second phase square2 with local execution context phase 1 memory creation

          Memory                 |  Code
          square2: undefined     |    Memory               | Code
                                 |   num :undefined        |
                                 |   ans: undefined        |
                                 |                         |

         # global execution context second phase square2 with local execution context phase 2 Code execution

         Memory                 |  Code
         square2: returns 4     |    Memory               | Code
                                |   num :2                | initializes n to 2
                                |   ans: 4                | computation happens ans = 2*2
                                |                         |
- **control of the program returned back to global context execution from local context execution**

-  **Similar procedure happens for square4 function invocation**

## Call Stack

- **All the Execution Context creation,deletion and control transfer happens via Stack i.e a call stack**

- **At the bottom of the stack is the Global  Execution Context, and when function is invoked and new local execution context is created that local execution context is placed in top of stack.**

                      # LEC- local execution context created during function invokation
                      # GEC - Global execution context created in the beginning of javascript source code.

                      # Call stack managing Execution Context
                      # creation for execution context it is pushed into call stack
                      # deletion for execution context it is
                      pop of the stack

                      |             |
                      |             |
                      | LEC1/LEC2   |
                      | GEC         |
                      ---------------
- **LEC 1 two phases happens then control goes to GEC**
- **Similarly then LEC2 is pushed into top of stack it complete its two phases memory creation and code execution and then give control back to GEC**

> **Understanding Global Execution Context  helps in determining why javascript behaves weird as compared to other programming languages.**

**You my friend have a great day!!**