What is Execution Context and Callstack
What is Execution Context and Callstack - How JS engine works behind the scenes?
What about Javascript do you like? do not enjoy it? dislike it? Whatever you do, the fact that Javascript is one of the most often used languages in the computer world and that it is expanding every day cannot be changed.
Atwood's Law is a remark attributed to Jeff Atwood, the founder of stackoverflow.
JavaScript will eventually be used for anything that can be written in it.
It's actually very easy to comprehend Javascript, and once you do, you'll fall in love with it. Let's begin with comprehending Javascript's execution and what makes it unique.
JAVASCRIPT ENGINE JavaScript is not natively supported by your browser; JS engine is required in order for it to function.
but how does the JS engine function. Do you realise it? You don't, so together, let's find out.
V8 for Chrome, Javascriptcore for Safari, and SpiderMonkey for Mozilla are a few of the well-known JS engines.
JS Engine , Execution context and callstack?
Are you familiar with the terms execution context and callstack? Let me clarify that for you: "Everything in Javascript happens inside the execution context." An environment established by the JS engine called the Execution Context (EC) allows JavaScript code to run.
It consists of two parts.
Memory element (Variable Enviroment) code element ( Thread of execution) I've created an age calculator to help you better understand it. Memory allocation and execution are the two steps in creating the JS execution context.
var YOB = 2002;
function getAge(YearOfBirth){
var currentYear = new Date().getFullYear();
var age = currentYear - YearOfBirth;
return age;
}
var rohansAge = getAge(YOB);
console.log(rohansAge);
On memory allocation, each function and variable is given a memory block in the heap. As can be seen in the YOB, the value of the variable rohansAge is undefined ( undefined is a special keyword which we will discuss in upcoming articles). The catch is that functions are allocated with code rather than undefined, which is why we can use them even before they are initialised. If you verify, the function's code is allocated rather than undefined.
Once the allocation phase is complete, the JS engine once more executes the entire code. It will read code from the thread of execution or code component line by line, and as can be seen, there is only one thread of code. As a single-threaded language, JS is known. Remember that everything is being executed within the execution context when YOB is first given the value 2002. The engine will bypass that since the function has already been assigned a value. What happens next when we have invoked the function getAge() later? Two different execution contexts exist.
Global Execution Context(GEC) Function Execution Context(FEC)
While a file may have several function execution contexts (FEC), there will only ever be one GEC. Till We now have a better understanding of global execution context. When we call a function, a new execution context is produced just for that function, and it will resemble this.
In the Second Phase, a fresh Execution context is constructed. It will do this during the memory allocation process. As the yearOfBirth parameter value is assigned as the argument value, the thread of execution will now run first. However, the GEC thread of execution is still stopped at line 7. JS is single threaded, meaning that only one thread can be active at once.
What is Callstack and why we need it?
Callstack is LIFO based stack which holds all the Execution context. Now if you don’t know what a stack is you can Click here;
Why do we need it ?
As we know Javascript is asynchronous and Single threaded It becomes hard to manage Which things to execute when this is where callstack comes in help.
according to callstack the latest execution context will be executed first.
Let’s learn with example
console.log('GEC start');
function outerFucntion(){
console.log('outer EC start');
function innerFucntion (){
console.log('outer EC start');
console.log('inner EC deleted');
}
innerFucntion();
console.log('outer EC deleted');
}
outerFucntion();
console.log('GEC deleted');
Can you determine how many execution contexts will be produced in this programme given that we are now executing the two functions outer and inner? Yes, you guessed correctly; there will be three. Global Execution context outer function execution context inner function execution context
THANK YOU FOR READING
