Question, not issue :)

[latentflip]

Question, not issue :)

[latentflip]

@AndriyYakymiv I think the best way to think of it is like this, and perhaps loupe should actually show this:

instead of this

function f() {
  console.log("foo");
  setTimeout(g, 0);
  console.log("foo again");
}
function g() {
  console.log("bar");
}
function b() {
  console.log("bye");
}

f();
/*<---- Why the stack is not empty here, after f() function removing from stack? */
b();

think about it like this:

function main() {
  function f() {
    console.log("foo");
    setTimeout(g, 0);
    console.log("foo again");
  }
  function g() {
    console.log("bar");
  }
  function b() {
    console.log("bye");
  }

  f();
  b();
}

main()

so think of your whole script as if it was wrapped in a big function. Then you would have a main() item at the bottom of the stack all the way through f() and b(), and it would only clear after b() was done.

[vuau]

The JS runtime still executing the main function so it simply moves on next statement. If you put a break point in Chrome dev tool, you can see the call stack and the anonymous function which is the entry point for the execution.

[AndriyYakymiv]

Thank you in advance if somebody will help me to understand 😃

[vuau]

why the g() function in setTimeout runs only after b() function

• after console.log("foo"); JS execute setTimeout and from now on g() is handled by the timer. After 0 second, g() is put into the callback queue waiting until the stack is empty to be executed
• JS execute console.log("foo again");
• JS execute b() then console.log("bye")
• Call stack is empty now. Browser put g() into the call stack and JS execute it.
• JS execute console.log("bar");

[AndriyYakymiv]

@phamvuau
But why call stack is not empty after finish of f() function?

In demo it's empty: Check latenflip

Does the engine add all of the synchronous code instructions from main thread(or main function which wraps the code) to some "virtual queue" which passes this all instructions step by step to call stack and after only running all such instructions from this "queue" event loop will pass functions from callback queue to call stack?

[vuau]

@AndriyYakymiv it's empty in my side. I'm using Chrome latest.

Does the engine add all of the synchronous code instructions from main thread(or main function which wraps the code) to some "virtual queue" which passes this all instructions step by step to call stack and after only running all such instructions from this "queue" event loop will pass functions from callback queue to call stack?

There is a message queue or we can call it callback queue. You can find more detail on MDN

[AndriyYakymiv]

@phamvuau
In this demo it's also empty and I know that this is correct behavior. But according to MDN's article: When the stack is empty, a message is taken out of the queue and processed. This queue - is a callback queue, I know it. But then why after finishing the f() function result of SetTimeout() is not added to call stack from callback queue but instead the g() function is added? You are also saying that the call stack after f() is empty

[AndriyYakymiv]

@phamvuau @latentflip
I understood, every script creates an anonymous wrapped function which is inside the call stack and all callback functions added to call stack from callback queue only after this "main"(anonymous) function will execute all instructions. If I understand it correctly, you can close this issue 😃. Thank you, guys!