Learn Javascript Fundamentals-Scope, Context, Execution Context

In the road of understanding Javascript, difference between scope, context and execution context is crucial.

In Javascript, you write some code and they get interpreted by the Javascript engine. To understand behind the scenes, you need to have an understanding of basics. To achieve that, in this article, we will be focusing on the difference between scope, context and execution context.

Scope

Since this article is a part of Learn Javascript Fundamentals series, check out the rest of the series via the links at the end of article if you would like to learn more about the types of scope or how you can use it.

For a short explanation, scope is closely related to the visibility of variables. It is common to confuse scope and context, but in reality they are completely different. With scope, you control the accessibility of your variables. Variables created in global scope can be accessed from any scope whereas the local variables are accessible within the function in which they are created.

Context

Context is simply the value of “this”, the property of execution contextwhich will be explained later in this article. It also refers to the object that function belongs to.

Value of “this” differs by how the function is called. In global scope, value of “this” is always the window object.

console.log(this); // window

If the function is a method, the value of “this” is the object that method belongs to. Of course, “this” keyword is not that simple to understand. In this article, I am not going into the details of how “this” keyword work, just stressing out what its relation is to scope, context, execution context. Understanding how “this” works is really one of the hardest and also most important topics in Javascript. There are, fortunately, lots of resources. If you are unfamiliar, I suggest that you check them out.

1.MDNJavascript.info

2.Mastering The Javascript

3.This Keyword

Meaning of “this” keyword depends on how and where the function is called, not where it is declared. Its meaning changes every time a function is called from different execution context. Why execution context? Because “this” keyword is actually a reference to function’s current execution context.

Execution Context

Execution context is something that you need to know to understand how Javascript code runs. First of all, it is an abstract concept that represents the environment in which Javascript runs. What happens inside the execution context is two things basically. First one is parsing the code line by line and the second one is storing the variables and functions into the memory. In simple terms, it has two types;

1.Global Execution Context

2.Local Execution Context

Global Execution Context is the first thing that is created when you write Javascript code. It is the default context.

Local Execution Context, as you can imagine, is created when you call a function, not define.

Because it is an abstract concept, I am going to support it with an image.

Let’s walk through the image. When engine starts reading your code, it creates the global execution context, it starts parsing line by line and adds your variables to memory also known as global variable environment.

Let’s say you have defined a function like this;

function adding(num){
  let number=num+2;
  return number;
}

If you call adding function,

adding(3);

While the engine is parsing, if it needs to execute the function, new local execution context is created. In that execution context, parsing takes place and number variable is added to local memory, then parsing continues. After this, engine returns to the previous execution context.

Exiting the local execution context and continuing parsing in the previous execution context is achieved with return keyword. Those arrows in the image represents this cycle. Every time a function gets called, this happens again. Every function call results in different local execution context.

To sum up briefly;

1.Global execution context is created first.

2.Whenever a function gets invoked, called or executed, new local execution context gets created.

3.Engine starts parsing the code in global execution context.

4.When engine comes across a function call, it enters a local execution context, continues parsing in there.

5.When it handles function execution, it exits from that local execution context, returns to previous one.

This brings us to another important concept. How does engine know which execution context to enter or exit? The answer is Call Stack.

Call Stack, in a simple term, is a mechanism for Javascript Engine to keep track of execution contexts, which to enter, which to exit or which to return. At the bottom, there is global execution context. If a function gets invoked, we have a new local execution context and this one is pushed to the top of call stack. Once it’s done, it gets popped out. Let me explain it with an image;

So, what is going on here?

1.Engine starts parsing, global execution context is automatically pushed to the call stack.

2.Function1 gets invoked, local execution context is pushed to the top of global execution context. Engine will continue to parse after function1 is executed.

3.Inside function1, new execution context is created and gets pushed to the top of call stack. After function2 is executed, it gets popped out from call stack.

4.Function1 gets popped out after it is executed.

5.Finally, it returns to global execution context. Engine continues to parse and all of the code is executed.

Phases of Execution Context

Throughout the article, you may be wondering how the execution context is created. Despite being abstract, it is a process and the engine follows some steps in the process.

Basically it has two phases;

1.Creation Phase

2.Execution Phase

In the creation phase, engine first creates Activation object or Variable Object. This object consists of variables, arguments, function declarations. In this stage, they are assigned the value of “undefined”.

Arguments property is also an object, array-like object, that has a length property and all arguments passed to the function call are stored in this object.

After that, engine creates the scope chain. Each execution context knows its scope. It has a reference to its outer scopes all the way to the global scope and the engine searches variables, if exists or not, starting from the current to the global scope. And this is called scope chain. Scope chain is a list of objects consisting of its own variable object and its parents’ variable objects.

Lastly, the value of “this” is determined. In global context, its value is window/global object whereas in every function call its value may be different.

In the execution phase, variables are assigned a value and the engine executes the code.

If you would like to read more about Javascript Fundamentals, please take a look at the Learn Javascript Fundamentals Series.

1.Global Scope

2.Local Scope

3.Scope, Context, Execution Context

Happy Coding!!!