What is the difference between following snippets

// calling a function
function execute(){
}
function fn(){
  asynchronousFunction(function(){
    execute();
   })
}
fn();

What is the difference between following snippets

// calling a function
function execute(){
}
function fn(){
  asynchronousFunction(function(){
    execute();
   })
}
fn();

How the below snippet is different from above

// callback a function
function execute(){
}
function fn(done){
  asynchronousFunction(function(){
    done();
   })
}
fn(execute);

In which way callback is different from calling a function directly? What are pros and cons of each approach?

• javascript
• node.js

Share Improve this question Follow asked Mar 13, 2015 at 9:15 Ordre NlnOrdre Nln 15733 silver badges1212 bronze badges 6

• The only difference between those snippets it that you can reuse code with callback version and for function execution you have to duplicate code. – Ginden Commented Mar 13, 2015 at 9:21
• 1 @Nobita as this is hypothetical code, it would be off-topic on CodeReview. This is better suited here, or on Programmers. – Dan Commented Mar 13, 2015 at 9:40
• 2 @DanPantry I don't think this belongs on Programmers either. – Simon Forsberg Commented Mar 13, 2015 at 9:48
• 1 @DanPantry - Useful reading: meta.programmers.stackexchange./questions/7182/… – user1345223 Commented Mar 13, 2015 at 14:17
• 1 @GlenH7 Thanks! I won't let my ignorance be an excuse anymore – Dan Commented Mar 13, 2015 at 14:22

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 7

If you call a function, it will execute immediately.

If you pass the function as an argument to another function, then some other code will call it later (at which point it will execute).

They aren't different approaches for doing the same thing. You use a callback when you are writing a function that needs to do something at some point, but when what that something is depends on something outside the function.

The classic example is addEventListener. For the sake of discussion, let's limit ourselves to click events. You have a standard function for making something happen when something is clicked. Lots of programs want something to happen when something is clicked, but that something can be almost anything.

In first case, your function fn() can see execute() and the parameter is optional, because anytime you call fn() will be called execute().

in second case, you made your function more "general" and you may customize your callback function

The first option presents fn as a simple function that starts some kind of asynchronous action and doesn't present any other information to the outside. If fn is something like uploadData, then you'd have a simple function that tries to upload it (and maybe display an error message if it fails, or a success message when it's done), but the caller can only start it and do nothing else.

The second option additionally allows the caller of fn to decide what should happen when fn pletes. So if fn is uploadData, then the caller is able to also specify what should happen once the data has been uploaded (or if there has been an error).

Callbacks like these gives you a lot of flexibility. In your second example, you are able to say: "Do fn(), and do the asynchronous function, and if you have finished, then call done()." And the point is, you can decide what done() does, although you have no insight in the method that calls it.

Delivering functions as an argument, that are to be executed e.g. at the begin, at the end or at other events, is a fundamental principle. It is the basis for hooks, callbacks, promises, configuring of plex objects etc.