Hello developers, In this blog we will be looking at What happens exactly when your JavaScript code runs? We will also be looking at concepts like the Execution Context and the 2 phases of its creation, memory allocation and code execution in JavaScript. So Let's Get Started!

Global Execution Context

Everything inside JavaScript happens inside an Execution Context. An Execution Context can be thought of as a big box inside which all your JavaScript code runs. So before even a single line of JavaScript Code is executed, The first and foremost thing which happens is the creation of the Execution Context.

" Everything inside JavaScript happens inside an Execution Context "

Now, There are 2 components of this Execution Context - The Variable Environment and the Thread of Execution.

The Execution context is created in 2 phases.

• In Phase 1 the Variable Environment is created.

• In Phase 2 the Thread Of Execution is created.

The Variable Environment: This is a part of the Execution Environment inside which memory is allocated to all the variables and functions used in the JavaScript code. When the Variable Environment is created, memory is allocated to the variables and functions used in the code in the form of key: value pairs.

The Thread Of Execution: The Thread of Execution is the second component of the Execution Context. In this component, all the JavaScript code is executed line by line in a sequential order. The next line of JavaScript code is executed only when the previous line has been finished executing.

2 Important Phases

As I mentioned above, the JavaScript Execution Context is created in 2 phases. Let's understand what happens in each phase in detail.

Phase 1 - The Memory Allocation Phase

In this phase, JavaScript skims through the entire code looking for variables and functions and allocates memory to them in the Variable Environment. As mentioned earlier, memory is allocated in the form of key: value pairs.

On finding a variable, it will allocate memory for it will not assign it any value. Suppose we have a line of code that says: var a = 23; In Phase 1, memory will be allocated to a but no value will be assigned. If a variable is just declared with no value defined, by default it holds a value of undefined. Thus at this stage, if you try to console.log(a); You will get undefined. In case you are confused that what will happen to the value 23 and when will it be assigned to a - That will be happening in Phase 2, which we will look at after some time. Thus, in the Variable Environment, the key will be the variable name(in this case, a) and the value will be undefined, like this: a: undefined.

On finding a function, it behaves quite differently. Memory will be allocated to that function in the Variable Environment where the key will be the function_name and the value will be the entire function_code.

Thus, if your JavaScript code looks like this:

var a = 2;
var b = 90;
function sum(x, y){
    return x + y;
}

function product(x, y){
    return x*y;
}

var result1 = sum(2,3);
var result2 = product(8,10);

You see there are in total 4 variables and 2 functions in the above code.

After the completion of Phase 1, the Variable Environment will look like this:

a: undefined,
b: undefined,
sum: f{
    return x + y;
},
product: f{
    return x*y;
},
result1: undefined,
result2: undefined

Phase 2 - The Code Execution Phase

In this phase, the JavaScript code is executed line by line in a sequential order. When we say that the JavaScript code will execute, we are generally referring to Phase 2. Let's take the example of the above-mentioned code for better understanding. Here multiple times I will be talking with reference to the Line numbers, so you might have to take a look at the code multiple times.

Line 1: When the JS Engine executes line 1, it will search for the variable a inside the Variable Environment and on finding it, it will assign it the value - 2. Thus, at this point, if you console.log(a) You will get 2 instead of undefined.

The same thing will be happening in Lines no 2, 11 and 12. All the variables whose memory was allocated in Phase 1 (which stored the default value of undefined), Now their original values will get assigned to them.

Line 2: The variable b is assigned 90

Line 3: You see, there is nothing for the JavaScript engine to execute in this line. Because it is simply a function declaration with some code inside it which will not get executed unless the function is invoked.

Hence the JavaScript Engine will skip lines 3 to 5.

Line 7: Again, JS finds a function declaration which will be skipped by it because of the reason mentioned above. Hence it skips lines 7 to 9.

Line 11: Here JavaScript runs the function sum() and the value returned will be assigned to the variable result1.

Line 12: JavaScript runs the function product() and the value returned will be assigned to the variable result2.

Here, Phase 2 comes to an end and our program successfully executes!

Visual Guide

Conclusion

1. Everything inside JavaScript happens inside an Execution Context. Even before a single line of code executes, an Execution Environment is created.

2. There are 2 components/parts of the Execution Context - The Variable Environment and The Thread Of Execution.

3. Inside the Variable Environment, memory is allocated to the variables and functions in the form of key: value pairs.

4. The Execution Context is created in 2 phases - Phase 1 and Phase 2. In Phase 1 - Memory is allocated to variables and functions are done. In Phase 2 - The code is executed line-by-line.

5. Phase 1 - JavaScript looks for variables and functions. With variables, the key is the variable_name and the value is undefined. With functions, the key is the function_name and the value is function_code.

6. Phase 2 - Functions are executed when called/invoked and the variables are assigned their original values.

With this, we come to the end of this blog. I hope you enjoyed the read and that this blog added value to your time.

If you liked the blog, Do give it a like and subscribe to the newsletter to get notified about the upcoming blogs of this series - Insight Into JavaScript. The next article will be coming out soon!

About Me

My name is Krish and I am a high school student currently learning about Tailwind CSS and JavaScript, Building Projects and making an attempt to share my learning in public. I like communities, open source and coding and playing video games.

I am available for Content Creation and Article Writing. DM me for collaboration.

My social handles:

Twitter: @Krish4856

GitHub: KrishJ4856

Gmail: krishvp4856@gmail.com