Does the v8 engine first fill up the call stack and then run the code? or does it run the code as soon as it enters a function

Question

Here is the code which I tried:

// **Creating variables and functions**
let number_object = { num: 0 }

function doHomework(callback) {     //Starts doing the homework, supposed to finish after 5 seconds
    console.log("writing")

    setTimeout(() => {
        callback()
    }, 5000)
}

function Finished() {        //Called when 5 seconds are over
    console.log("Finished the homework")
}

function loop_(num_object) {  
    ++num_object.num;
    let i = 0;
    for (i = 0; i < 3000000000; ++i) { }
    console.log(`loop number ${num_object.num} over`)
}

// **Calling functions now**
doHomework(Finished)

let i = 0;
for (i = 0; i < 10000000000; ++i) { }  //This takes much more than 5 seconds
console.log(`This took more than 5 seconds, yet "finished" is not going to appear next`)

loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)
loop_(number_object)

The output is:

writing
This took more than 5 seconds, yet "finished" is not going to appear next
loop number 1 over
loop number 2 over
loop number 3 over
loop number 4 over
loop number 5 over
loop number 6 over
loop number 7 over
loop number 8 over
loop number 9 over
loop number 10 over
Finished the homework

So I think the output suggests that, the code first queues all the functions in the call stack and then runs them. Which is why all the 10 functions are queued in the call stack, so only after they're done, "finished" appears

Answer 1

This is known as run-to-completion before entering the event loop again.

the code first queues all the functions in the call stack and then runs them. Which is why all the 10 functions are queued in the call stack

No, the 10 functions are not queued on the call stack. They are "queued" in the program code, if at all. Just your bazillion increment operations are not queued anywhere. They are encoded in the program, which is then run.

Answer 2

It is important to remember that setTimeout does NOT call the function you passed to it. Instead it saves a pointer to the function that javascript will call later when the timeout expires.

In this sense javascript is no different from Java, C/C++, Pascal, Python etc. In all those languages if you save a function pointer to a linked/list or array that function will not be called until you call it later. The only difference is that APIs with callbacks are part of the standard library built-in into javascript. To be sure such APIs also exist in other languages especially when it comes to GUI programming.

In terms of the call stack, javascript generally behaves exactly the same as C/C++ but it does get weird when closures are involved. With closures javascript's call stack behaves like Lisp/Scheme or Haskell or Swift or Python.

The event loop

It is important to note that javascript is single threaded (some may claim otherwise - they are wrong). The interpreter is structured generally as follows:

// Pseudocode

script_to_execute = compile_scripts();
event_handlers = [];

do {
    scheduled_callbacks = execute(script_to_execute)

    for each (callback in scheduled_callbacks) {
        event_handlers.push(callback)
    }

    event = wait_for_async_events()

    for each (callback in event_handlers) {
        if (callback.event == event) {
            script_to_execute = callback.script
        }
    }

}
while (event_handlers.length > 0)

So basically your calls to setTimeout will add those functions to a list of event handlers. Your entire script is originally in script_to_execute. If you look at the program flow above it should be obvious that no event can get processed as long as your script is still executing. Therefore everything asynchronous in javascript including setTimeout, HTTP requests, DOM updates etc. will only happen after the last line of your script.

As you can also see all this has nothing to do with the call stack or scope. It's just timing - some things just happen in the future instead of now.