Execution Context || Basics of Javascript

JavaScript

A lot of people struggle to understand the odd behaviour of javascript. To know Javascript a bit more, we will try to dig deep into its basic. Here in this post, we will cover Execution Context. This will help you and make your understanding more clear as to how your code get executed by javascript engine.

Execution Context

Whenever you run your code, its executed under an Execution Context. By default Global Execution Context is created by javascript engine for you and all your code get executed in it. Global Execution has Global object, a special variable ‘this’ and a reference to its outer environment. It also setup space for your functions and other local variables.

Here ‘this’ points to the global object of execution context. Outer environment points to parent or outer environment of execution context. In this case it will be null as Global Execution Context is outer most environment. I will cover how this outer invirornment reference get used in a separate post.

In the above example, we are decalaring 2 variables ‘myVar’ and ‘yourVar’ , also assigning them some values. We also defined one function ‘a’. When we run this code it will create an Execution Context(Global) that has both our variables and function ‘a’. Point to be noted here that we just defined our function and did not invoke it. So it wont create another execution context in Execution Stack. An Execution Context is only created(Except for Global) when there is a function invocation.

In the above example, we defined 2 functions ‘a’ and ‘b’ and then invoking function ‘a’. When we run this code, a Global Execution Context is created which load both of our functions ‘a’ and ‘b’ into memoryt as they are difined at global level.

When we invoke our function ‘a’ i.e “a();”, it creates another Execution Context of ‘a’ and put it on top of Execution Stack. Then it run code of function ‘a’ line by line. Which eventually invoke function ‘b’, that create another Execution Context of ‘b’ and put it on the top of Execution Stack. Once function ‘b’ is done with its code, its Execution Context is removed from top of Execution Stack. Now our Execution Stack has Execution Context of ‘a’ on top, so it run the remaining code of function ‘a’ . Once function ‘a’ finishes, its Execution Context also get removed from Stack.

At this point our Execution Stack have only one element ie Global Execution Context. If we have any remaining code in Global Execution Context that will get executed.

With above two example, you should have a better understanding of Execution Context, how they are created and destroy as your code get run.

Creation of Execution Context

Execution Context is created in two phase. 1) Creation Phase 2) Execution Phase

Creation Phase

In this phase, a global object is created. All your variables are hoisted and all the functions(those are defined in this context) are loaded in the memory. An reference to outer environment is also setup in this phase.

Execution Phase

In this phase, your code actually get executed.

Hope you enjoyed this post. Send any comment or feedback you have. Thanks

Originally published at www.techracers.com.