How JavaScript Works Behind The Scenes & Execution Context [2022]

JavaScript is a programming language that executes code in the browser. It’s difficult to understand because it does weird things you don’t expect.

This blog will help you understand JavaScript by showing many weird things it does. It will also show you how to use JavaScript for good, not evil.

JavaScript is a single-threaded language. It’s not like that other popular language that you might have heard of. In single-threaded programming, the program is executed line by line, one line at a time. People usually mean single-threaded when they say synchronous.

JavaScript Single Threaded or Multi Threaded

JavaScript is a single-threaded, synchronous language. This is due to the fact that it can only execute one command at a time and in a specified order.

When we say Single Threaded, we indicate that JavaScript can only run one line at a time. When we say Synchronous and Single Threaded, we imply that JavaScript can only run one command at a time and in a specified order.
This means that it can only travel down once the current line has completed its execution.

What is Execution Context?

JavaScript is a programming language that runs client-side (inside the browser). Everything happens inside of an execution context. You can think of this as a big box or container that holds your code. Before we go further, let’s just make sure you know what an execution context is.

JavaScript is a language where everything happens inside a container. This container is called a “Execution Context”. It can be thought of as a container or a place where the code is executed.

In this container, there are two components:

  • Memory Component
  • Code Component

The Memory Component is also known as the variable environment. This memory environment stores variables and functions as key-value pairs.

The second container is the Code Component, which is where the code is executed line by line. It’s also known as a “Thread of Execution“.

JavaScript Execution Context

Execution of the code – Explained

Let’s write some code.

We’ll set up two variables, first_name and last_name and assign them values of ‘Black’ and ‘Rupee’. Then we’ll add the values of first_name and last_name together and store the result in _concat. Here’s how it will work:

The browser is divided Execution Context into two parts, Memory and Code. The browser will run the JavaScript code in two distinct phases. First, it will create the memory space for the code to use. Then, the code itself will be executed.

The Browser will execute the JavaScript code in two-phase

  • Memory Creation Phase
  • Code Execution Phase

In the memory creation phase, JavaScript runtime will scan the code and allocate memory to every variable and function found in your code. It will save undefined for all variables, and it will save the complete function code and the scope along with it for functions.

In the second step, code execution, it begins running through the whole code line by line.

When it comes across var first_name = ‘Black’, it assigns ‘Black’ to ‘first_name’ in memory. Until recently, the value of ‘first_name’ has been undefined.

It also accomplishes the same thing with the last_name variable. It assigns a value of ‘Rupee’ to the variable ‘ last_name‘. Then it computes and saves the concatenated string in memory, which is ‘Black Rupee’. Now, in the final step, it outputs the _concat to the console and then removes the global execution context, indicating that our function is complete.

How Functions Are executed In Execution Context?

When compared to other programming languages, JavaScript functions work differently.

Let’s look at a basic example.

The function in the above example accepts a number as an input and returns the square of the number.

When we run the code, JavaScript will construct a global execution context and allocate memory to all variables and functions in the first phase, as seen below. It will save the complete function in memory for functions.

The interesting element is that when JavaScript executes functions, it creates a new execution context within the global execution context.

When it comes across var nĀ = 2, it assigns 2 to ‘n’ in memory. Line 2 is a function, and because it was given memory during the memory execution phase, it will skip right to line 6.

The square2 variable will call the square function, and JavaScript will launch a new execution environment.

In the memory creation step, this new execution context for the square function will assign memory to all variables existing in the function.

It will execute the code line by line after allocating memory to all variables within the function. It will compute ans after obtaining the value of num, which is equal to 2 for the first variable. After calculating ans, it will return the value that will be allocated to square2.

As soon as the function returns the value, it will delete its execution context, indicating that it has finished its task.

Memory-creation-step-for-New-Execution-Context-functions

It will now proceed in the same manner for line number 7 or the square4 variable, as illustrated below.

New Execution Context for square4 function

Once all of the code has been performed, the global execution context will be deleted, and JavaScript will execute the code behind the scenes in this manner.

Call Stack

When a function in JavaScript is called, JavaScript establishes an execution context. As we layer functions inside functions, the execution context becomes more difficult.

The Call Stack is used by JavaScript to handle the creation and deletion of code execution contexts. The Call Stack is a method that allows a script to maintain track of its position in a script that calls many functions.

Let’s look at an example.

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

We’re going to write a function called ‘a’ that calls another function called ‘insideA‘ that returns true. I realize the code is useless, but it will help us understand how JavaScript handles callback functions.

A global execution context will be created by JavaScript. During the code execution phase, the global execution context will assign memory to function ‘a’ and invoke ‘function a’.

In the call stack, an execution context is formed for function a, which is put above the global execution context. Function a will allocate memory and call function insideA. An execution context for function insideA is constructed and put atop the call stack of ‘function a.’

This insideA method will now return true and be deactivated from the call stack. The execution context will be removed from the call stack because there is no code inside ‘function a.’

Finally, the global execution context is deactivated from the call stack.

Reference

Source 1, Source 2, Source 3

Thanks for reading.

Share your love

Leave a Reply