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.
Find global execution context in a browser
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.htmlandfunction.jsis 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.
What is the global execution context?
A global execution context creates a global scope of the script code of Javascript. It stores all accessible variables and functions in a global area.
How does global execution work?
When execution starts, the global execution context scans variables and functions in the source code. And collects them into code in a code memory table like this.
It is the time when memory has not stored the value of variables.
When the value of a variable passes through memory as well as code also takes the value and changes it from undefined to value. See this table for more clarification.
When a function is called in a script code file, then memory creates a local execution context of that function which is called. A local execution context stores variables inside the code initialized by undefined.
When the function executes, the memory will take the value of that variable and the code segment also takes the value.
After the successful execution of function one, function two will take place.
