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:

could you explain to me why i got the result pile up that way?,
and what the difference if we call a function with the bracket () and without the bracket ()?

Because without the brackets, you're not yet calling it - you just pass the function as an argument. It gets called in the callback(); line. — Bergi
– Bergi, Commented Mar 1, 2015 at 16:05
As you called the function logDone by adding the brackets in the second code snippet you get the console log first — Alok Swain
– Alok Swain, Commented Mar 1, 2015 at 16:06
JavasScript evaluates arguments first. So if you have foo(bar()), bar is called first and its return value is passed to foo. Is btw is how most programming languages work. — Felix Kling
– Felix Kling, Commented Mar 1, 2015 at 17:13

Sumner Evans · Accepted Answer · 2015-03-01 20:49:36Z

8

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.

edited Mar 1, 2015 at 20:49

answered Mar 1, 2015 at 16:10

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Decent Dabbler · Accepted Answer · 2015-03-01 17:02:26Z

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.

Quentin · Accepted Answer · 2015-03-01 16:06:14Z

3

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

If you have () then you call it. If you don't, then you don't.

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

In the first example you pass a function to add and then the add function calls it.

In the second example, you call the function and pass its return value (undefined) to add which then mentions it in a statement but doesn't do anything with it.

answered Mar 1, 2015 at 16:06

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Amit Joki · Accepted Answer · 2015-03-01 16:06:24Z

3

When you do func([args=optional]), func is getting invocated or called.

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

We call the function only when we do ()(arguments optional). When a function is without parenthesis, you're just using it's reference.

By storing a reference do a function in a variable, you can call it later, that's what callback is doing.

In the second snippet, since nothing is returned, callback will have undefined. Try calling it by doing callback() in the second snippet, and you should see an error stating,

undefined is not a function.

answered Mar 1, 2015 at 16:06

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Amir Popovich · Accepted Answer · 2015-03-01 16:06:33Z

3

In the first example, you are passing a function as a parameter.
In your second example, you are passing a functions result after invocation as a parameter.

answered Mar 1, 2015 at 16:06

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Collectives™ on Stack Overflow

Need explanation about javascript function and callback

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related