JavaScript Runtime
Tags: javascript, programming, beginners
Published: 2021-12-28 20:11:02

So many `javascript` developers, a senior developers with more than 5 years of experience, and trust me, they really don't know what really happen behind the scene when they executing a `javascript` code.
Not because it's hard to learn, But they think it's not worth wasting time for, as an answer to them, how can you call yourself a `javascript` web developer if you don't know how your code is implemented or how javascript engine execute your code.
This post will be devided into five articles and this is the first one, i will cover everthing about `javascript runtime`, we will see:

1. Execution Context

2. Call Stack

3. Event Loop

4. Hoisting

5. Variables Scopes

So without further preamble, let's start.
<br>

## JavaScript Execution Context
start with this code below
```js
var x = 10

function addOne(a){
return a++
}

var y = addOne(x)

console.log(y) // 11
```
It's straightforward code. However, behind the scene, JavaScript does many things.
So when a `JavaScript engine` executes a script, it creates `execution contexts`. Each execution context has two phases: the creation phase and the execution phase.
<br>
### The creation phase

When a script executes for the first time, the JavaScript engine creates a Global Execution Context. During this creation phase, it performs some tasks:
<br>
- Create a global object i.e., `window ` in the web browser or `global` in Node.js.

- Create a `this` object binding which points to the global object above.

- Setup a memory heap for storing `variables` and `function`

- Store the function declarations in the memory heap and variables within the global execution context with the initial values as `undefined`.

The following figure illustrates this

![Creation Phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecutur6lp9tba2drukgh.gif)



In our example, during the creation phase, the `JavaScript engine` stores the variables x and y and the function declaration addOne() in the Global Execution Context. Besides, it initializes the variables x and y to undefined.
Now when creation phase has finished, JavaScript engine make the global execution context moves automatically to the execution phase
<br>
### The Execution Phase
During the `execution phase`, the `JavaScript engine` executes the code line by line. In this phase, it assigns values to `variables` and executes the `function` calls.

The following figure illustrates this


![Execution Context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3lopu0xqto4ripipbi6.gif)

For every function call, the JavaScript engine creates a new Function Execution Context. 

### Function Execution Context

The Function Execution Context is similar to the Global Execution Context, but instead of creating the global object, it creates the `arguments` object that contains a reference to all the parameters passed into the function:

The following figure illustrates this (creation phase)

![Function Creation Phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7vbvzkpj8msxz49z370.gif)

During the execution phase of the function execution context, it assigns 10 to the parameter a and returns the result (11) to the Global Execution Context:

The following figure illustrates this (execution phase)


![Function Execution phase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kju5p4huzndr4sh8k3sg.gif)

That's all for execution context, next post will be about [call stack](https://dev.to/ejjraifihamza/javascript-call-stack-4e1c)

### Summary
In this post, you have learned about the JavaScript execution contexts, including the Global Execution Context and Function Execution Contexts.