DEV Community

Cover image for How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack
Bipin Rajbhar
Bipin Rajbhar

Posted on • Updated on

How JavaScript Works: An Overview of JavaScript Engine, Heap, and Call Stack

Hello everyone ๐Ÿ‘‹, I hope you are doing great.

So, today you are going to learn An Overview of JavaScript Engine, Heap, Call Stack ๐Ÿง‘โ€๐Ÿ’ป.

Many JavaScript developers don't know how JavaScript works. If you are new to JavaScript ๐Ÿ‘ถ, then this article will help to learn how JavaScript works. If you are an experienced ๐Ÿ‘ด, JavaScript developer hopefully, this article will be a good refresher for you.

โš™๏ธ JavaScript Engine

The JavaScript engine is a program that executes your JavaScript code. A popular example of a JavaScript engine is Google's V8 engine.

โš™๏ธ V8 Engine

The V8 engine is an open-source, high-performance JavaScript and Web Assembly engine written in C++. The V8 engine is used inside Google Chrome, Node.js, and electron, among others.

Overview of V8 Engine

The V8 engine has two main components

  • Heap is an unstructured memory that is used for memory allocation of the variables and the objects.
  • Call Stack is a LIFO data structure that is used for function calls that record where we are in the program.

๐Ÿฅž Call Stack

JavaScript is a single-threaded programming language, which means it can do one thing at a time, and it has one Call Stack.

If you call a function, it's pushed on the top of the Call Stack, and when the function returns, it's popped from the top of the Call Stack.

Let's take an example.

Call Stack Visualization
call stack Visualization

Let's take another example that contains an error.

Call Stack Visualization
Call Stack Visualization

When the V8 engine encounters an error, it prints a stack trace. A stack trace is basically the state of the Call Stack.

Let's take another example that blows up the Call Stack ๐Ÿ’ฅ.

We can do this by using a recursive function.

Call Stack Visualization
call stack Visualization

A recursive function calls itself again and again. At some point in time, the number of function calls exceeds the actual size of the stack, and the browser detects this to take action by throwing an error.

I hope now you have a fair understanding of how JavaScript works.

In the next article, we will learn about Web APIs, Callback Queue, and Event Loop.

๐Ÿ“š Resources

What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Thanks for reading! My name is Bipin Rajbhar; I love helping people to learn new skills ๐Ÿ˜Š. You can follow me on Twitter if youโ€™d like to be notified about new articles and resources.

Top comments (10)

Collapse
 
sapna_kumari_49945c458685 profile image
Sapna Kumari

Thank you . I understood it well ..

Collapse
 
casper profile image
Yeabsera

This clarify everything thanks

Collapse
 
gowtamkumar profile image
Gowtam Kumar

Thank you so much. I had no clear about it.

Collapse
 
bipinrajbhar profile image
Bipin Rajbhar

I am glad you liked it!!

Collapse
 
mikec711g profile image
Michael Casile

Great short video diagrams. Looking forward to the rest in the series.

Collapse
 
borsemayur2 profile image
Mayur Borse

Nice article. The Mockups are great. What tool did you use to create the mockup diagrams?

Collapse
 
bipinrajbhar profile image
Bipin Rajbhar

After Effect

Collapse
 
delphinocons profile image
Angelo Hulshout ๐Ÿ‡ฎ๐Ÿ‡น ๐Ÿ‡ณ๐Ÿ‡ฑ

Nice one.
One question, since I donโ€™t know the V8 engine so well: is it the browser that detects the stack overflow or the engine itself? I hope the engine, otherwise it puts the burden of handling the error in any application you embed the engine in.

Collapse
 
bipinrajbhar profile image
Bipin Rajbhar

Yes, the error is detected by the V8 engine ๐Ÿ˜Š.

๐Ÿ“š Read This Doc: developer.mozilla.org/en-US/docs/W...

Collapse
 
thebuildguy profile image
Tulsi Prasad • Edited

Really concise and clear explanation for anyone regardless of any prior experience on this. Nice read! ๐Ÿ˜€