How JavaScript Is Executed
Published: 2021-08-30 21:55:49


Everything in Javascript happens inside an **execution context**. When a script executes in a JavaScript engine an execution context is created, In other words you could say that an execution context is like a box/container within which the JavaScript code is executed. When a script executes for the first time a **global execution context** is created. The execution context is created in two phases.
1) Creation Phase
2) Execution Phase
Lets use an example to help us understand this process - 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l3c1wl72x7t7z1skrzh.png)

In the example given above there are two variables `X` and `Y` and one function named `square()` which squares any given number `(n)`. When we run this program the JavaScript engine creates a **global execution context**. In the **creation phase** memory is allocated to all the `variables` and `functions`. Incase of variables a special value **"undefined"** is stored and in case of functions the whole code block is stored as shown below.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9efgb5xedtl7xzcuhqsn.png)

- JavaScript is a single-threaded language  and is executed line by line. 

- In the execution phase the JavaScript engine runs through the code and assigns values for all of the variables. 

- In the example given above the JS engine runs through the first line of code and assigns the value `2` to the variable `X`. 

- In line number 3 there is a function `square()` but there is nothing to execute so it moves on to line number 8 where there is a function invocation taking place. 

- When a function is invoked a  **functional execution context** is created within the **global execution context**.

- The functional execution context is created in two parts the **creation phase** and the **execution phase**. 

- As shown below in the **creation phase** the engine runs through the code and assigns a special value **"undefined"** to the variables `n` and `result`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxuqe9eunyjlyu3y0ih3.png)

- In the **execution phase** the JavaScript engine runs through the functions and assigns values for the variables in this case the value 3 gets assigned to the variable `n`.

- The code then executes the mathematical equation **n * n** with the value assigned to `n`, In this case that is **3 * 3** which is equal to 9.

- The result is now stored in the variable `result` as shown below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhh2s9mp6zoy5o368eeg.png)

- When the code is done executing line by line the values are assigned to the respective memory slots that had been allocated to them in the **creation phase**. 

- The return statement in the invoked function assigns the resulting value in place of the special value **"undefined"** in the **global execution context**. 

- After the resulting value is assigned in place of undefined the **functional execution context** is deleted and the control is given back to the **global execution context**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqw9qgk7vucxk6wyzjoh.png)