How does JavaScript actually work?
If you are a JavaScript developer, you would be curious to know what happens behind the hood when you write and run your JavaScript code.
Before starting with the working of JavaScript, let's clarify our concepts about some basic terminologies and how any programming language works in general.
The code we write is written in a high-level language (Java, Python, C++ etc). The computer needs to execute this code but unfortunately, computers only understand machine code (zeros and ones). So there should be someone (a translator) that will take our code (high level language) and convert it into computer-readable machine code.
This translation can be done in 2 ways
- By Compiler
- By Interpreter
A compiler reads the entire code and creates a new file that contains executable machine language code.
eg: When a C program gets compiled, a new executable file gets created.
An Interpreter reads the code line by line and translates it into machine-readable code.
Both, the compiler and interpreter have their own pros and cons.
When the code is compiled, the machine has a better understanding of what is going to happen before the code starts to run which makes the execution faster later on, but it takes some time up front for this process.
On the other hand, when the code is interpreted, the execution starts immediately and hence faster, but the lack of optimizations makes it really slow with large applications.
Let's understand how JavaScript runs…
JavaScript code can be executed on 2 environments
- Browser
- Node js environment
In this post, let's discuss about Browser.
When it comes to JavaScript, there is an engine that does the conversion from high level code to machine code.
Every browser has their own engine
- V8 is Google’s implementation of the engine for its Chrome browser.
- SpiderMonkey was the first engine built for Netscape Navigator and now powers FireFox.
- JavaScriptCore is what Apple uses for the Safari browser.
Parser: It does lexical analysis of the code that breaks the code into tokens, checks for its syntax and creates an AST if no syntactical errors are found. This process is also called tokenization
Explore more about AST on https://astexplorer.net/
- JavaScript is interpreted by an interpreter named Ignition as well as compiled by a JIT optimizing compiler named TurboFan.
- Initially, the ASTs generated in the previous step are given to the interpreter which generates non-optimized machine code (Byte code) quickly and the execution can start with no delay.
- This is then given to the compiler that finally generates
machine code 🎉
ECMAScript
ECMAScript is a scripting language specification on which languages like JavaScript, JScript etc are based.
The ECMAScript specification is a blueprint for creating a scripting language. JavaScript is an implementation of that blueprint. On the whole, JavaScript implements the ECMAScript specification as described in ECMA-262
Babel
Sometimes, the old browser does not understand the
newer ES syntaxes (>ES5).
This is where Babel comes into the picture. Babel is a transpiler/compiler that converts modern ES code into a backwards compatible version of JavaScript that current and older browsers or environments can understand.
Transpiling is the process of converting newer language syntax into old syntax.
Explore more about Babel at https://babeljs.io/
Note: Babel is not required for small projects which do not require older browser support or if the developer does not use Javascript syntax introduced after ES5
Conclusion
Hope this post helped you to get a sneak peek inside the working of JavaScript!!
Reference: https://blog.bitsrc.io/how-does-javascript-really-work-part-1-7681dd54a36d
https://www.youtube.com/watch?v=q3Wsoa7wfDg
