JavaScript Engine and Runtime

JavaScript Engine

• A Program that executes JS codes.
• EX. Google's V8 : V8 engine powers Google Chrome and Node.js. // Other browsers have their own JS Engines as well.

Components of JavaScript Engine

• CALL STACK / HEAP
• CALL STACK : It is where out code is actually executed using something called 'execution contexts'.
• HEAP : It is unstructured memory pool which stores all the objects that our application needs.

Complilation VS Interpretation

• we store our codes in call stack. but how do they compile them to make a machines understand?
• Compilation : the entire code is converted into machine code at once, and written to a binary file(portable file : machine code) that can be executed by a computer. Execution happens way after compilation.
• Interpretation : Interpreter runs through the source code and executes it line by line. It simply happens right before the code is executed and not ahead of time.
• The problem with interpreted language is that it's much slower than compiled language. Nowadays, low performance is no longer acceptable.
• Many people still think that JS is an interpreted language, but it's not true anymore.
• Instead of simple interpretation, modern JavaScript engine now uses a mix between compilation and interpretation, which is called Just-in-time Compilation.

Just-in-time (JIT) Compilation

• Entire code is converted into machine code at once, then executed immediately.
• In JIT, we still have two steps of regular ahead of time compilation, but there is no portable file to execute.
• Execution happens immediately after a compilation.
• Code -> Parsing (AST or tree..) -> Compilation (JIT Compilation) -> Execution (happens in call stack) (Optimization -> Compilation -> Execution) -> Running Code

JavaScript Runtime

• JavaScript runtime in the browser : Container including all the things that we need to use JavaScript (in this case, in the browser)
• Without JS Engine, there is no runtime. But JS Engine alone is not enough.
• WEB APIs (DOM, Timer, Fetch API..) are functionalities provided to the engine, accessible on window object.
• JS simply gets access to these APIs through a global window object. But still it makes sense that the WEB APIs are also part of the runtime, because a runtime is just like a box that contains all the JavaScipt related stuff that we need.
• Next, a typical JS runtime also includes so-called callback queue
• Callback Queue : It is a data structure that contains all the callback functions that are ready to be executed. EX. click, timer, data..
• For example, we attach event handler functions to DOM elements like a button to react to a certain event.
• So the first thing that actually happens after the event is that the callback function is put into the callback queue.
• Then when the call stack is empty, the callback function is passed to the stack so that it can be executed.
• This happens by something called the event loop. The event loop takes callback functions from the callback queue, and puts them in the call stack so that they can be executed.