How JavaScript Works: A Visual Guide🔥 🤖

Published in

JavaScript in Plain English

6 min readDec 14, 2020

JavaScript is one of the most loved and hated language in the world. It is loved because it is potent. You can make a full-stack application by just learning JavaScript and nothing else. It is also hated because it behaves in unexpected and upsetting ways, which, if you’re not invested in understanding the language, might make you hate it 💔.

This blog will explain how JavaScript executes code in the browser, and we will learn it through animated gifs 😆. After reading this blog, you will be one step closer to becoming a rockstar developer. 🎸😎

Execution Context

“ Everything in JavaScript happens inside an Execution Context.”

I want everyone to remember this statement as it is essential. You can assume this Execution context to be a big container, invoked when the browser wants to run some JavaScript code.

In this container, there are two components 1. Memory component 2. Code component

Memory component is also known as variable environment. In this memory component, variables and functions are stored as key-value pairs.

Code component is a place in the container where code is executed one line at a time. This code component also has a fancy name, namely ‘Thread of Execution’. I think it sounds cool!

JavaScript is a synchronous, single-threaded language. It is because it can only execute one command at a time and in a specific order.

Execution of the code

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

Let’s take a simple example,

In this simple example, we initialize two variables, a and b and store 2 and 4, respectively.

Then we add the value of a and b and store it in the sum variable.

Let’s see how JavaScript will execute the code in the browser 🤖

The browser creates a global execution context with two components, namely memory and code components.

The Browser will execute the JavaScript code in two-phase

1> Memory Creation Phase

2> Code Execution Phase

In the memory creation phase, JavaScript will scan through all the code and allocate memory to all the variables and functions in the code. For variables, JavaScript will store undefined in the memory creation phase, and for functions, it will keep the entire function code, which we will be looking at the following example.

Now, in the 2nd phase, i.e. code execution, it starts going through the whole code line by line.

As it encounters var a = 2, it assigns 2 to ‘a’ in memory. Until now, the value of ‘a’ was undefined.

Similarly, it does the same thing for the b variable. It assigns 4 to ‘b’. Then it calculates and stores the value of the sum in memory which is 6. Now, in the last step, it prints the sum value in the console and then destroys the global execution context as our code is finished.

How Functions Are Called In Execution Context?

Functions in JavaScript, when you compare with other programming languages, work differently.

Let’s take an simple example,

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

The above example has an function which takes an argument of type number and returns the square of the number.

JavaScript will create a global execution context and allocate memory to all the variables and functions in the first phase when we run the code, as shown below.

For functions, It will store the entire function in the memory.

Here comes the exciting part, When JavaScript runs functions, it will create an execution context inside the global execution context.

As it encounters var a = 2, it assigns 2 to ’n’ in memory. Line number 2 is a function, and as the function has been allocated memory in the memory execution phase, it will directly jump to line number 6.

square2 variable will invoke the square function, and javascript will create a new execution context.

This new execution context for the square function will assign memory to all the variables present in the function in the memory creation phase.

After assigning memory to all the variables inside the function, it will execute the code line by line. It will get the value of num, which is equal to 2 for the first variable and then it will calculate ans. After ans has been calculated, it will return the value which will be assigned to square2.

Once the function returns the value, it will destroy its execution context as it has completed the work.

Now it will follow a similar procedure for line number 7 or square4 variable, as shown below.

Once all the code is executed, the global execution context will also be destroyed, and this is how JavaScript will execute the code behind the scene.

Call Stack

When a function is invoked in JavaScript, JavaScript creates an execution context. Execution context will get complicated as we nest functions inside a function.

JavaScript manages code execution context creation and deletion with the the help of Call Stack.

A stack (sometimes called a “push-down stack”) is an ordered collection of items where the addition of new items and the removal of existing items always takes place at the same end eg. stack of books.

Call Stack is a mechanism to keep track of its place in a script that calls multiple functions.

Let’s take an example

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

We are creating a function ‘a’, which calls another function ‘insideA’ that returns true. I know the code is dumb and doesn’t do anything, but it will help us understand how JavaScript handles callback functions.

JavaScript will create a global execution context. Global execution context will assign memory to function ‘a’ and invoke’ function a’ in the code execution phase.

An execution context is created for function a, which is placed above the global execution context in the call stack.

Function a will assign memory and invoke function insideA. An execution context is created for function insideA and placed above the call stack of ‘function a’.

Now, this insideA function will return true and will be removed from the call stack.

As there is no code inside ‘function a’ execution context will be removed from the call stack.

Finally, the global execution context is also removed from the call stack.