Event Loop : The event loop is the secret behind JavaScript's asynchronous
programming. JS executes all operations on a single thread, but using a
few smart data structures, it gives us the illusion of multi-threading.
Easy Definition :
The Event Loop has one simple job — to monitor the Call Stack and the
Callback Queue or Message Queue.
If the Call Stack is empty, it will take the first event from the
Callback queue and will push it to the Call Stack, which effectively runs it.
Such an iteration is called a tick in the Event Loop.
Each event is just a function callback.
Easiest explanation :
When any Asynchronous event occur such as setTimeOut or promises...
Then these task takes some time to complete I/O if they have any.
If they completed their I/O or don't have any, then they simply put into
message queue or callback queue. Then event loop will firstly execute the
call stack tasks and then look for callback or message queue and then execute it..
For more info visit : https://nodejs.dev/learn/the-nodejs-event-loop
The Event Loop has one simple job — to monitor the Call Stack
and the Callback Queue. If the Call Stack is empty, it will
take the first event from the queue and will push it to the
Call Stack, which effectively runs it. Such an iteration is
called a tick in the Event Loop. Each event is just a function
callback.
#bpn
* JavaScript is single threaded. so it needs event loop to run asynchronous (Multi Thread) code.
* JavaScript first runs synchronous code, then it queue asynchronous code to call later.
* Asynchronous code is called/executed by event loop.
* System/Browser takes synchronous code and put them as tasks. then these tasks are put them into queue.
* The Event Loop has one simple job — to monitor the is there any task to handle.
* System/Browser push the task to call stack.
* Then the event loop will check the call stack and execute the task.
* Then it waits for the next task to be pushed to the call stack.
const first = () => console.log('Hi,i am first');
const second = () => console.log('Hi,i am second');
const third = () => console.log('Hi,i am third');
const fourth = () => {
first();
setTimeout(second, 4000);
//store in queue & it will execute after 4 seconds
setTimeout(third, 2000);
//store in queue & it will execute after 2 seconds
console.log('Hi,i am fourth');
};
fourth();
//Expected output:
/*Hi,i am first
Hi,i am fourth
Hi,i am third
Hi,i am second
*/
console.log('Hi!');
setTimeout(() => {
console.log('Execute immediately.');
}, 0);
console.log('Bye!');
Code language: JavaScript (javascript)
The Event Loop has one simple job — to monitor the Call Stack
and the Callback Queue
console.log('Hi!');
setTimeout(() => {
console.log('Execute immediately.');
}, 0);
console.log('Bye!');
// print order
// 'Hi!'
// 'Bye!'
// 'Execute immediately.'
function task(message) {
// emulate time consuming task
let n = 10000000000;
while (n > 0){
n--;
}
console.log(message);
}
console.log('Start script...');
task('Download a file.');
console.log('Done!');
Code language: JavaScript (javascript)
function foo(b) {
let a = 10
return a + b + 11
}
function bar(x) {
let y = 3
return foo(x * y)
}
const baz = bar(7) // assigns 42 to baz