Javascript is considered as the language of the web. It has grown in popularity recently and is now one of the top choices by organisations for developing websites and web applications. Along with Javascript, we have a lot of packages provided through npm that ease our way of web development. Many libraries have been built over it to reduce developers' headaches of creating fast and dynamic web applications from scratch. But going more into the world of Javascript one should know how Javascript is working to write better code.
What is Javascript?
Javascript is a single-threaded, synchronous scripting language to develop dynamic and interactive web pages. Javascript uses a single thread to execute all of its code. This means the javascript engine executes one line of code at a time, and the rest of the other code has to wait until that line is executed. But still, Javascript can perform asynchronous tasks thanks to the web APIs present with the web browsers. Some examples of web APIs that Javascript uses are set timeouts, set intervals, DOM APIs, console.log, and fetch API. These all enable Javascript to simultaneously process multiple tasks, so that code is executed quickly.
Web Browsers have a built-in javascript engine that interprets, compiles and executes all of the javascript code. All of the Javascript code is executed in two phases.
Memory Allocation
Code Execution
In the first phase, memory is allocated to all the variables and functions. Javascript engines read the entire code line by line and find all the variable declarations and function definitions. Then these variable declarations and functions are hoisted at the top of the Javascript code. This process is known as hoisting. Hoisting is one of the key concepts in Javascript code which we will learn later on. Till now we need to understand this concept that first Javascript allocates memories to all the variables and functions in its declared in its code before executing any of the code.
Callstack
Callstack is the place where all of the javascript code is executed by the javascript engine. As the name suggests it is a stack and follows LIFO methodology just like stacks. And this is the reason Javascript is a synchronous language as it executes one task at a time. The main function of this Callstack is to create an execution context to execute all the code line by line. To execute the code Javascript engine creates a Global Execution Context and places it at the very bottom in Callstack.
Let's understand this better with an example.
var a = 3;
var b = 4;
function Calculate(a, b)
{
var result = a*a + b*b + 2*a*b;
return result;
}
var val = Calculate(a,b);
console.log(val); // 49
Now first of all Javascript will create an Global Execution Context in which we will have two things Memory allocation and code execution. So initially all the variables and functions are allocated value memory and are put at the top of the code. Variables are initialized with an undefined value and functions with code written inside them.
Once all the memory is allocated to variables and functions then line-by-line code is executed first, a is assigned value of 3 and then b is assigned a value of 4. After this, the code moves to the line where variable val is assigned a value. There Calculate function is invoked, now to execute this function another local execution context for this function is created. This execution context is placed on top of the Global execution context and GEC execution is halted until the Local execution context is completely executed. The same process of memory allocation and code execution takes place.
Once the code execution reaches the last line of the function calculation. The control is transferred back to the global execution context and this local execution context is removed from the call stack freeing up the memory allocated to it. Now Callstack proceeds further with its execution and logs the val to the console. As all of the code of GEC is executed this Global execution context is also removed from the call stack and the code execution is completed. This is the step-by-step process of how the javascript code is executed, now this is only the case when we have all the synchronous tasks and no asynchronous tasks like web APIs do not come into the picture.
Now the question comes to how the javascript being single-threaded handles multiple tasks at a time. There are some more features, that help the javascript engine to handle asynchronous tasks. Well, we will cover that in our next article. For this article, this is all. Keep learning Javascript.....