How to determine the order of executing callbacks functions without resorting to anonymous functions and how does the stack of executing functions in JS work?

Question

Analyzing the code below:

function rand(min = 1000, max = 3000){
    return Math.floor(Math.random() * (max - min) + min)
}

function f1(callback){
    setTimeout(function(){
        console.log('f1')
        if(callback)
            callback()
    }, rand())
}

function f2(callback){
    setTimeout(function(){
        console.log('f2')
        if(callback)
            callback()
    , rand()})
}

function f3(callback){
    setTimeout(function(){
        console.log('f3')
        if(callback)
            callback()
    }, rand())
}

f1(function(){
    f2(function(){
        f3(function(){
            console.log('Terminei')
        })
    })
})

The Rand() function is responsible for generating a random number between 1000 and 3000. Below it, I define three functions - F1(), F2() and F3() - that receive a callback and, if a callback is sent in the function invocation, it is called/executed only after the function displays the console.log().

It is important to realize that in each function - F1(), F2() and F3() - there is a call to the setTimeout() function, passing to it a random time, between 1 and 3 seconds. I did this to simulate a real situation, in which we do not know the time necessary for the completion of a task done by a function.

Finishing the declaration of the functions, then invoke the three functions, nested form, using anonymous functions, and passing to them the next function to be executed (in callback form). My intention is to make the result produced by the script, ALWAYS:

 "f1"
 "f2"
 "f3"
 "Terminei."

That is, in this case, I want the word "I’m done" to be displayed on the screen only when F3() has displayed its text, F2() has displayed yours, and F1() has also. In other words, I want it to take 1 hour for F1() to run (due to the random time set in setTimeout()), F2() will have to wait for it to display its text and F3() will also have to wait for F2().

And it’s exactly this result that I get when I call these functions in the form of the callback Hell, as seen in the code. They always run in order. But there’s a problem, if I don’t use anonymous function in the function argument, their execution is out of order and I’d like to understand why.

If, now, I call them so, without the use of anonymous functions:

f1(f2(f3(console.log('Terminei')))

the desired order is not obeyed, which, in my view, is the same previous call, except that I did not use anonymous functions as an argument.

Answer 1

Your problem is that your F1, F2, and F3 functions expect a function in your arguments, but they return nothing.

So if you use f1(f2(f3(...))), for example, the result of f3 which will be passed on to f2 is undefined, since f3 returns nothing.

Exactly the same problem is with the console.log. The function f3 is expecting another function as argument, however console.log is being invoked and returning undefined, thus no function is passed to be the callback of f3.