What's the difference between calling a javascript function with arguments, and without

Question

I was trying to get data back from an ajax call, and was using the code

jQuery.ajax({
        type: 'POST',
        url: '/chatlog',
        success: exoticlangAjaxCompleted,
        data:'messageLog=' + privateMessageLogJson,
        dataType: 'json'
    });

The data was in a JSON array (key = "messageLog")

Why did it work to call

    success: exoticlangAjaxCompleted,

but not

    success: exoticlangAjaxCompleted(),

or

    success: exoticlangAjaxCompleted(messageLog) ??

JS function is:

function exoticlangAjaxCompleted(messageLog){
    console.log('exoticlangAjaxCompleted!');
    console.log('chat log is: ' + messageLog);
    console.log('chat log is: ' + dump(messageLog));
}

you are replacing an event handler. That has to be done with a function or something that returns a function — mplungjan, Aug 24 '12 at 05:47

score 4 · Accepted Answer · answered Aug 24 '12 at 05:47

4

The success argument expects a reference to function that will be invoked when the AJAX request is complete.

With the following:

success: exoticlangAjaxCompleted,

You are passing a reference to a function as required.

Whereas in this instance:

success: exoticlangAjaxCompleted(),

You are invoking your exoticlangAjaxCompleted function and passing the result to the success argument. Unless your function returns a function, this will not work!

answered Aug 24 '12 at 05:47

ColinE

68,894
15
164
232

Yea. Also every JS function is by default associated with a variable in the same name. That means if you have `function abc(){}`, then you also have a var `abc`, which you can use to refer to the function. In your case, `exoticlangAjaxCompleted` refers to the original function. – futuregeek Aug 24 '12 at 05:49
Thanks to all - I'll do more research on passing by reference – Trevor Newhook Aug 24 '12 at 08:10

score 2 · Answer 2 · answered Aug 24 '12 at 05:53

The reason the former syntaxes work is because success expects a function object (in order to call it with arguments, if it wanted to), where just calling a function doesn't return a function object. When you call a function with the function() form, it produces an output (even if that output is undefined) This is also why this form works:

...
success: function() {
    // Some callback code
}
...

So, how are they different? To show how, let's look at the WebKit console:

Image showing the WebKit console, myFunc vs myFunc()

As you can see, executing myFunc returns the function itself, whereas myFunc() returns **an object that would be useless to select:*

score 0 · Answer 3 · answered Aug 24 '12 at 05:45

0

My understanding is that you can't pass arguments this way.

If you try doing this:

success: function(){exoticlangAjaxCompleted(messageLog);},

Then that might work.

answered Aug 24 '12 at 05:45

frshca

1,309
2
15
24

score 0 · Answer 4 · edited May 23 '17 at 12:20

From the Jquery documentations, here is a section about the success callback:

"A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object."

jQuery.ajax()

So you have to make a trick, like here: Pattern of additional parameters

success: function(..){
...
}

What's the difference between calling a javascript function with arguments, and without

4 Answers4