[JavaScript] JavaScript 101 - The Principle of JavaScript

How does JavaScript work in a browser?

 

Since the browser cannot interpret JavaScript, a JavaScript interpreter is required.

 

The JavaScript engine plays the role of this interpreter.

 

Google's V8 engine is the most commonly used JavaScript engine.

 

JavaScript Engine

Memory Heap:
The place in charge of memory allocation.

Call Stack:
As the code is called, Save it as a stack.

 

JavaScript's engine consists of a memory heap and a call stack.

 

However, JavaScript does not operate only with the JavaScript engine.

 

Many environments build up to run JavaScript.

 

This environment is called / as JavaScript runtime.

 

JavaScript runtime

JavaScript runtime consists of a JavaScript engine, 

a browser's web API, 

an event loop, 

and a callback queue.

 

Then, let's find out about the call stack and the event loop.

 

Call Stack

 

JavaScript is a single-thread language.

 

That is, it has only one call stack and can only process one thing at a time.

 

Callstack is a data structure that records where we are located in a program.

 

When a function is executed, the function is stacked on the top of the call stack of the JavaScript engine.

 

And when a return occurs inside the function, it disappears from the call stack.

 

When the function above is executed, the call stack is empty.

 

After that, it is executed step by step as shown in the picture below.

 

Each entry accumulated in the call stack is called a stack frame.

 

However, there is a limit to the size of the stack frame that the call stack can accommodate.

When it reached the limit, the browser will blow the stack

 

And the browser will generate Uncautght rnageError

 

To avoid this problem, should we always wait for the function to end?

 

NO!

 

So, we use an asynchronous callback.

 

JavaScript can handle many things at once using asynchronous callbacks and event loops can help JavaScript handle them.

 

Event Loop

Event loops handle multiple tasks simultaneously within the JavaScript app.

 

For example

 

Hey browser, if you run this callback function now, you can't do anything else as long as the data is ready.

 

So, when the network communication is over and the data is ready, I'll call back.

 

This process takes place by monitoring the call stack and callback queue by the event loop.

 

Summary

 

Runtime consists of a JavaScript engine (memory heap, call stack), Web API, event loop, callback queue

 

When the JavaScript code is executed, as the execution order,  stack frames are stacked on the call stack

 

Asynchronous callback such as events wait in the callback queue instead of the call stack

 

While the event loop monitors the call stack and callback queue, it delivers the event waiting in the callback queue to the call stack when the call stack is empty