JavaScript | Behind the Scenes

We code in JavaScript to make websites, web applications, games, etc. but have we ever thought about how the code is executed? No, because we only think about ourselves. So here I am to explain how JavaScript executes its code with a simple example.

What is JavaScript?

JavaScript is a synchronous single-threaded language. You might be thinking, what the hell does synchronous and single-threaded even mean, right? So what it means is JavaScript executes one command at a time in a specific order. It has only one call stack that is used to execute the program(that is why it's called single-threaded).

How does JavaScript work?

Everything in JavaScript happens inside an execution context. Execution context is an environment in which the JavaScript code is executed. Let us assume execution context as a box. This box is divided into two components. Namely

• memory component
• code component

Memory Component

In memory the variables, objects and functions of the program are stored as key: value pair.

example:

a: 24
num: 3
add: {sum = a + b}

Here a, num, add are acting as keys whereas 24, 3, {sum = a + b} are acting as its values.

Note: The memory component is also known as "variable environment."

Code Component

In the code component, the code is executed one line at a time.

Note: The code component is also known as the "thread of execution."

What happens when you run JavaScript code?

An execution context is created as soon as the JavaScript engine executes a script. Each execution context has two phases:

• Memory creation phase
• Code execution phase

Let's look into this using an example

Line 1:   var n = 2;
Line 2:   function square(num) {
Line 3:   var ans = num * num;
Line 4:   return ans;
Line 5:   }
Line 6:   var square2 = square(n);
Line 7:   var square4 = square(4);

When the above code is executed memory creation phase, the code execution phase occurs in the following way.

Memory creation phase

In this phase, the memory is allocated to all the variables, functions line by line.

Initially, for functions whole code inside it is taken as a value, whereas for others a special value undefined is allocated.

Code execution phase

Execution of code takes place in this phase.

Step 1: The value 2 is allocated to the variable n

Step 2: Line 2 - 5 are skipped because nothing to execute yet.

Note: The code inside a function is not executed when the function is defined. The code inside a function is executed when the function is invoked.

Step 3: In line 6, we have function invocation. Whenever there is a program, a new execution context is created with memory and code execution blocks. This new execution context is present inside the code block of the global execution context.

Note: Function is a block of code designed to perform a particular task which can also be called a mini-program.

Step 4: Now, the code inside the function is executed. First, the variables num, ans are allocated with undefined as their value. Then the code is executed and new values are allocated to the variables(i.e., now num has value 2 and ans has value 4). Then the value of ans is returned to square2

Note: Return keyword tells the function to return the control to the execution context where invoked. Also, when the function is executed, the whole execution context is deleted.

Step 5: Similarly, while executing line 7, a new execution context is created and the value 4 is passed as an argument and after the execution of the function, the newly formed execution context is deleted.

Step 6: The global execution context is also deleted since the program is done with the execution phase.

Call Stack

JavaScript has only one call stack that is used to execute the program(that is why it's called single-threaded).

But what is a Call stack?

A call stack is a stack that maintains the order of execution of execution context and it has many fancy names like execution context stack, program stack, control stack, runtime stack, machine stack etc.

Generally, the global execution context is first pushed into the stack. Whenever there is function invocation, a new execution context is created and pushed into this stack and when executed, the context is deleted. This process happens multiple times depending on the number of function invocations present in the program. We can say a call stack manages the creation, deletion and control of the execution context.

Thank you so much for reading this. For better understanding, do checkout Akshay Saini's video on youtube.