Need explanation about javascript function and callback

Question

im learning javascript, and i have been following some video tutorial on youtube

this is the original code

function add(first, second, callback){
    console.log(first+second);
    callback();
}

function logDone(){
    console.log("done");
}

add(2,3,logDone);

and the result of code on above is

5 main.js (line 4)

done main.js (line 9)

and i make slight change to the code into this

function add(first, second, callback){
    console.log(first+second);
    callback;
}

function logDone(){
    console.log("done");
}

add(2,3,logDone());

and the result is this

done main.js (line 9)

5 main.js (line 4)

my question are:

1. could you explain to me why i got the result pile up that way?,

2. and what the difference if we call a function with the bracket () and without the bracket ()?

Answer 1

Explanation of the first snippet

function add(first, second, callback) {
    console.log(first + second);
    callback(); // run whatever the "callback" function is
}

function logDone() {
    console.log("done");
}

add(2, 3, logDone); // pass in a function (not an invocation of a function) the
                    // function isn't run here

Explanation of the second snippet

function add(first, second, callback) {
    console.log(first + second);
    callback; // display the value of whatever "callback" is
}

function logDone() {
    console.log("done");
}

add(2, 3, logDone()); // run "logDone" and then pass the result (which in this
                      // case is undefined) into add

As you can see, the first code snippet doesn't actually run the callback until in the add function, whereas the second snippet runs the callback before add so that it can pass whatever comes back from logDone into add.

Answer 2

Perhaps it becomes more clear to you when I alter the logDone declaration to this:

var logDone = function() {
    console.log("done");
}

The identifier logDone basically is just a variable that references a function. To execute (also: call, or: invoke) the function you add parentheses: logDone().

So, in your first example you are merely passing the function itself as the third argument to add(), which then gets executed inside add(), with callback();.

In your second example, however, you are executing the function with logDone() immediately, which results in the return value of logDone()¹ being passed as the third argument to the add() call. In other words, first logDone is executed (resulting in the first log message), then add is executed (resulting in the second log message).

Furthermore, the statement callback;, inside add, does not do anything. And if you would have left the parentheses just like in your first example, it would result in an error, because undefined² is not a function.

---

1) which is undefined in this case, because logDone() does not explicitly return anything.

2) the value that was the result of the logDone() call.