JavaScript at ground level!!!

Deep dive in JavaScript

JavaScript is one of the most popular language out there in the industry.

With emerging technology and birth of new languages, JavaScript is a language which you can blindfoldly rely on and it’s not going anywhere for minimum a decade.

In this blog post, I am not going to tell anything about code or any library or any framework but pure JS working. How the browser interprets the code and execute it? Where the variables, functions are stored in memory?

I will also not get very deep into it as it would take a day to type me all underlying principles. I would be giving just a wider picture so that everything can become crystal clear and you will surely love it.

ORIGIN

In September 1995, a Netscape programmer named Brandan Eich developed a new scripting language in just 10 days. It was originally named Mocha, but quickly became known as LiveScript and, later, JavaScript.

ECMAScript

It is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers so that everyone have a single form and functionality remains constant across platforms.

JavaScript is a single-threaded synchronous language…

Execution Context is basically a concept of environment that is setup before execution of any JS program.

There are two things inside this execution context :

1. Memory Area (Allocation area OR Variable Environment)
2. Code Area (Thread of execution)

Before execution of any JS program, a global execution context is created.

The execution of a JS program is done in 2 Phases. In first phase, memory is allocated to the variables and functions in the form of key value pair objects in the browser. In second phase, code is interpreted line by line and if there is any error, it is reported and the remaining execution of program is paused until the error is fixed.

Global execution context

Now I will be explaining everything with the help of a simple program.

var a = 10;
var b = 20; 
function sum(num1 , num2){
    return num1 + num2;
}
sum(a,b);

Before starting the execution of this program a global execution context will be created and it will look something like this:

First of all all the variables and function will be created in the phase one i.e memory allocation. It will make key value pairs of variables and functions . The variables are assigned a special value i.e “undefined”. Then the code will start to execute from the very first line and a and b will be assigned value 10 and 20 respectively.

Then it will skip the function body and when it reaches the last line where we invoke the function sum(), a new execution context will be created all together for the function containing memory and code area.

This is the real beauty of JS, At the time of invoking each functions, a completely new execution context will be created and it will look something like this :

Sum fn execution context

num1 and num2 i.e the parameters of the function are allocated memory and given a value of undefined. When the code is interpreted from the first line of the function , it will receive a and b i.e the arguments passed to function with value 10 and 20 as in global context their value is 10 and 20 respectively.

sum(num1 , num2) → The value of num1 and num2 will be 10 and 20 in the memory area respectively.

Then in the second line when it encountered the return statement it will calculate the sum i.e num1 + num2 and the control of the program will again come to global execution context and the value returned will be placed in place of sum(a,b)

NOTE : Whenever a return statement is encountered the execution context created gets destroyed and control of the program is returned to global execution context.

Management of contexts(Call Stack)

You might be wondering that it is a cumbersome task to keep track of all the execution context and destroying them. So here again you will get to see the beauty of JavaScript.

A stack is used to keep the record of all the execution contexts. It is called call stack.

Whenever a program is created a global execution context is created and pushed to the call stack. Whenever a function is called and another execution context is created, it is pushed again to the same call stack and whenever it encounters a return statement, the context is popped out of the stack.

Call Stack

This is the basic functionality that runs behind the hood of every JS program. It’s hard to grasp at first but relax, you will understand it and whenever you will see a JS program your brain will start thinking of this functionality.

Hope you will like it and If you want more such blog post do follow me and hit that clap button.