If you understand how Code Behind works in the scene, you can write code at your convenience anyway. In this episode of mine today, I will discuss as much detail as possible about how JavaScript works within the scene.

JavaScript is usually run in an environment. Often it may be our most widely used browser, or another application program such as Node JS .

Now from where this JavaScript is run, there is also a JavaScript engine (Google V8 Engine, Spider Monkey, JavaScript Core etc…) whose function is to execute this JavaScript code. Browsers use JavaScript to make JavaScript run. For example, Google Chrome uses Google V8 engine, Firefox uses Spider-Manki / Rihano, Internet Explorer and Edge servers use the engine, and Safari uses JavaScript-core / Nitro (JavaScript has many engines, see here for full reference ).

Now this JavaScript code executes in several steps and runs.

Code > Parser > Convert to machine code > code runs

Here, the code passes through the parser first. Here the syntax error is usually checked. If a syntax error is found, then the error is thrown from here. And if all the syntax is done, then a data structure called Abstract Syntax Tree is created.

The next step is to convert this code into machine code, which our computer can actually understand. And finally our code is run.

Now why do you have to cross such steps before running a code? Yes, our computer does not understand anything but the machine code. Whatever language we write in code, it must be converted to machine code, or our computer may not understand it.

Execution Context and Execution Stack

It is very important to have clear ideas about Execution Context and Execution Stack. There are many trick issues in JavaScript that are difficult to understand unless you can understand exactly the Execution Context and the Execution Stack.

Execution Context:

By default Javascript executes global context. Unlike some other languages, no space functions are executed. And JavaScript’s Global Execution Context is a browser windowobject. Declaring a global variable or assigning it to an windowobject is the same

let bGlobal = 77;

Now I can see if it is window inside:bGlobal

window.bGlobal

Then you see that this seam bGlobalshows the value of your declared

bGlobal === window.bGlobal //true

That means two things are the same. So windowit is the same thing to declare a global variable or assign it to an object.

However, if your environment is not a browser, then this Global Execution Context may be different depending on the environment. For example, Node JS’s Global Execution Context is an globalobject. Depending on the environment it may change.

Execution context is discussed in more detail later.

Execution Stack:

We’ll use an example to get a clear idea about Execution Stack in JavaScript and see how those codes are executed.

function A(){
    let a = ' call from a';
    B();
    console.log('Hey', name + a);
}
function B(){
    let b = ' call from b';
    C();
    console.log('Hey', name +  b)
}
function C(){
    let c = ' call from c';
    console.log('Hey', name + c)
}
A();

If you run this code above, you will see how it runs:

The last ones are coming before and the first ones are later. How does it look random? Yes here we need to understand how the execution stack works. So only then will we have a clear idea of ​​how this code ran. First notice this diagram below:

Here the number codes will be executed according to the serial number. And the diagram on the right is the Basically Execution Stack. If you have no idea about the stack data structure, then the stack is a structure where the first in-out system is maintained. This means that there will be only one way to get data out, and whenever a data is extracted it can be extracted from the top. If you have several glass plates stacked on top of one, then if you want to take a plate, you have to take the top plate first, otherwise you will not be able to take it down or you will still have an accident. The plate that you place at the end of the stack should be taken if you want to take a plate on the data structure system, since this plate is on top of you. And the plate you put first will be the bottom,

Now when our code is number 1 it is assigned to the namevariable Bipon. Then only the function definitions go one by one A(), then B()and finally into the C()execution stack on the global execution context. Nothing will be excluded from inside the function as we have not called any of the functions yet.

Then we A()call the function at number 5 . It will now be positioned on the global execution context in the first execution stack and will now A()start executing the code from within. Now with a variable at number 1, some data is assigned there. But again another function B()is called at number 5 . So now Execution Stack A A()will have another new execution context B()on it and now B()the code will start executing from within. Now here also some data has been assigned to a new variable in number 1. Again another function called number 7 C()is called. So now another execution context C()will be found in the execution stack and now C()the code will start executing from within. Now C()Inside number 1 again, some new data is assigned with a new variable. And the console is logged in the next line which will now show on your console. So the log here is the first thing you see in your output. Now C()execute is over and it will move away. So now the execution context will go B()as it is now at the top of the execution stack. Now B()inside the console log of the number 12 will be printed on the output and so you will see this as the output in the second position. Now the same way B(), the last one and the execution stack will be gone. Now the execution stack will be at the top A(). So now A()it will be executed.A()Console logs located at number 5 will be printed at the output and this function will be finished and removed from the execution stack. And so you can see the output here. This is how the execution stack works in JavaScript. And so we see output like this.

Details on Execution Context:

It is very important to know the details of the execution context. You may have seen in JavaScript that you can call before you define a function and that code will work perfectly.

miew();
function miew() {
 console.log('Miew');
}

This code will work fine if you run it all together.

Or you can use a variable before defining it (before defining it will show the value undefined, no error).

console.log(miew);
var miew = 'Hello World!';

Output will come like this but no error will come

undefined

What causes it? Yes, that’s why we need to have a more in-depth knowledge of execution context so you can understand why it works.

When a function is called, there are two stages:

2. Creation phase

2. Execution Phase

2. Creation Phase: In Creation Phase, the variable object is created first. Then the scope chain is created.

What happens in the creation phase directly in Bengal:

• The arguments list of the arguments that are passed to the function is created
• The code scans all the functions and each function is stored in a variable object that usually points to the function.
• Then it looks for the declarations of the code variables. And undefinedsets the property for each declared variable .

2. Execution Phase: Then the code is executed in this phase. In the case of code execution, the code execution is executed by executing the context. This is why calling a function before defining it works fine. If you use any other variable before declaring it undefined is set as a value and no error shows.

Reference Source : JS Essentials: The JavaScript Engine , Execution Context , Understanding the “this” Keyword in JavaScript , Behind the Scene