Advance JavaScript: Execution Context

Disclaimer: This topic assumes a basic understanding of functions and contexts in javascript.

Without wasting any time, let’s jump directly to what we are here for.

Whenever javascript interpreter starts execution of a function, it creates an execution context for that function. It will stay there till the execution of that function is going on and will be discarded as soon as the execution of the function is completed.
This execution context contains everything that is required to execute that particular function. It creates an environment which is required to execute a particular function. It is created every-time a function is invoked. Even if we are invoking a function twice, it will create a separate independent context for it every time.

Execution context provides below object attributes required during execution,

1. scopeChain: Required dependencies which can be variables or functions from parent functions or scopes. They can be global APIs, objects etc. They are maintained in the form of scopeChain which is basically an array containing required scope objects.
2. variableObject: Variable object contains all the variables declared with that particular functions along with their values. Every time any statement execution needs a variable value, it refers to this object for it’s the latest value.
3. this: With every function definition, a new context is created and added to that instance of the function. Now, this current context is accessible inside the function using ‘this’ keyword. Printing ‘this’ will give us current function only, not the outer scope or global scope.

A new execution context is created for every function call and is destroyed as soon as that call is completed. As soon as we call a function, JS engine creates an execution context for that function and starts executing it within that execution context.

Execution stack values in the above case.

Starting with a global context, every time an existing function is invoked, it creates an execution context and that execution context is pushed to the top of a stack called ‘Execution stack/Call stack’. Once this execution context/function is executed, that particular execution context is removed from stack and control is passed to context immediate below it.

This stack is provided with a certain size and can’t exceed that value. For chrome, this is generally between 16,000 to 17,000 which is quite high and enough to execute a large number of functions at any given time.
Also, we must be aware of the error thrown in the console as ‘Maximum call stack size exceeded’. This error is thrown whenever this stack runs out of size and couldn’t handle a large number of function calls. In almost all of the scenarios, the reason behind this is infinite loop running due to some error in our code.

Though this is a little advance topic and doesn’t matter much while coding but knowledge of it can surely save us from obvious blunders. Also, this can help us to write better and more performant code.

Hope it was helpful, please feel free to share your thoughts via comments.