Can you explain this Javascript callback function to me?

Question

If I have the following callback function:

a(function  () {
  b() 
})

my understanding is that a would be executed first, then b once a is finished

But generally in programming, you pass parameters to a function within the parantheses right? So in this function, it seems as though you are passing

function  () {
  b() 
}

to the function a as an argument. So according to what I know about programming, a should execute with all of that as an argument right?

Yet according to what I know about callbacks, it means instead, that all of that executes after the a function executes. Can you see the contradiction? Also, then wouldn't the function a be executing without parameters?

Do parameters just work differently in javascript. By default, does all the stuff in the parentheses execute after the function itself?

Does this make any difference to you if it is written as a named function instead? function myCallback () { b(); }; a(myCallback); It is just a reference, it does not execute it. — epascarello
– epascarello, Commented Mar 6, 2014 at 20:26
epascarello: I do agree that is the same thing. What is this supposed to illustrate? It still seems that myCallback is excecuting after a, rather than as an argument as it seems like it would be with a(myCallback) — BigBoy1337
– BigBoy1337, Commented Mar 6, 2014 at 21:55

adeneo · Accepted Answer · 2014-03-06 20:28:08Z

5

The a() function would have to have an argument that is actually a callback, it doesn't just work automagically

function a(callback) {  // callback argument
    // do lots of stuff

    callback(); // call the function after stuff has been done
}

a(function() {
    b();
});

And you could also just do

a(b);

and pass arguments to the callback

function a(callback) {  // callback argument
    // do lots of stuff

    callback(param1, param2, param3);
}

a(function(param1, param2, param3) { // here we get them back
    b(param2); // and we can pass them along
});

This is especially useful with async behaviour

function a(callback) {  // callback argument

    $.ajax({
        // ajax arguments
    }).done(function(returned_data) {

        callback(returned_data);

    });

}

a(function(returned_data) { // data from the ajax call
     // do something with returned_data
});

That's just an example, $.ajax returns a promise that is more handy to use, but it shows how a callback would work with async functions.

As a sidenote, you'll often see code where a callback is not guaranteed, and then it makes sense to check if there was a callback function passed as an argument before trying to execute it to avoid errors.

function a(callback) {  // callback argument
    // do lots of stuff

    if (typeof callback === 'function') {
        callback();
    }
}

edited Mar 6, 2014 at 20:28

answered Mar 6, 2014 at 20:21

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

4 Comments

Mathias Over a year ago

You can even do var b = function() { /* do stuff */ } and pass that as an argument a(b);

adeneo Over a year ago

@Mathias - Yes you can, variables can hold function expressions, so they can be passed as arguments as well.

BigBoy1337 Over a year ago

thank you for your fantastic answer. I have never heard of the .done method you use in your ajax example. This seems incredibly useful. Why is this not used every time with asynchronous function where you need to wait for one to finish? Is it best practice?

adeneo Over a year ago

@BigBoy1337 - It's generally done that way, but $.ajax and some other async jQuery methods returns a "promise", and it's more clever to use that directly instead of a callback argument. It works something like this -> jsfiddle.net/B29mA/1

Collectives™ on Stack Overflow

Can you explain this Javascript callback function to me?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related