# what is GEC

## **What is GEC?**

The **Global Execution Context** is the first execution context created when a JavaScript program starts.  
It consists of two main phases:

1. **Creation Phase (Memory Creation Phase)**
    
    * JavaScript sets up memory for variables and functions.
        
    * Variables (`var`) are hoisted and set to `undefined`.
        
    * Functions are hoisted with their entire definition.
        
2. **Execution Phase**
    
    * Code is executed line by line.
        
    * Variables are assigned their actual values.
        

---

## **Example:**

```javascript
var a = 10;
function greet() {
    console.log("Hello, World!");
}
greet();
console.log(a);
```

---

### **Step 1: Creation Phase**

Before execution starts, JavaScript scans the code and allocates memory.

* `a` → created in memory, initial value = `undefined`
    
* `greet` → entire function stored in memory
    

So, memory looks like:

```javascript
a: undefined
greet: ƒ greet() { console.log("Hello, World!"); }
```

---

### **Step 2: Execution Phase**

Now the code runs line by line.

1. `var a = 10;`  
    → `a` is assigned `10`.
    
2. `greet();`  
    → Function is invoked, creates **Function Execution Context (FEC)** for `greet`.  
    → Inside it, `console.log("Hello, World!");` prints:
    
    ```javascript
    Hello, World!
    ```
    
3. `console.log(a);`  
    → Prints:
    
    ```javascript
    10
    ```
    
    ## **Example with Nested Functions**
    
    ```javascript
    var a = 10;
    
    function first() {
        var b = 20;
        second();
        console.log("Inside first, b =", b);
    }
    
    function second() {
        var c = 30;
        console.log("Inside second, c =", c);
    }
    
    first();
    console.log("In global, a =", a);
    ```
    
    ---
    
    ## **Step-by-Step Execution (with GEC and FEC)**
    
    ### **1\. Creation Phase (Global Execution Context - GEC)**
    
    Memory allocation before any code runs:
    
    ```javascript
    a: undefined
    first: ƒ first() { ... }
    second: ƒ second() { ... }
    ```
    
    ---
    
    ### **2\. Execution Phase**
    
    * Line `var a = 10;` → assigns `10` to `a`.
        
    * Next, `first();` → a **new Function Execution Context (FEC)** is created for `first()`.
        
    
    ---
    
    ### **3\. Inside** `first()`
    
    Creation phase for `first()`:
    
    ```javascript
    b: undefined
    ```
    
    Execution:
    
    * `b = 20;`
        
    * `second();` → another **FEC is created for** `second()`, pushed on top of the Call Stack.
        
    
    ---
    
    ### **4\. Inside** `second()`
    
    Creation phase for `second()`:
    
    ```javascript
    c: undefined
    ```
    
    Execution:
    
    * `c = 30;`
        
    * `console.log("Inside second, c =", c);`
        
        ```javascript
        Inside second, c = 30
        ```
        
    
    After execution, `second()` FEC is removed (popped from Call Stack).
    
    ---
    
    ### **5\. Back to** `first()`
    
    * Next line: `console.log("Inside first, b =", b);`
        
        ```javascript
        Inside first, b = 20
        ```
        
    
    `first()` FEC is now destroyed.
    
    ---
    
    ### **6\. Back to Global Context**
    
    * Last line: `console.log("In global, a =", a);`
        
        ```javascript
        In global, a = 10
        ```
        
    
    **GEC is removed after full execution ends.**
    
    ---
    
    ## **Call Stack Representation**
    
    ```javascript
    Start: [ GEC ]
    
    first() called → [ GEC → first() FEC ]
    
    second() called → [ GEC → first() FEC → second() FEC ]
    
    second() ends → [ GEC → first() FEC ]
    
    first() ends → [ GEC ]
    
    End: [ ]
    ```