How Does JavaScript Even Work? Things Which 90% of JavaScript Developers Don't Know! (Part 1)

JavaScript was initially developed as a frontend scripting language to fulfil the lacking dynamic behaviour of the web by Brendan Eich of Netscape for their Netscape Navigator browser.

From there, Javascript has today grown into such a huge ecosystem that you can develop applications on the web, mobile and desktop with just javascript which is impossible with any other language.

Now, if you have ever worked with JavaScript, you would have heard that Javascript is single-threaded, non-blocking and it is asynchronous as well.

*Isn't that counter-intuitive? * How can something be single-threaded and asynchronous as well?

Well, there are a lot of such things in JS and to understand it all, you need a deep dive into JS and its working.

So, let us try and understand the working on javascript which 90% of JS developers don't know!!

Firstly, let us see what is ECMA and what do these specifications tell us about JavaScript.

ECMA Script

ECMA basically stands for European Computer Manufacturer's Association and it defines a trademark standard for scripting languages like JavaScript and the JScript (Developed by Microsoft).

You would have heard ES6, ES7 while working with JS, the ES here stands for ECMAScript.

ECMA puts a lot of specifications in place related to notations, operations, syntax, functions, classes etc.

You can refer to all these specifications here: ECMAScript

But ECMA doesn't have any documentation on the event loop, non-blocking, asynchronous JS.

Hmm, so where do we go now? We go to the JS engines!!

Note: If you want to read more about the advent of JS and its whole history, here is a fantastic blog: Why are we creating a JavaScript-only World Wide Web?

JavaScript Engines

A JavaScript engine is basically a software that executes JavaScript code. There are various Javascript engines available. The most famous engines among the modern Just in Time Compilation engines are:

1. V8 ( Developed by Google | Used in chrome, Node.js runtime, Deno runtime)
2. Spider Monkey (Developed by Mozilla | Used in Firefox)
3. WebKit (Developed by Apple | Used in Safari)
4. Chakra (Developed by Microsoft | Used in Internet Explorer)

Check out the list of all JS engines here: List of ECMAScript engines (Wikipedia)

Now, as V8 is the most used javascript engine, from now whatever we discuss will be its implementation. Though the other mentioned engines are also similar with a few differences.

So, the V8 engine is what makes Javascript single-threaded as it comes with a single call stack (also called as the execution stack) or single thread.

The V8 engine comes with two main components which are

1. Call stack: This is where all the execution happens.
2. Heap: This is where the memory allocation happens.

But even standalone V8 doesn't make JS asynchronous.

So, how does it become asynchronous? Keep Reading.

So, let us try to understand the single-threaded nature of JS first and what does it mean. Then we will see how does it become asynchronous and what problem does it solve.

Javascript and the Single Thread

Let us get this single thread concept right!

Javascript being single-threaded means that there is only one call stack provided by the engine. All the execution happens one block after another in a sequential way. That means that all the upcoming code should wait until the current block of code is being executed.

One Thread == One Call Stack == One Thing at a Time

This is called the synchronous execution of code.

Note: Let me tell you that, Javascript can be multithreaded as well for example we can use multiple threads in Node.js using a module called worker_threads.

So, why do people call JavaScript a single-threaded language? It is because of the implementation of JS engines like V8 in the browsers which makes JS single-threaded because these engines have got only one call stack as already mentioned.

Now as you understood this, let us try a few programs with the main thread to understand the call stack and the problem with it.

Continue Reading the Blog Here