How JavaScript Works_01
Tags: javascript, webdev, 100daysofcode, beginners
Published: 2021-11-02 16:45:59

Hey all 👋

Now that I’m finished with the JavaScript ES6 concepts series ( expect an e-book soon 🙂 ), I’ll be writing articles covering some fundamentals of JavaScript. And in this article, we’ll be talking about how JavaScript works and about execution context, so let’s start.

## Overview

Before we start, we should know JavaScript is an **interpreted language**, which means it is not compiled before sending it to the browser. 

After the code is sent to the browser, it is executed by the **JavaScript Engine**. JavaScript Engine is a computer program provided by browsers ( Example - V8 JavaScript Engine used by Google Chrome ).

JavaScript Engine creates **Execution contexts** to run the JavaScript code.

So let’s talk about what is an execution context?

---

## Execution Context 

To define it simply -

> The environment in which your code is running is the Execution context. It gets created when your code is executed.

Let’s imagine it as a container with two components -

* Memory Component
* Code Component

The **memory component** stores all the variables, and functions which are stored as objects(key: value pairs). It is called **Variable Environment**.

The code is executed line by line in the **code component**. It is called **Thread of Execution**.

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvjeba4y16pbtq50kf76.png)

Let’s understand how Execution Context works with one small example -

```javascript
var a = 5;

function add(num) {
  var res = num + num;
  return res;
}

var addA = add(a);

```

To execute this JS code, a global execution context is created. It contains two components as we discussed earlier i.e. memory component and code component -

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu29skofbb8rb7raqlaq.png)

The code is executed in two phases -

* Memory allocation phase
* Code execution phase


### Memory Allocation phase 

In this phase, **memory is allocated** to all the variables and functions.

As for the above code -

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olr8kzjwl0ve6wwx5m0f.png)

You can see here that during the first phase, **undefined** is stored against the variables declared with keyword **var**, while in the case of functions, the whole function code is stored against the function name. We’ll see how this is executed in the next phase.

### Code Execution phase -

JavaScript is a **single-threaded** language which means that the code will be executed line-by-line( but we know sometimes we have to handle asynchronous code, and that I’ll cover in some other article ). 

Let’s see how the above code is executed step-by-step -

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/makqae6mxsknxy3y2lxw.png)

Here when the first line is executed it assigns value **5** to **a**.

There is nothing to execute for the lines from 3 to 6, so it moves to the last line, line number 8. And in the last line, there is a function invocation, and whenever a new function is invoked a new execution context gets created called **Functional Execution Context**.

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykf2kiqldzg3fjxbel0j.png)

Here we can see a new execution context is created when the **add()** function is invoked.  And similar to what we have talked about, it goes through the same two phases: memory allocation and code execution.

Here we can see that after the first phase, memory is allocated for **num** and **res**. Let’s see what happens in the second phase -

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h47au8a09ucoau9tzc0j.png)

In the second phase, the add() function is executed line by line -

In the third line, the value of **a** i.e. **5** which is passed as an argument, is allocated to **num**.

In the fourth line, **num + num** is executed, and the result is allocated to the variable **res**.

In the fifth line, the **return** keyword gives back the control to the execution context where the function was invoked ( which is the global context in this case ). Also, it returns the value of the res variable.

As it completes the second phase and the control is back to the previous execution context, then this functional execution context is deleted.

![Execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j4mhg149ybiz2f4cao9.png)

Here we can see that the functional execution context is deleted, and the control is back to line number 8, where the returned value of the res variable is allocated to the **addA** variable.

And thus, there is no more code to execute so finally the whole global execution context is deleted.

![execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57abnltme01riqr5vagu.png)

So we just saw how a JavaScript code is executed, but what we have seen so far is an abstract of how everything works, and there are other things that work under the hood like JavaScript runtime, a CallStack which is used to manage all the execution contexts , etc. which I’ll cover in my next article, So stay tuned :)

---

I have tried to keep it simple and precise, and if you find any typo/error please report it to me so that I can correct it 🙂

Thanks for reading it till last 🙏

If you find this useful then you can share it with others :)

Let's Connect, drop a [Hi and let's chat 👋👋👋](www.twitter.com/thecoollearner)