How Javascript V8 Engine Works?
Tags: javascript, webdev, beginners, programming
Published: 2023-06-25 22:42:00

Hi people! It's nice to have you again, or if it's your first time here, be welcome!

Before all, let's ask you something. Do you work with Javascript? whether working with Frontend (React, Angular, Vue, Svelte...) or on Backend (Node, NestJS...).

If your answer probably is "yes". So I will ask another question. Do know how Javascript works?

If your answer is "no" or "hmmmm... I know the basics". This article is for you.

Let's understand how Javascript works on background, based on v8 engine.

First, we need to understand that Javascript is an interpreted language. Therefore, it is interpreted by broswer and compiled in `C++`, applying the concept of **Just in Time** (JIT) compiled and `non blocking i/o`.

JavaScript engines are designed developed the Just In Time (JIT) Compilation model.

Node works using the v8 Javascript engine, created by google, just like Chrome.

So we have differents engines for each browser:

- Chrome: V8
- Firefox: SpiderMonkey
- Safari: JavascriptCore
- Edge: Chakra (but after some Microsoft update the Edge, now is using the V8)

And we need to remember... Javascript is **SINGLE THREAD**, but in same time we can use the power of its architecture make asynchronous processes. And this is what i will try to explain in this article.

How Javascript, as single thread language, can deal with asynchronous tasks. 

First, let's see some examples:

### First Code

```js
console.log('foo');
setTimeout(function timeout() {
  console.log('bar')
}, 1000)
```

If your answer was:

```sh
foo
bar
```
Congratulations!! you're right!!

But, let's add some complexity...

### Second Code

Try to guess the output of this code:

```js
function foo() {
    console.log('foo')
}

function bar() {
    setTimeout(function timeout() {
        console.log('bar')
    }, 2000)
}

console.log('baz')

foo();
bar();
```

If your answer was:

```sh
baz
foo
bar
```

Congratulations!! you're right!!

Now the last example:

### Third code

Try to guess the output of this code:

```js
function foo() {
  console.log("foo");
}

setTimeout(function first() {
  console.log("bar");
}, 7000);

setTimeout(function second() {
  console.log("baz");
}, 4000);

foo();
console.log("xpto");
```

If your answer was:

```sh
foo
xpto
baz
bar
```

Congratulations!! you're right!!

If you got all the outputs of all the examples right, you should already imagine how javascript works. But if you made a mistake on output, don't worry! I will try to explain in this article how these examples were executed by Javascript.



There are four "entites", that we need to know on Javascript Engines, the main focus will be on V8 Engine:

- CallStack
- WebApis or LIBUV (C++ library) - and this is a big spoiler
- Callback Queue or Event Queue
- Event Loop

Let's talk one by one:

## CallStack

Every command that is read on JS is inserted on a stack, fist in, last out (FILO) (that we called CallStack). So all commands like `console.log`, function call are pushed on this stack.

## WebApis or Libuv

It's where the assyncronous processs happens and stored. To avoid the main thread beeing blocked, process like `setTimeout` is pushed to the WebApis and popped after the asynchronous process finished. You can find some articles, call the webapis also calling libuv, because this structure is a lib of C++.

## Callback Queue or Event Queue

Both names represents the structure where the **callbacks** of WebApis are stored after finish the execution.

## Event Loop

And the main actor of this show... `Event Loop`. He is responsible to monitor the CallStack and Event Queue to execute the asynchronous process. Think the Event Loop as a "for(;;) or while(true)", that will always be monitoring the execution process and allow to we work with asynchronous tasks on Javascript.
The event loop takes precedence over some structures. The event loop will only run the event queue tasks when the callback stask is empty

We can see the model of this architecture on this example:

![V8 architeture Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dign3fctiw8ov43x50yd.png)

Now that you have some idea of this concepts, let's see the execution of each example that I showed above.

I will use the app created by `Philip Roberts` to demonstrate   the execution. See in this [video](https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=1284s) where Philip made a demonstration of Event Loop on JSConf EU.
And you can use the app, accessing:

Demo App: http://latentflip.com/loupe/

So for the first example:

![Example 1 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e85dvl3jn7mhfwvr948c.gif)

1. The `console.log` is pushed and executed on callStack
2. The `setTimeout` is pushed on WebApis and process the asynchronous process
3. After the process finished, the callback is pushed on Callback Queue
4. The Event Loop will realize that there is an event on Call Back Queue and push to Call Stack.

[Link for the code execution](http://latentflip.com/loupe/?code=Y29uc29sZS5sb2coJ2ZvbycpCnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgIGNvbnNvbGUubG9nKCdiYXInKQp9LCAxMDAwKQ%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)


So for the second example:

![Example 2 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyo9n9auiqvb0mpsxzvv.gif)

1. The `console.log('baz')` is pushed and executed on callStack
2. The function `foo()` is pushed and executed on callStack
3. The `setTimeout` inside of `bar()` function is pushed on WebApis and process the asynchronous process
4. After the process finished, the callback is pushed on Callback Queue
5. The Event Loop will realize that there is an event on Call Back Queue and push to Call Stack.

[Link for the code execution](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gZm9vKCkgewogICAgY29uc29sZS5sb2coJ2ZvbycpCn0KCmZ1bmN0aW9uIGJhcigpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgICAgICBjb25zb2xlLmxvZygnYmFyJykKICAgIH0sIDIwMDApCn0KCmNvbnNvbGUubG9nKCdiYXonKQoKZm9vKCk7CmJhcigpOw%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)


So for the third example:

![Example 3 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2tx91csf3tzkupahf0i.gif)


1. The `console.log('foo')` is pushed and executed on Call Stack
2. The **first** `setTimeout` with 7 seconds is pushed on Web Apis 
3. The **second** `setTimeout` with 4 seconds is pushed on Web Apis 
4. The `console.log('Baz')` is pushed and executed on Call Stack
5. The **second** `setTimeout` finished first and the callback is pushed on Event Queue to be processed.
6. Event Loop notice the event on Event Queue and push on Call Stack
7. Meanwhile the **first** `setTimeout` finished also and the callback is pushed on Event Queue.
8. Notice that the Event Loop will not push the callback of the first function, because the Call Stack is not empty.
9. After the total execution, the Event Loop push the first callback to the Call Stack to complete.

[Link for the code execution](http://latentflip.com/loupe/?code=CmNvbnNvbGUubG9nKCJGb28iKTsKCnNldFRpbWVvdXQoZnVuY3Rpb24gZmlyc3QoKSB7CiAgICBjb25zb2xlLmxvZygiZmlzdCIpOwp9LCA3MDAwKTsKCnNldFRpbWVvdXQoZnVuY3Rpb24gc2Vjb25kKCkgewogICAgY29uc29sZS5sb2coInNlY29uZCIpOwp9LCA0MDAwKTsKCmNvbnNvbGUubG9nKCJCYXoiKTs%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)


And now it's clearer, how Javascript engine works? How even being single thread can handle asynchronous processes?

The magic happens because of Event Loop and Event Queue. This architecture makes the Javascript non-blocking i/o.

I hope this article has helped clarify how things work behind the scenes.

That's all folks! Thank you so much for read until here! 


![Thank you Michael Scoot Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8ta5rpseryfz0t6yuon.gif)