How JavaScript Works: Execution Context

To be able to see the bigger picture of some piece of code you must know how that particular programming language works under the hood. In this article, we will see how the JavaScript works behind the scenes.

Execution Context and Window Object

Every block of code written to work properly it needs some environment when it can run, and it is no different for the JavaScript too. Say hi to the Execution Context which is the place where the JavaScript code is running. To have a picture of the Execution Context, think of it like some kind of box, container or wrapper which stores variables and which a piece of JavaScript code is evaluated and executed.

Global Execution Context

The default execution context is the global execution context, which means all of the code (variables and functions) that is not inside of any function is executed. You can think of this Global Execution Context as some global object which is the window object. Everything that we declare in the global context is attached to the window object, for example:

var firstName = "Ace";
firstName === window.firstName // True

Declaring the variable firstName or window.firstName is the same thing, think of it like firstName is a property of window object.

Function Execution Context

What about the code that is in functions? each time we call a function, that function is getting a new execution context called function execution context on the top of the execution stack. Let's see some practical example:

var name = "Ace";

function first(){
  var a = "Hello";
  second();
  var x = a + name;
}

function second(){
  var b = "Hi";
  third();
  var z = b + name;
}

function third(){
  var c = "Hola";
  var z = c + name;
}

first();

Our first declaration, the variable name is not in any function, which means we are in the global execution context. The function first(), function second() and function third() declarations are also in the same execution context. When we go to the last line (49) where the first() function is called, we will get a new execution context on the top of the execution stack. Every execution context that is on the top of the execution stack becomes an active context in which the code is executed.

Now inside our new execution context (line 33), we have a variable a stored, on the next line (34) we call the second function which again new execution context will be created on top of the execution stack, which also now becomes an active context.

Here inside the execution context of the second function, we have a variable b stored inline 39. Inline 40 we are calling the third function which will again create a new execution context on top of the execution stack.

Inside the execution context of the third function, we have a variable c and z and nothing more. So our third function has finished all of its work and we say that the function returns, and it's execution context it's removed from the top of the execution stack.

After that, the context of the second function which called the third function becomes the active context again, and we continue on line 41. Now the z variable is updated and the second function finishes all of its work and returns, which it's execution context is also removed from the stack.

Now the context of the first function is again the active context, and the code continues on line 35 where the x variable is updated and because there is no more work to be done inside the first function, we say again that the function returns and its execution context is removed from the execution stack.

How Execution Context is Created

As we said before we can associate an execution context with an object, this object has three properties:

1. Variable Object (VO) - which contains function arguments, inner variable declarations and functions declarations.
2. Scope Chain - which contains the current variable objects as well as the variable objects of all of its parents.
3. "This" variable - which is pointing to the current object.

Now let's see how the execution context is created. As we said before when a function is started an execution context is put on top of the execution stack, this process happens in two phases:

1. Creation phase
2. Execution phase

In the creation phase we first have the creation of the Variable Object, second the creation of the Scope Chain, and at the end "this" variable is set. In the execution phase, the code that generated the current execution context is run line by line, and all of the variables are defined. If it is the global context, then it is the global code that is executed.

If you want to go deeper about how JavaScript works, I can recommend you to read this book: How JavaScript Works.