How event loop works in Javascript?

Question

const eventLoop = () => {
  console.log("Start");
  setTimeout(() => console.log("Settimeout"), 0)
  console.log("End");
}

eventLoop();

Output: Start End Settimeout

But for

const eventLoop = () => {
  console.log("Start");
  setTimeout(console.log("Settimeout"), 0)
  console.log("End");
}

eventLoop();

Output: Start Settimeout End

Please help me to understand JS execution stack and event loop in above scenario

This url explains that very well https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ the set time out "0", is used to perform a callback to a function, but you are doing a console log directly so is not called but performed instantly — Omar Alvarado, Jun 01 '21 at 05:19
Your confusion is due to [the difference of function reference and function call](https://stackoverflow.com/questions/15886272/what-is-the-difference-between-a-function-call-and-function-reference), boiling down to how [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) works. — Teemu, Jun 01 '21 at 05:23
Try adding `10000` instead of `0` as time in the second code block, and you will see that it will still be `Start; Settimeout; End` as result. So it's not the event loop, it's the setTimeout that you understood wrong, as @Teemu pointed out. — Rickard Elimää, Jun 01 '21 at 05:31

Jiho Lee · Answer 1 · 2021-06-01T05:25:27.690

Have you executed console.log() inside developer tools?

I think it was very confusing at first time. it has many relationship with this question.

console.log("Hello, World!");
// returns undefined

It's a kind of expression returns undefined with side effect.

const eventLoop = () => {
  console.log("Start");
  setTimeout(console.log("Settimeout"), 0)
  console.log("End");
}

eventLoop();

console.log("Settimeout") expression in above code is executed immediately, before setTimeout function called.

Therefore, it is not related with event loop.

score 1 · Answer 2 · answered Jun 01 '21 at 06:11

const eventLoop = () => {
  console.log("Start");
  setTimeout(() => console.log("Settimeout"), 0)
  console.log("End");
}

eventLoop();

In this example you :

console.log is put on function call stack, since stack is empty it is executed.
The function passed to setTimeout is added to the tasks queue. The thing to note here is that the delay will be atleast 0ms and it is not guaranteed that the function will be called after 0ms.
Now this console.log is called using the stack.
Now, since the stack is empty and the execution has completed items from the queue are picked. So the function passed in step 2 is picked and called.

const eventLoop = () => {
  console.log("Start");
  setTimeout(console.log("Settimeout"), 0)
  console.log("End");
}

eventLoop();

In this example, step 1 and 3 are exactly same as example#1. But, in step 2 you are not passing any function inside setTimeout you are simply calling console.log() there.

() => console.log("Settimeout") is not the same as console.log("Settimeout").

First becomes ->

() => {
return console.log("Settimeout");
}

Second is simply, console.log("Settimeout").

In short, when in second example execution reaches line 2, console.log() is executed. But in first example, a function is passed to setTimeout which has the responsibility of calling console.log().

score 0 · Answer 3 · answered Jun 01 '21 at 05:26

The following URL explains very well the event loop.

https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/

This one explains what parameters receives the SetTimeOut function

https://www.w3schools.com/jsref/met_win_settimeout.asp

When you use the function in the first of your cases, the function passed as parameter is called after the next cycle in the event loop, it means you have to pass a function to be called after the cycle, but if you put "console.log" you are performing that function instantly, so there is no function to be called in the next cycle.

How event loop works in Javascript?

3 Answers3