I'm a little confused, not about what callbacks are used for but because I see callbacks used in scenarios often where it seems like passing a function as an argument to another function isn't necessary because you can just invoke the function you want invoked after the code in the current function is finished executing. For example:

function hello( a , b ) {
    var result = a + b; 
    myFunction();
}

myFunction() {
    //code
}

hello(1,2);

What's confusing is, I've seen a lot of examples where a callback is being used in a scenario just as simple as the first code I wrote where it seems to me a callback isn't needed at all:

function hello(a, b, callback) {
    var result = a + b;
    callback();
}

myFunction() {
    //code
}

hello(1, 2, myFunction);

I used a callback there but I could've just called the function myFunction after the code executed without passing myFunction as an argument. I understand a framework or library doesn't know the name of the function you'll want called after code is finished executing so passing the function you want called later as an argument seems to make sense then but when you know the name of the function you want invoked after whatever code is executed in a function, why not just invoke it just as I did in the first example I gave? I would appreciate your help. Thanks

I'm a little confused, not about what callbacks are used for but because I see callbacks used in scenarios often where it seems like passing a function as an argument to another function isn't necessary because you can just invoke the function you want invoked after the code in the current function is finished executing. For example:

function hello( a , b ) {
    var result = a + b; 
    myFunction();
}

myFunction() {
    //code
}

hello(1,2);

What's confusing is, I've seen a lot of examples where a callback is being used in a scenario just as simple as the first code I wrote where it seems to me a callback isn't needed at all:

function hello(a, b, callback) {
    var result = a + b;
    callback();
}

myFunction() {
    //code
}

hello(1, 2, myFunction);

I used a callback there but I could've just called the function myFunction after the code executed without passing myFunction as an argument. I understand a framework or library doesn't know the name of the function you'll want called after code is finished executing so passing the function you want called later as an argument seems to make sense then but when you know the name of the function you want invoked after whatever code is executed in a function, why not just invoke it just as I did in the first example I gave? I would appreciate your help. Thanks

• javascript

• 1 If it was exactly like the code you posted (adding a+b) then of course there is no reason. But sometimes functions do something asynchronously (like make an ajax call) and you want the function to wait until the ajax call is finished. (like when you want the callback to act on data you receive) – Cave Johnson Commented May 27, 2016 at 1:03
• 3 Can you give an example of a callback you feel was unnecessary? Callbacks are typically used for asynchronous functions. – castletheperson Commented May 27, 2016 at 1:04
• 3 It's now about synchronicity, but knowledge: caller usually does not know what to call; or scope - caller is defined in a different scope. – zerkms Commented May 27, 2016 at 1:05
• The interesting thing is usually not the point that the function is called, but a) when it is called (often not just immediately after the function returns) and b) with what arguments it is called – Bergi Commented May 27, 2016 at 1:06
• Maybe this will help you.. – choz Commented May 27, 2016 at 1:18

3 Answers 3

Benefit 1

One of the reasons callbacks are nifty is that you can call your function with any callback at all:

hello(1, 2, myFunction1);
hello(1, 2, myFunction2);
...
hello(1, 2, anyFunctionAtAll);

Whithout the possibility of passing a callback as an argument, your hello would be tied to always execute myFunction, since it's fixed on your function code.

Benefit 2

The other reason is that with callbacks you prevent blocking on long-running operations. You pass a callback to run after the function operations are plete, and while it is processing it cedes control back to the main event loop instead of blocking.

For example, if you are about to execute these operations:

hello(1, 2, myCallback);
console.log('Im not waiting for hello!')

In case your myCallback function spends too much time processing, the console operation is not going to wait for it to terminate its execution.

If you want to understand more, an know any other javascript caveats, I reend this and this

Conclusion

If you think you won't benefit of one of this things, so callbacks are not necessary on your scenario.

One reason why you can use it is that you can call your myFunction as anonymous function

function hello( a , b, callback ) {
    var result = a + b; 
    callback();
}

hello(1,2, function() {
   // your stuff here
});

Second reason is that what if you use third part API, for example you make API request to an endpoint and wait for response?

$.get('api/some/url', function() {
   // This is your callback that get function provides you
})

Or maybe you are using some library for example jquery

$("p").hide("slow", function(){
   // Callback that will be executed after.
});

The example you've given above is not a great use case for callbacks, imo. You don't typically want to simply execute the callback function procedurally, you want that callback function to dictate the behavior of the containing function its being passed to. This way, the containing function can behave differently based upon its given context/state.

Here's an example:

function modifyArray(array, callback) {
  var modifiedArray = [];

  for (var i = 0; i < array.length, i++) {
    modifiedArray.push(callback(array[i]));
  }

  return modifiedArray;
}

Notice how the callback function isn't simply executed? It actually dictates the way in which that containing function modifies the parameter array's elements.

This way, you can write highly flexible functions that you can re-use throughout your codebase.