How JavaScript Works Behind The Scene

The event loop is the secret behind JavaScript’s asynchronous programming. JS executes all operations on one thread, however employing a few good knowledge structures, it provides the U.S.A. with the illusion of multi-threading.Let's have a look at what happens on the backend.

The call stack is accountable for keeping track of all the operations in line to be dead. Whenever an operation is finished, it's popped from the stack.

The event queue is to blame for the causation of new functions to the stack for the process. It follows the queue arrangement to take care of the right sequence within which all operations ought to be sent for execution.

Whenever AN async operation is named, it's sent to a browser API. These square measure Apis designed into the browser. supported the command received from the decision stack, the API starts its single-threaded operation.

An example of this is often the setTimeout method. Once a setTimeout operation is processed within the stack, it's sent to the corresponding API that waits until the desired time to send this operation back to the sure process.

Where will it send the operation? The event queue. Hence, we've got a cyclic system for running async operations in JavaScript. The language itself is single-threaded, however the browser Apis act as separate threads.

The event loop facilitates this process; it perpetually checks whether or not or not the decision stack is empty. If it's empty, new functions square measure supplemental from the event queue. If it's not, then the present call is processed.

Never blocking

A very attention-grabbing property of the event loop model is that JavaScript, in contrast to heaps of different languages, ne'er blocks. Handling I/O is usually performed via events and callbacks, thus once the appliance is looking forward to an Associate in Nursing IndexedDB question to come back or an Associate in Nursing XHR request to come back, it will still method different things like user input.

Legacy exceptions exist like alert or synchronous XHR, however, it's thought of smart observation to avoid them. Beware: exceptions to the exception do exist (but are typically implementation bugs, instead of something else).

Adding messages

In internet browsers, messages are adscititious anytime an incident happens and there's an incident auditor connected to that. If there's no auditor, the event is lost. therefore a click on a part with a click event handler can add a message — likewise with the other event.

The perform setTimeout is named with a pair of arguments: a message to feature to the queue, and a continuance (optional; defaults to 0). The continuance represents the (minimum) delay when the message is going to be pushed into the queue. If there's no alternative message within the queue, and also the stack is empty, the message is processed after the delay. 

However, if there are messages, the setTimeout message can have to be compelled to look forward to alternative messages to be processed. For this reason, the second argument indicates a minimum time — not a bonded time.