How Javascript & Execution Context Works?

Do you know how javascript works and how the code is executed? Is Javascript Synchronous or Asynchronous? Is Javascript single-threaded or multi-threaded language. Don’t worry I will cover everything in this article just keep reading.

As we know Javascript is a runtime environment programming language, there is an environment to run this JS code. The most popular Javascript environment is Browser & Node JS. Browser or Node Js behind the scene has the most important tool that is Javascript Engin. There is a lot of Javascript Engin like Google Chrome have (v8), SpiderMonkey for (Firefox), and Chakra for (IE, Edge), and so on.

Before I dive into deep remember “Everything in Javascript happens inside an execution context “.

What is Execution Context?

Execution context is a place where all Javascript code is executed. You can assume this execution context like a big box or container in which Javascript programs are executed. Actually, it has two-component in it, in which the first component is the memory component and the second component is called the code component.

Memory Component: It is a place where all the Javascript variables and functions store as a key-value pair there is also used the heavy word for this memory component is also called “variable environment”.

Code Component: Simply, the place where all the code is executed line by line is also known as a “thread of execution”.

here is the time to understand the core fundamentals of Javascript read this carefully. “Javascript is Synchronous single-threaded programming language”.

What is Synchronous single-threaded?

Javascript is a Synchronous single-threaded programming language that means Javascript can only execute one command at a time and when I say synchronous single-threaded that mean only executed one command at a time in a specific order. It means it only moves to the next line once the current line is executed this behavior of language is called synchronous single-threaded.

What happens when you run Javascript code?

It creates an execution context. Let’s see how this beautiful execution context is created with this given code example.

When Javascript Engine sees this code, first of all, it’s create ‘Global Context’ and in this execution context it has two-component that is memory component & code component but remember this execution context is created in two phases the first is the creation or memory creation phase this is a very critical phase. let’s see how this phase is done and then move to the code execution phase.

Memory Creation Phase: In the first phase the Javascript skims through the whole program line by line and it allocates the memory to all the variables and functions as soon as counter the first variable it reserves memory for it and allocates a special undefined value but for the function, it stores the reference for it.

Code Execution Phase: In this phase, JS again skims through the whole program and performs the required calculation, and executes it. In our example, it places the value of a to the placeholder or identifier that is a.
And when the function b is invoked then it creates again new execution context. Like this,

and the output is,

After the whole program will be executed the execution context will vanish.

Call Stack: Javascript manages this execution context in the call stack. This stack works with the concept of Last In First Out (LIFO). Call stack maintains the order of execution context.

Call stack also called some different name like,

1. Call Stack
2. Execution Stack
3. Runtime Stack
4. Machine Stack
5. Program StackControl Stack