How does javascript work?

Let’s dive a little deeper into the most popular programming language in 2020 and understand how it works.

Image for post
Image for post

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.

Image for post
Image for post
How the Netscape web browser looks back in 1995.

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

Image for post
Image for post
Different javascript engines along with web browsers.

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.

  1. Allocate memory
  2. Parse and execute scripts (read and run commands)

For these two purposes, the javascript engine has a ‘Memory Heap’ and a ‘Call Stack’.

Image for post
Image for post

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.

Image for post
Image for post

example 2:-

//function inside a function
function
firstFunction() {
function secondFunction(){
console.log('10');
}
secondFunction();
}

firstFunction();
Image for post
Image for post

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();
Image for post
Image for post

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.

Image for post
Image for post
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.

Written by

Undergraduate | Developer | https://iamsahan.web.app/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store