How Function And Variable works in JavaScript : Behind The Scenes
Tags: javascript, webdev, development, frontend
Published: 2024-05-25 05:55:49


**Let's See How The Function and Variable  Works in JavaScript Behind The Scenes**

According to Under Code Spinate

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/609171j8tdhe068dboh9.png)

Everything in JavaScript Happens Inside an Execution Context. All JavaScript code runs within an execution context, which provides an environment for the code execution. When JavaScript code runs, it first creates a Global Execution Context (GEC). Execution Context Does Perform by Call Stack.

**What is Call Stack ?**

The call stack in JavaScript is a mechanism for managing the execution context of functions. Call stack is a data structure, which follows the Last-In-First-Out **(LIFO)** principle. JavaScript is single-threaded, meaning it can only execute one task at a time. The call stack manages this execution flow.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh08wi9c0xgutoinpzo8.JPG)

**It has two main components:**

- => Memory Component (Variable Environment)
- => Code Component (Thread of Execution)

**The GEC undergoes two phases:**

- => Creation Phase (Memory Creation Phase)
- => Execution Phase (Code Execution Phase)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm3sp52c6jn9kpwqodh2.JPG)

In the Memory Creation Phase It Allocates The Memory For a Variable And Initially set **Undefined (a=undefined )**. in the code execution phase it sets it's actual value ( a=10 ) then it come next line it js engine look it is a function then it **allocates Memory For the Function ( Entre Full Function Code ). 
  function x() {
    var b = 5;
    var c = 20;
    var result = b + c;
    console.log(result);
  }**
 
Then it moves the next line and then See **function is invoked ( Function call )**. When a **function invoked it creates Brand new Function Execution Context** . and put this function in call stack at the top of GEC ( Global Execution Context )


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7dm3y2qfgjn5zzsha8i.JPG)

The Brand new Function Execution Context Has ** =two Phase **:

- => Creation Phase (Memory Creation Phase)
- => Execution Phase (Code Execution Phase)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h3mul9657eu1gl5tnva.JPG)

in the function Execution Context it allocate the memory for it's variable and set **initially undefined ( b=undefined , c=undefined and, result=undefined )**. then in the code execution phase it sets their Actual value and make the statement operation **( b=5 , c=20 , result=5+20) and then print console.log(25)** in the browser console. after function execution Completed it **deleted and move out from the call stack and control back to the  GEC of call Stack. **


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mnquiauwpx36n0y7fcs.JPG)

After FEC ( Function Execution Context ) . then it goes the next line here is  console.log (a) . In the memory creation phase it sets a=10;


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97mujw2k0x85g2vex7p7.JPG)

**_After All code Execution , the GEC Moved Out From The  call stack  and it gets empty._**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ele0c4xrzne6wzhf108.JPG)

This is How The Function variable  Works in JavaScript Behind the Scenes Through Call Stack.