What, Why, and How JavaScript engine?
Hello there fellow readers, This article is for those who are curious🤔 about why we need an Engine, how it works and WTH is a JS engine!!!? So, This article is divided into sections. Why What and How JS works.
Disclaimer here — we will not go through the nitty-gritty (stack, memory heap, etc.). The article will only focus on the JS Engine. I have tried to make this article interactive not like other dull articles. so that you can understand and get everything that this article has to offer.
let's raise the Questions, won’t we?
What and Why JS Engine?
A JavaScript engine is a software component that executes JavaScript code. The first JavaScript engines were mere interpreters, but all relevant modern engines use…. etc🤯. (according to Wikipedia)
Let’s break the monotony: instead of understanding the above line😥, let’s understand this😌:
say suppose there are two people👥, one is french 👨🏻🎨 and another is German🧑🏻✈️, both need to have some conversation💬, how would they do? of course with the help of some translator/interpreter.
The same goes for the Computer and Your Code it needs an engine/intermediator as Your computer cannot understand the code, in technical terms, the computer doesn’t understand the source code, it understands the machine code.
it means this is what you understand:
‘Hello!’
and this is what your computer understands
‘ 01001000 01100101 01101100 01101100 01101111 00100001’
Source Code ➡️⚙️➡️ Machine Code
the way it converts the code determines the type. like interpreted, compiled, and JIT compiled.
you might have heard about the Compiled language, interpreted, and what is JIT compiled🤔????
and I believe😌 that many people think that javascript is interpreted language. let me tell you it is not❌. “JS is JIT (Just In Time) compiled language🤯”.
let’s understand each way.
- Compilation: in compilation whole source code gets converted into machine code at once, which has better performance. the compilation is faster because the source code has already been compiled, we are just executing it. so already we will have byte code/machine code ready.
- Interpreter: it does the same job, but line by line, not everything at once. which makes it 10X slow than compilers. code is read and executed simultaneously, JS used to be purely interpreted language. which made JS Much Much Much slower!!.
- So to avoid slow execution modern JS Use the approach of JIT (just in time) compilation, where source code gets converted into machine code, but unlike compilation, it doesn’t create the portable file. and execution happens immediately. it means that modern JS engine uses both.
Okay! okay! let me make it understandable🙂. let me give you a vague relatable example. suppose you know two languages Hindi and English, and your friend knows only English, and he desperately wants to read a Hindi book📖, how will you help him?
- Interpretation — You read a line and translate a line, again second line — translate a line. which takes a hell lot of time🕒,
- Compilation — You read the whole book- make your own version of the book📒 in Hindi and give your friend to read. so later whenever you need to explain to anyone you will be able to do it. which is a faster way.
- JIT compilation — You read the book, instead of making a copy of the book. you explain to your friend so no need for a copy of the book. which is the most efficient and fastest way.
Now Most Important Question — How JS engine works:
This is how JS code gets executed in the engine, which has to go through these steps. in order to convert the source code to machine code.
Let’s understand one by one:
- The first step would be “to code” for god’s sake!🤓, XD!
- Parsing: parse will convert the source code to a token (it means your code will be like const, message, =, ‘hello’. these are 4 tokens) then the token will be converted in a data structure called Abstract syntax tree(AST)🌲, which looks like this
These many lines of AST for Just one line of Hello😤?
This is just one line of code, imagine how extensive your program would be😳. you might be wondering🤔 why we need parsing to AST at all. can't we just compile whatever we have directly?
So, let me tell you that AST plays a critical role in validating the correctness✅ and proper usage of the program and language. (e.g. linting uses AST, for those of you who don't know about lint. it checks your code and shows errors, isn’t it cool 🤩), and AST is also used in other places like babel, webpack, minifiers, and syntax highlighters.
If you want to see what AST looks like you may want to check this website. or refer to this example.
3. Compilation: It converts ⚙️ AST to machine code/binary code, now the code has been converted into Binary code (0, 1), which our computer can understand.
4. Execution: It happens in the call stack, (which is another interesting topic to cover but we won’t be covering it here). the story doesn’t end here,
5. Optimisation: modern JS engine continually optimizes the code. Why JIT is fast? because it will create the unoptimized version of machine code first, so at least execution takes place as fast as it can, and in the background, there will be continual ♻️ optimization, which will optimize the code and previous unoptimized code will get replaced with new optimized ones.
Conclusion:
Why Do We Need Engine? ➡ Because Our code (source Code) cannot be understood by the computer, it only understands the binary code(0,1)/ Machine Code. so we need some intermediator for our conversion (that’s what our Engine Does),
What Engine Does ➡ Source Code ➡️⚙️➡️ Machine Code
How Engine Does ➡ It does in four steps
Source Code ➡➡️⚙️➡️➡ AST ( Abstract Syntax Tree 🌲) ➡➡️⚙️➡️➡ Binary Code/Machine code ➡➡️⚙️➡️➡ Execution in call stack ➡➡️⚙️➡️➡ optimisation ♻️
