Javascript Event Loop

Question 1

What are the elements of the javascript event loop?

Answer 1

Javascript Engine (Heap & Call Stack)
Web APIs
Task Queue
MicroTask Queue
Event Loop itself

Question 2

What are the two structures inside the javascript engine?

Answer 2

Heap & Call Stack

Question 3

What are elements of the web api?

Answer 3

fetch
setTimeout
localStorage
sessionStorage
HTMLDivElement
indexedDB

Question 4

Which structure holds async callbacks?

Answer 4

The task queue, or callback queue.

Question 5

What is the job of the eventloop?

Answer 5

The event loops checks the call stack. If the call stack is empty and there is no more code to execute, meaning all synchronous tasks are done, then the event loop pops the next callback off the task queue and onto the call stack.

Question 6

What does the delay signify in setTimeout?

Answer 6

The delay signifies when the callback will be added to the task queue.

Question 7

Which structure do promises use?

Answer 7

Promises use the micro task queue. This is because they use the queueMicroTask function under the hood.

Question 8

How is the microTaskQueue prioritized?

Answer 8

The microTask queue will be fully emptied and executed when the call stack is empty before anything from the task queue is added to the call stack.

The microTask queue is also checked each time the task queue is popped.

Question 9

What is the console output of this code:

Promise.resolve().then(() => console.log(1));

setTimeout(() => console.log(2), 10);

queueMicrotask(() => {
console.log(3);
queueMicrotask(() => console.log(4));
});

console.log(5);

Answer 9

5
1
3
4
2

Question 10

What is the event loop?

Answer 10

The event loop is a piece of code that orchestates and ties together various aspects of the Javascript v8 engine and various browser apis.

Question 11

How is more code to be executed represented on the call stack?

Answer 11

It is represented as an anonymous function.