Execution Context ? Exploring The Core Concepts Of javascript...

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!!