How do functions that receive callbacks be executed in a specific order?

Question

Let’s analyze the code snippet below, in Javascript:

function rand(min = 1000, max = 4000){
        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')
            })
        })
    })

In F1 call, we pass a callback function, which is an anonymous function. This, in turn, calls function F2(), passing another callback function. Inside this callback function passed to F2(), a call to F3() occurs, passing to the same other callback function. In the latter function past callback, we executed the console.log('Terminei').

Following this scheme, we have the guarantee that the function F3() will always be the last to be executed, already that, in defining these functions, they receive a callback - and perform that callback last.

However, replacing the call to function F1() with the following code: f1(f2(f3(console.log('Terminei.'))), I DON’T GET THE SAME RESULT AS BEFORE, WITH THE USE OF PAST ANONYMOUS FUNCTIONS AS ARGUMENTS, that is, when I don’t use anonymous functions, I have no guarantee that the last function to perform will be F3() and the first, F1().

In this way, I wanted to know the difference between passing an anonymous function (which calls an X function) and the X function itself to a function that receives a callback. Why is there a difference in the execution flow (this is one function did not wait for the other to finish to display its text), in this case?

Answer 1

I answered what was in the original question. Which was even answered equal, but briefly in How to determine the order of executing callbacks functions without resorting to anonymous functions and how the JS function execution stack works? and the answer was accepted. even after editions the answer still makes statements that are not demonstrated, and in fact everything was compromised. I leave the content here for people who want to know what was originally asked take advantage.

---

No, you can pass a normal function, but this function is the one that will be executed as callback. When you passed an anonymous function was what you wanted. When you passed the function log() of console wasn’t what you wanted, so the result you hoped didn’t happen.

When you pass any function it will be executed, and of course it needs to be compatible with what will be called internally as callback. So if the call does not use arguments, a function that does not accept arguments is what should be passed. Just as if passing an argument the function to be passed should receive an argument, and so on. And it’s not enough to be the same number of parameters that the function has in relation to the number of arguments passed, it needs to have consistency. You have to be the right guy, you can’t text if you’re going to have a percentage calculated. Can’t pass a street number when you expect the value of a installment, need to make sense.

Everything has to do with the use of arguments in the call. I will explain in detail.

What you did makes no sense. What function did you pass in the second example (not posted)? Was the console.log(), Right? And it is she who will be called, and was called, even if you have not seen. No mistake. When you get to the line callback() of function f3() is exactly the console.log() which will be executed. But what are you having printed? Nothing. And that’s what you print on the console. Who determined what to pass as argument is who calls and who called is passing anything.

For some reason you think the argument 'Terminei' is being passed along with the function and for some magical reason the call would consider this, but none of this happens. In another language this syntax would probably give error, but JS allows you to write even then that argument will be ignored. It does not go along with the function. That’s the same as passing anything, because that’s exactly what happens.

In fact this code should be like this:

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

It is now clearer that you are passing the function and not the argument. It gives anyway, but it is more readable so because it passes the correct intention.

And then it doesn’t happen that I was expecting it, it ends up printing nothing, but there’s an impression, it’s nothing because nothing was passed in the call.

But I will give an example that does what you want without using anonymous function. I will create a function without parameters that does what you want and I will use it as callback, is not an anonymous function:

function rand(min = 1, max = 2){
    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())
}

function imprime() {
    console.log('Terminei.')
}

f1(f2(f3(imprime)));

I put in the Github for future reference.

You may be thinking that then you always need to create a function to pass. Also no, I just created one to match the intention, make sense. I can send you the job straight, as long as you want something a little different:

function rand(min = 1, max = 2){
    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('Terminei.')
    }, rand())
}

f1(f2(f3(console.log)));

I put in the Github for future reference.

Again, who calls determines which arguments will be passed.

Remember that the callback is a delay in execution, when it is ordered to execute the state is used. It is the same problem that some people do not understand because a loop always takes the end value and not each variable value when it is transferred to a callback (more detailed).