What is Execution Context and Callstack - How JS engine works behind the scenes?

Javascript

Javascript - do you like it ? don’t like it ? Hate it ? Whatever you do but that doesn’t change the fact that Javascript is one most used language in tech industry and it’s growing everyday.

The founder on stackoverflow Jeff Atwood gave quote also referred as Atwood’s Law

Anything that can be Written in JavaScript, will Eventually be Written in JavaScript

Javascript is a actually very simple you just have to understand and once you do you will fall in love with it. Let’s start by understanding how Javascript is executed and what makes it so different.

Javascript Engine

Your Browser natively doesn’t understand javascript, It needs something called JS engine to run it

but how does JS engine work. do you know it ? you don’t, let’s find it out together.

Some of the popular JS engines are V8 for Chrome , Javascriptcore for Safari and SpiderMonkey for Mozilla.

JS Engine , Execution context and callstack?

Have you Ever heard of Execution context or Callstack? No let me explain you get this one thing cleared “Everthing in Javascript happens inside execution context“. Execution Context (EC) is a enviroment created by JS engine to run a Javascript code.

It has two components

1. Memory Component (Variable Enviroment)
2. Code Component ( Thread of execution)

To understand it better I have designed a age calculator to make things clear. JS Execution context is created in two phases memory allocation and execution.

var YOB = 2002;
function getAge(YearOfBirth){
    var currentYear = new Date().getFullYear();
    var age = currentYear - YearOfBirth;
    return age;
}
var rohansAge =  getAge(YOB);
console.log(rohansAge);

In memory allocation all variable and functions are assigned a memory block in heap , as we can see in the YOB , rohansAge are variable which have been assigned value undefined ( undefined is a special keyword which we will discuss in upcoming articles). But here is a catch while variables are allocated with undefined the function is allocated the code, If you check contains the whole code of the function and that is the reason we are able to use functions even before intiallizing it.

After the whole allocation phase is over, the JS engine again runs the whole code Yess you heard it correct the it will read code line by line from the thread of Execution or Code component and as we can see there is only one thread of code JS is called singlethreaded language. First YOB is assigned value 2002, remember this everything is being executed inside execution context. Then as function is already assigned value engine will skip that. Later we have called the function getAge() What happens now. There are two type of execution context.

1. Global Execution Context(GEC)
2. Function Execution Context(FEC)

While a file can have more than one FEC, there will always be only one GEC . Till Now what we saw was Global Execution context, as soon as we call a function a new Execution context is created for that function and it will look something like this

Again new Execution context is created in Two Phase in This is what it will in Memory allocation phase. Now thread of execution will run first it will assign yearOfBirth parameter value as the argument value , While this all is happening the GEC thread of execution is still stuck at line 7. Because JS is single threaded and there can only be one thread executing at a time.

later age is calculated and It will look something like this :

BOOM! There is nothing left in thread to execute as it has reached the end So Now what will happen It will return age back to global thread and this FEC will be deleted.

Command Is back to GEC rohansAge is assigned the value of 20 and console logged 20.

there is nothing left for thread to execute so GEC is also popped out stack.

Next time someone ask what a execution context ?

Don’t be scared and answer them confidently

It is a enviroment in which a function is executed and it comprises of two components memory component or Variable enviroment and code Component or thread of execution.

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');

Here we are executing two functions outer and inner can you guess how many execution context will be created in this program ? Yes you have guessed it correct it will be three

1. Global Execution context
2. outer function execution context

3. inner function execution context

   This is how your call stack will look

First Inner EC will be popped as it was pushed in the last, followed by Outer EC and Global EC.

Thank you for reading and Being Patient .

Happy Coding.