What happens when you run Javascript code?

Hello again 👋,

There are a lot of things that happen behind the scenes inside the JavaScript engine.

Remember in the last blog I discussed that everything in JavaScript happens inside an Execution Context.

How Javascript works & execution context?

and JavaScript isn't possible without this beautiful Execution Context.

So what happens when you run a JavaScript program?

Yes, you are right An execution context is created.

Let's now understand how this beautiful execution context is created with the help of a JavaScript program.

1. var n=2;
2. function square (num){
3.   var ans = num * num;
4.   return ans;
5. }
6.
7. var square2 = square(n);
8. var square3 = square(4);

Now let us see how this whole JavaScript code is run behind the scenes.

When you run this whole code, A global execution context is created.

This execution context is created in two phases.

The first phase is known as the creation phase. This is also known as the memory creation phase. This is the critical phase.

In the first phase, JavaScript will allocate memory to all the variables and functions.

As soon as JS encounters this line 1, it will allocate memory to n.

Now the question is how will it allocate?

It will reserve a memory space here for n. Similarly, now JavaScript goes to line 2. It allocates some memory to the square.

Let me tell you what it stores.

When it allocates memory to n, it stores a special value. Which is known as undefined.

In the first phase and in the case of functions, it literally stores the whole code of the function inside this memory space.

and now it will also allocate memory to square2 and square4, it will again store undefined for them.

Let us see what happens in the second phase, which is the code execution phase.

The second phase is the code execution phase

Let's see how this code is executed after the memory allocation.

JavaScript once again runs through this whole JS program line by line and it executes the code now. So this is the point when all these functions and every calculation in the program are done.

as soon as it encounters the first line, n=2, it actually places the '2' inside the 'n'. Till now, the value of n was undefined. Now in the second phase of the creation of Execution Context, i.e. the Code execution phase,.

After finishing line one, it goes to line two and sees that We have nothing to do here. So line number two to five, there is nothing to execute literally. It moves to line number 6.

Here, we invoke a function. Whenever a function is invoked you know a mini program invoked.

Altogether new execution context is created inside the global execution context.

And It will be similar to the first phase of Global execution. Memory creation and code execution. See the below image and you will understand the whole thing. This is very very important to understand how this execution context works and Javascript code runs.

One more thing to understand here when the whole function is executed, this whole execution context, for that instance of that function, will be deleted.

So now there won't be the execution context as soon as we return the value.

In line number 7 we are again invoking a function, right, and just the difference is, we are now passing in 4 over here as an argument directly. That's it.

Again, a brand new execution context will be created, the same process will happen.

But don't you think that all this is too much to manage for the JS engine?

Execution context is created one by one, inside one, and all these things are very tough to manage, right? And suppose there was a function invocation inside the function, so what would have happened is, you would have created an execution context INSIDE an execution context over here, and maybe again an invocation so it can go to any deep level right? So it is very difficult for the JS engine to manage, and it does it very beautifully.

It handles everything to manage this execution context creation, deletion, and control, It manages a stack.

This is known as the call stack.

It has its own call stack. At the bottom of the stack, we have our global execution context. That means, whenever any JS program is run, this call stack is populated with this Global execution context. This whole execution context is pushed inside this stack.

Remember this. Whenever a function is invoked, or a new execution context is created.

That's all for today. I will explain more execution context in upcoming blogs with some visual examples.