JavaScript Event Loop – Webkul Blog

Agenda:

1. JavaScript Introduction
2. Name Stack Introduction
3. Asynchronous Callback
4. Activity Queue
5. Occasion Loop

1 JavaScript introduction

• JavaScript is a single threaded, non-blocking, asynchronous concurrent language.
• It has a name stack, an occasion loop and a callback queue + different APIs.
• V8 is the JavaScript engine which has a name stack and a heap.
• The heap is used for reminiscence allocation and the stack holds the execution context.

2 Name Stack Introduction

A name stack is a mechanism for an interpreter (just like the JavaScript interpreter in an online browser) to maintain monitor of its place in a script that calls a number of capabilities — what perform is presently being run and what capabilities are known as from inside that perform, and so on.

Instance:-

1 . Let’s suppose now we have a perform “greeting”, “sayHi” and we’ve to invoke the “greeting”.

perform greeting() {
  sayHi();
}

perform sayHi() {
  return "Hello!";
}

// Invoke the `greeting` perform
greeting();

2. Know greeting shall be embrace in Name Stack.

3 . We name “SayHi” contained in the “greeting()” so “sayHi()” shall be included within the name stack.

4 . “greeting” is metal operating and “sayHi” return “Hello!”.

5 . All of the execution context of “sayHi” shall be destroyed And “sayHi” shall be thrown out.

5 . And eventually “greeting” shall be thrown out.

ASYNCHRONOUS CALLBACK

1. Generally the JavaScript code can take lots of time and this may block the web page render.
2. JavaScript has asynchronous callbacks for non-blocking behaviour.
3. JavaScript runtime can do just one factor at a time.
4. Browser provides us different issues which work together with the runtime like Net APIs.
5. In node.js these can be found as C++ APIs.

TASK QUEUE

1. JavaScript can do just one factor at a time.
2. The remaining are queued to the duty queue ready to be executed.
3. After we run setTimeout than internet APIs will run a timer and push the perform offered to setTimeout to the duty queue as soon as the timer ends.
4. These duties shall be pushed to the stack the place they’ll executed.

THE EVENT LOOP

1. JavaScript has a runtime mannequin primarily based on an occasion loop, which is accountable for executing the code, amassing and processing occasions, and executing queued sub-tasks.
2. The occasion loop pushes the duties from the duty queue to the decision stack.
3. We are able to see how these items work in motion :