This content originally appeared on DEV Community and was authored by karam koujan
The event loop model gives javascript the possibility to handle many operations like I/O in a non-blocking way even though it’s a single threaded language.
Visual representation
Stack
A stack is a data structure that follows the principle of Last In First Out (LIFO), This means the last element inserted inside the stack is removed first, in js every invoked function get pushed to the stack and when it finishes, it is popped from the stack.
const last = ()=>{
console.log("last")
}
const first = ()=>{
last()
console.log("first")
}
first()
/*
last
first
*/
Heap
Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.
The event Loop
The event loop is as it sounds a loop that put events on the queue and wait till the stack gets empty then it pushes the events handlers to the stack to get executed.
const foo = ()=>{
console.log("first")
}
setTimeout(()=>{
console.log("second")
},0)
foo()
/*
first
second
*/
setTimeout is a webApi that has a minmum (not an exact) delay time to execute its callback. in this example the event loop put setTimeout in the queue and the foo function to the call stack, when the function foo executes, the stack becomes empty and then the event loop pushes setTimeout callback to the call stack.
Conclusion
The event loop model gives javascript the possibility to handle many operations like I/O in a non-blocking way even though it’s a single threaded language.
This content originally appeared on DEV Community and was authored by karam koujan
karam koujan | Sciencx (2022-07-15T21:52:29+00:00) The Event Loop. Retrieved from https://www.scien.cx/2022/07/15/the-event-loop/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.