Javascript execution in a browser

When we write codes for a javascript program in an Html file, the browser makes steps to make the execution of the javascript code. It is important to know the procedure of performing operations by the browser to make executions. If you know the procedure, you can find errors easily in your code. And you can also write code according to the browser's execution process.

Steps of execution of javascript code

Here is step by step process of javascript execution.

In vscode, we have written code for an Html file and also written code for javascript by making such variables and functions. We have written code to clear function hoisting also by calling functions before their declaration.

We have created an 'index.html' and 'function.js' in vscode and linked 'function.js' in HTML as Javascript code.
When index.html and function.js is ready, run it into the browser by 'open the live server'.
Right-click on the browser's window and click on 'inspect'.
Click on Debugger. You will find Sources and then click on 'function.js' to find the file in the right side space.
Click on the line number to set a debugging breakpoint from which we can see the execution process of Javascript. For example, we have set this on line number 1, 5 and 12.
After setting the breakpoint, click on reload in the browser and then you will find a toggle with a play button above the inspection area.

You will also see breakpoints, Call stack and scopes on the right side of the debugger area.

You can also see a (global) below the call stack. It is a global execution context. When execution starts, a global execution context is created in the call stack.
Click on the play button to find the next breakpoint process.

In this step, the execution process comes to line number 12 in function two. You can also see function two in the call stack above of the global execution context(global). After the execution of function one, function one is removed from the call stack and function two is taken place.

In scopes, variable 'c' has also taken value(b-a).

During the execution of functions, a function creates a local execution context of its own and operates similarly to the global execution context, but only in its function scope in the memory section of the global execution context.
Again click on the play button and jump to the last breakpoint of the scipt.

In this last step, the function goes out from the call stack after the execution of that function and the rest execution takes place.
To complete the execution of the script click on the play button again.

You can see clearly that the execution of the script is completed and the global execution context goes out from the call stack and the call stack is also hidden from the list.