In this first episode of our web development series, we will be diving into the first Fundamental aspect of JavaScript : How it runs wherever it runs. How it got Parsed to machine code. How it is Different from other languages. But while I sat down to write it with all my pieces, I came across a blog from Lydia Hallie : it was a part of her Visualized Series (btw she is awesome) and the blog was “🚀⚙️ JavaScript Visualized: the JavaScript Engine”. And it was a GREAT blog, exactly what I thought to convey and even more. So I am going to put that blog here, but I want to add some more bits {before, to, after} her blog to make it smoother for everyone of us. so try to be with flow here, even if you break out of curiosity, that is super fine, you can always come back.
➡️ A Runtime for this Yellow Language :
JavaScript can run in a large set of platform and devices but it needs a environment called JavaScript Run-Time : it is simply another program written in a different language with a built-in set of resources/services/tools that make the JavaScript simplify for Machines to understand and in-turn running the JS script. So from this first part we can take away that - wherever there is a JavaScript Runtime, JS can run there. For Example : to run it on servers, we have a powerful JS runtime called Node.JS. Browsers also have their respective runtimes.
➡️ What is inside that Runtime :
so what are those tools/services inside the runtime? : (Generally) those tools are a JS Engine - an Event Loop - Microtask Queue - Callback Queue - an API Environment. On the later episodes of this series we will check all these tools in details, but for this EP let’s deep dive into JavaScript Engine. Now a thing to note here is that these tools vary depending upon the platform the runtime is running. For example : set of APIs in a browser runtime will differ from the same part in Node.JS
➡️ JavaScript Engine :
Now it is perfect time to go through Lydia’s blog about it :
Now when we are done with her awesome blog, let’s just summarize those points once again (I added some bits here as well) :
Codes from the script gets loaded from either through Network, Cache or a Worker and parsed to a Byte stream decoder
the byte system decoder decodes the bytes into tokens. then those tokens are sent to a Parser (or a pre-parser)
the Parser generates nodes based on the tokens and creates an Abstract Syntax Tree (AST) : we can visualize a AST here.
the interpreter goes through the AST and generates byte code
the byte code and the type feedback are sent to the optimizing compiler which generates highly optimized machine code and now any machine can run this piece of JS now.
💡 Now a point here to note that JavaScript is called a Just-In-Time compiled language. It means it can use the compiler and the interpreter at the same time to be both fast and efficient. now this mix of compiler and interpreter varies from engines to engines.
➡️ Some Important Pieces :
the JavaScript engine is incomplete without THREE fundamental Pieces :
Memory Heap : is a large yet powerful memory manager which holds memory from every object and variable which gets created. It has its own super powers too, it is not just like the Memory inside our devices, it does much more, but again those are out of this episode’s scope.
Call Stack : is a data structure like place where JS engine keeps a track of all the executions, like which function is being currently being executed, what is beneath that waiting to be executed.
Garbage Collector : manages the memory heap. The garbage collector periodically checks the memory heap to identify objects and variables that are no longer being used by the program. It then frees up the memory used by those objects and variables so it can be reused, and it does so by using algorithms like “Mark & Sweep”
➡️ Famous JS Engines (and some super cool names) :
Microsoft Edge : it had been using a JS Engine called Chakra, but after the Chromium integration it is currently using Google’s V8 Engine
Mozilla Firefox : it uses SpiderMonkey : this is the original JS Engine developed by creator of JS himself in just 10 days
Google Chrome and NodeJS : they use the famous Google’s V8 Engine. (Fun Fact : the name V8 comes from eight-cylinder super car engines as a metaphor for its speed and power. V8 is coded using C++. The Interpreter in V8 is called Ignition, the Compiler is called TurboFan, and it has two garbage collectors named Orinoco and OilPan)