33 Javascript Concepts — #11. JavaScript Engine

First of all, this story is based on Stephen Curtis -33 Fundamentals Every Javascript Developer Should Know and you can read it here.
I thought it is a great concept to know although it is not a requirement. I decided to learn and explain these concepts one by one.

Index
1) What is JavaScript Engine?
- Definition
- Components

2) How does JavaScript Engine work under the hood?
- Compilation vs Interpretation
- Just-In-Time compilation
- What does the javascript engine do?

3) Conclusion

What is JavaScript Engine?

JavaScript engine means a computer program that executes JavaScript code. There’s various kind of JavaScript engine, but, the most well-known engine is a V8 engine that is developed by Google for Chrome browser.

stacks in the call stack and object memory in the heap

Javascript Engine consists of 2 components, call stack and memory heap.

Callstack is a structured stack data where code is actually executed. Started with an empty call stack and for example, whenever we invoke a function, it is automatically added to the top of the call stack. Once all lines of code inside of a function are executed, it is removed from the call stack.

A memory heap is unstructured memory custody that stores all the objects that our code needs. Unlike primitive types, an object needs another place to be stored since it has a large size.

How does JavaScript Engine work under the hood?

Since the computer’s processor only understands 1 and 0, our code needs to be converted into this machine code.

There are two kinds of method that converts our code into machine code, compilation, and interpretation

Compilation and Interpretation

In compilation, our entire code is converted at once. Since it is stored in a portable file written with machine code, it can be executed any time when you want by any computer. It is fast because we can execute the program without waiting to convert time once it is converted.

However, in interpretation, code is converted line by line right before it is executed and then executed immediately. As you can expect, this will lead really slower speed compared to compilation.

JavaScript was a language that uses an interpretation method. Although It didn’t have a great performance, it was okay because, in the past, we didn’t use javascript to make something that needs high performance.

However, as developers started to make a project like SaaS (Software as a service) that needs high performance, we need something that can improve javascript’s performance.

Just-In-Time compilation

That is when the Just-In-Time (JIT) compilation comes in. It is a kind of mixed-method between compilation and interpretation. This method converts code into machine code at once (compilation characteristic) and then executes immediately (interpretation characteristic). Unlike, compilation method, code is not stored in a portable file. And this makes javascript super fast than before.

First, our code is read (parsing) by a JavaScript engine like V8 made by Google. Then our entire code is converted to machine code at once and executed immediately since modern JavaScript engine uses Just-In-Time compilation.

But there are still other steps that the JavaScript engine has to do. JavaScript engine executes the converted code at first as fast as it can. Then it starts to optimize the machine code for better performance and this optimization cycle is repeated.

Conclusion

In fact, there are more complicated procedures that the JavaScript engine does under the hood for better performance. However, I think this might be the minimum knowledge that is easy to understand and useful.

I tried to make a clean visual presentation that helps you to understand my explanation. I would really appreciate it if you leave some comments about this post. Thanks for reading!!!

reference: JavaScript Engines,
JavaScript Engine,
How JavaScript works

Junior React Front-end Developer, LinkedIn: https://www.linkedin.com/in/dh-kim-733227200/