# 12. MEDIUM | Code Execution in JavaScript

* * *

Code execution in javascript happens in two phases:-

1\. **Memory creation phase**

> *   JS engine reads all the <mark class="bg-yellow-200 dark:bg-yellow-500/30">variable names and function declarations</mark> and allocates memory to them. It finds variable names by searching `var`, `let` or `const` keywords.
>     
> *   `var` variables are *initialized* with a default `undefined` value.
>     
> *   `let` and `const` variables are not *initialized* with any default value. Instead, they remain in an "uninitialized" state.
>     

2\. **Code execution phase**

> *   JS engine executes the code line-by-line.
>     
> *   It assigns value to the variables.
>     
> *   If there is a function call, JS engine enters to its local execution context.
>     

Let's understand this with the help of examples:-

**EXAMPLE 1**

```javascript
var firstName = 'Shubham';
let lastName = 'Agrawal';
let age = 30;
const yearOfBirth = 1995;

let userIntro = 'My name is' + ' ' + firstName + ' ' + lastName + '.'
```

![](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/f18695aa-ed09-4eba-af45-69e5b318cb8f.png align="center")

**Temporal Dead Zone (TDZ)**

The Temporal Dead Zone (TDZ) is a period within the scope of `let` and `const` variables where those variables cannot be accessed until they are initialized with a value. Attempting to access a variable in the TDZ will result in a `ReferenceError`.

![dsfsd](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/01c5b3dd-4d9f-4b3f-98ff-134ffdb02e30.png align="left")

You can see line by line javascript code execution in the Sources tab of dev tools.

![](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/2ede1d21-1c10-44b1-ad65-cd6d876abaf7.png align="left")

**EXAMPLE 2**

```javascript
var firstName = 'Shubham';
let lastName = 'Agrawal';
const age = 30;

function sayHi() {
    let a = 14;
    const b = 12;
    var c = 20;
    console.log(a, b, c);
}

sayHi();
```

![](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/0164fd12-f9fb-4bbb-891c-a40909f01b52.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Notice line by line javascript code execution in the Sources tab of dev tools for the above example.</div>
</div>

**EXAMPLE 3**

```javascript
var firstName = 'Shubham';
let lastName = 'Agrawal';
const age = 30;

function sayHi() {
    let a = 14;
    const b = 12;
    var c = 20;
    add(2, 5);
    console.log(a, b, c);
}

function add(x, y) {
    return x + y
}

sayHi();
```

![](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/f36949e3-369c-4cc4-a12f-0a44a90cda31.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Notice line by line javascript code execution in the Sources tab of dev tools for the above example.</div>
</div>

* * *

### **Call Stack**

It is **<mark class="bg-yellow-200 dark:bg-yellow-500/30">a mechanism in the JavaScript engine that manages the execution of function calls in your code</mark>**. It operates on a **Last-In, First-Out (LIFO)** principle.

*   When the program starts, the global execution context (denoted by `anonymous`) is the first item pushed onto the stack. It is the last one to be removed when all code has finished running.
    
*   Each time a function is called, a record containing the function's details (arguments, local variables, where to return) is created. This record is called a **stack frame** and is pushed onto the top of the call stack.
    
*   When a function completes its execution and returns a value, its frame is "popped" off the top of the stack.
    

![](https://cdn.hashnode.com/uploads/covers/679f94da85491cdb2d8e2e57/3e7b834d-a05f-4fce-93e7-7731d7e72723.png align="center")

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Stack Overflow ➜ Occurs when maximum call stack size exceeded. Generally happens in case of recursion when no end condition is provided.</div>
</div>

* * *

Happy reading!