How does javascript work?
Let’s dive a little deeper into the most popular programming language in 2020 and understand how it works.
History
Javascript was created back in 1995 by Brendan Eich. This programming language was used in ‘Netscape Web Browser’. Back then in 1995, it was the most popular web browser. With javascript, Netscape was able to automate user’s interactions with specific components of a website.
With Netscape becoming so much popular with these features, other web browsers also wanted to implement user interactions. So they came with their own version of javascript.
This led to difficulty in understanding the basic fundamentals of this language. Then ECMA (European Computer Manufacturer’s Association) was able to standardize this programming language to all web browsers. To this day ECMA implements new features to javascript.
Javascript Engines
In order to execute javascript code, you need a javascript engine. These javascript engines are embedded in browsers and web servers, such as Node.js in order to allow run-time compilation and execution of javascript code. Different web browsers have different javascript engines.
ex:- Google Chrome — v8, Firefox — SpiderMonkey and Microsoft Edge-Chakra
Running Javascript
With javascript, we can write and run programs. A program is a block of code. When we run a program it simply does two things.
- Allocate memory
- Parse and execute scripts (read and run commands)
For these two purposes, the javascript engine has a ‘Memory Heap’ and a ‘Call Stack’.
Memory Heap:
Let’s analyze what javascript does when following variable definition appears in the code.
const a = 5;First, javascript will allocate memory for a number in the memory heap and then it will give a reference to that heap. Finally, the value(5) will be stored in that heap.
Call Stack:
Call Stack is where javascript will load and store executing statements. Javascript is a single-threaded programming language. That means, javascript only has an exactly one call stack.
example 1:-
console.log('first');
console.log('second');/*
---Output---
first
second
*/
In the above code, we can see two simple print statements. Javascript runs a one print statement in these steps.
example 2:-
//function inside a function
function firstFunction() {
function secondFunction(){
console.log('10');
}
secondFunction();
}
firstFunction();
The functions will be loaded into the call stack in this way. The first statement to be fully executed and removed will be “console.log(10)”. So the javascript call stack access functions by using the First In Last Out (FILO) method.
example 3:-
//Recursive Functions
function recursiveFunction()
{
recursiveFunction();
}
recursiveFunction();
If you run the above code in a console, two things can happen, either console will crash or the console will throw stack overflow error. When this recursive function() load into the call stack recursively, there will be a time where the call stack does not have enough space to load another function. The program will crash and throw an error at that moment.
Now we have discussed synchronous programming with these three examples. In a nutshell, synchronous programming means that statements will be executed one by one.
Well, this brings up the question ‘If javascript executes statements one by one, how does javascript is able to build all these responsive websites?’
Javascript also can be used as an asynchronous programming language. That’s why, in order to run javascript we need more than memory heap and a call stack we need a javascript run-time environment.
Let’s understand the javascript asynchronous behavior with the following example.
example 4:-
//using setTimeout
console.log("first");
setTimeout(()=>{
console.log('second');
}, 2000);
console.log("third");
/*
----Output----
first
third
second
*/I have provided the output of the above code segment. Examine the code segment along with the output. You might see a strange behavior of javascript. Let’s analyze how javascript runs the code segment.
In the beginning “console.log(‘first’)” statement will be thrown into the call stack. After the execution, that statement will be completely removed from the call stack. Next in line will be the second function, we are passing an anonymous function as the first parameter and the second parameter is “2000”. In javascript, we use setTimeout function to call a function or evaluate an expression after a specific number of milliseconds.
The setTimout function does not load into the call stack at once, it loads into a place called ‘Event Table’. In that Event Table, “console.log(‘second’)” statement will wait for 2000 milliseconds. After that time period, it will be loaded into a place called ‘Event Queue’. Now, what does the call stack do when this process happens?.
Call stack will load the third statement, “console.log(‘third’)”. This means the call stack does not have a connection between the Event Table or Event Queue. Execution happens and the third statement will be removed thereafter. Event Queue has a companion called ‘Event Loop’. Event Loop’s job is to check whether the call stack is empty and if that so, then load the statement from ‘Event Queue’ into the call stack. After the execution of the third statement, the Event loop observes that the call stack is currently empty and loads that second statement[console.log(‘second’)] into the call stack. The second statement will be executed and removed thereafter. That’s the reason why the printed lines are not in order.
Javascript uses these asynchronous behaviors into image processing, sending requests, API calls and many more. Also, javascript can be defined as a non-blocking dynamic scripting language along with these features.
So that’s how javascript runs programs in a synchronous and asynchronous mode. I hope you find this medium article helpful in understanding how javascript operates. Looking forward to seeing you in another medium article just as exciting as this.
