As JavaScript becomes more widely used, developers are incorporating it into their stack at all levels—back-end, front-end, hybrid apps, embedded systems, and so on. This page is intended to help you learn more about JavaScript and how it works.

Overview of Javascript

The V8 Engine is a notion that almost everyone is familiar with, and most people know that JavaScript is single-threaded or uses a callback queue.

In this article, we’ll go over these principles in depth and show how JavaScript works. You’ll be able to develop better, non-blocking programs that use the given APIs effectively if you know these details.

If you’re novel to JavaScript, this article will explain why the language is so unique in comparison to other languages. And, if you’re a seasoned JavaScript developer, it should provide you with some valuable perspectives into how the JavaScript Runtime you use every day works.

The inner workings of JavaScript in the run-time environment and the browser will be discussed in this article. This will be a high-level review of all the major components required for the execution of JavaScript code. The following elements will be discussed:

• JavaScript Engine
• JavaScript Runtime Environment
• The Call Stack
• Concurrency and Event Loop

Now let's start with the definition of the Javascript Engine.

Javascript Engine

JavaScript is a high-level, object-oriented, multi-paradigm, interpreted programming language, as you may know. JavaScript being an interpreted programming language means that prior to execution, source code is not compiled into binary code.

How does your computer know what to do with a simple text script?

That’s what a JavaScript engine is for. A JavaScript engine is nothing more than a computer program that runs JavaScript code. All current browsers now have JavaScript engines built in. To make this article as short as possible and simplify the explanation, we will avoid hoisting in JS and you can read more on it freecodecamp.org/news/what-is-hoisting-in-j.. . Back to the our discussion, whenever you load a JavaScript file in your browser, the JavaScript engine will run each line from top to bottom. Line by line, the JavaScript engine will read the code, transform it to machine code, and then run it.

Every browser does have its own JavaScript engine, but Google’s V8 is the most well-known. Google Chrome, as well as Node.js, the JavaScript Runtime, are both powered by the V8 engine.

The Engine is made up of two parts:

1. Memory Heap: The memory allocation takes place here.
2. Call Stack: As your code executes, this is where your stack frames are located.

The call stack and heap are always present in any JavaScript engine. Our code is executed on the call stack. The heap, on the other hand, is an unstructured memory pool where all of the objects that our program need are stored.

The JavaScript Runtime Environment

We’ve talked about the JavaScript engine thus far, but it doesn’t run in isolation. It, along with a number of other components, operates in the JavaScript Runtime Environment. The Javascript Runtime Environment (JRE) is in charge of making JavaScript asynchronous. It is for this reason that JavaScript may add event listeners and asynchronously make HTTP requests.

JRE is similar to a container in that it is made up of the following components:

1. JS Engine
2. Web API
3. Callback Queue or message queue
4. Event Table
5. Event loop

Now let's dive into the call stack and event loop

The Call Stack

Javascript is a single-threaded language, which means it can only do one thing at a time i.e It has a single Call Stack.

The Call Stack is a data structure that keeps track of where we are in the program. We put a function on top of the stack when we step into it. We pop off the top of the stack when we return from a function. All the stack can do is that.

Let’s have a look at an example. Take a look at the code below:

function multiply(x, y) {
      return x * y;
}

function printSquare(x) {
      var s = multiply(x, x);
     console.log(s);
}

printSquare(5);

The Call Stack will be empty whenever the engine starts running this code. Following that, the steps will be as follows:

A Stack Frame is the name given to each entry in the Call Stack. running on a single thread has certain drawbacks. Because JavaScript only has one Call Stack. You can explore the disadvantages of single threaded language here topic.alibabacloud.com/a/single-threaded-an.. .

Concurrency and the Event Loop

What happens if there is a long running task like fetching data from a remote server? You might wonder why this is even an issue. The issue is that, while the Call Stack has functions to execute, the browser is unable to perform any other tasks since it is blocked. This signifies that the browser is unable to render or execute any other code; it is just stuck. This causes issues if you want your app to have lovely fluid UIs.

And it isn’t the only issue. When your browser begins to handle a large number of jobs in the Call Stack, it may become unresponsive for an extended period of time. Most browsers respond by displaying an error message and prompting you to choose whether or not to close the browser window. You can read more on concurrency and the event loop here deepu.tech/concurrency-in-modern-languages-...

I hope the above article has clarified how JS works for you. Let's call it a wrap for now.