Javascript Runtime Environment

We already know that JavaScript is a single–threaded language, which means it has only one call stack that is used to execute the program. So, how can we execute heavy code without blocking the UI and making the browser unresponsive? Well, the solution is asynchronous callbacks. The below pictorial representation you can easily understand, behind the scenes of Javascript

The JavaScript  V8 Engine consists of two main components:

1. Memory Heap: this is where the memory allocation happens
2. Call Stack: this is where your stack frames are as your code executes

Within JS , we have WebAPIs ,Callback queue, and Event Loops that is used to run the JS code that is responsible for to achieve Async.

1. Web API: this executes the timeout function and places the code in the callback queue
2. Call Back Queue: these are queues that hold callback functions to asynchronous operations when they have been completed in the background.
3. Eventloop: this checks if the call stack is empty or not or whether there is any statement in the callback queue that needs to be executed all the time

Try this below sample code

This example uses setTimeout to delay the printing of the log message by 2 seconds. And here setTimeout is part of the window object in the browse but not belongs to Javascript.