17

I'm new to jQuery and am bit confused about the use (or not) of parentheses with a callback function. Say I have a function:

function cb() {
 // do something
}

Now what is the difference between:

$("p").hide(1000, cb);

and

$("p").hide(1000, cb());

Is it to do with when the cb function is executed? It would be great if someone could explain this to me in the simplest of terms.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Edwin
  • 171
  • 1
  • 3
  • 4
    Suggestion: Copy this in the console and see the difference: `function cb(){ return 42;}; console.log(cb); console.log(cb());` – Felix Kling Jul 05 '11 at 22:27
  • 3
    This is a function of JavaScript. It is not limited to jQuery. – Brock Adams Jul 05 '11 at 22:27
  • Ah indeed, worth mentioning. jQuery is a _library_ (and the functions `$` and `.hide` come from it). However, basic syntax rules like this are made by the language, which is Javascript. Thus, this question really has very little to do with jQuery other than its surrounding context. – Lightness Races in Orbit Jul 05 '11 at 22:29
  • Thanks, I tried that and cb() returns a value of 42 which as Tomalak states is passed as an argument to .hide(). So what about cb without the parentheses - what happens to the 42? – Edwin Jul 05 '11 at 22:46
  • @Edwin: Nothing, because you are not calling the function. You have a reference to the function itself, so in this case it is the reference you pass to `hide` and `hide` is calling the function somewhere. – Felix Kling Jul 05 '11 at 23:15
  • 1
    possible duplicate of [In JavaScript, does it make a difference if I call a function with parentheses?](http://stackoverflow.com/questions/3246928/in-javascript-does-it-make-a-difference-if-i-call-a-function-with-parentheses) – Lightness Races in Orbit Jul 17 '11 at 20:29
  • Does this answer your question? [In JavaScript, does it make a difference if I call a function with parentheses?](https://stackoverflow.com/questions/3246928/in-javascript-does-it-make-a-difference-if-i-call-a-function-with-parentheses) – Ivar Apr 23 '21 at 22:05

4 Answers4

13

cb() means give me the result of executing the function cb.

cb IS the function cb or, more accurately a pointer (reference) to it.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Michael
  • 4,010
  • 4
  • 28
  • 49
  • Thanks (also to everyone who's answered). I think I understand cb() but with cb in what situation would I want to make a reference to it? – Edwin Jul 05 '11 at 22:30
  • 1
    @Edwin - using your hide example, you normally would define a function inline, but if you had a predefined function, you reference it just as you've shown - with no parens... – Michael Jul 05 '11 at 22:36
8

Is it to do with when the cb function is executed?

Essentially, yes, though the difference does run a little deeper than that.

  • cb is a reference of sorts to the function. You're passing the function along as a parameter to be invoked somewhere down the line.

  • cb() is a function call; the function will be invoked, and the result passed as an argument to .hide.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
4

The difference is that in javascript functions are first class objects and can be passed to other functions so that they may executed at a later stage or depending on some logic.

Consider the following:

function add(a, b) {
    return a + b;
}

function minus(a, b) {
    return a - b;
}

function apply(func, a, b) {
    return func(a,b);
}

apply(add, 3, 4); // returns 7
apply(minus, 3, 4); // returns -1

apply(add(), 3, 4); // error: invalid number of arguments for add

apply(add(0,0), 3, 4); // error: add returns 0, but 0 is not a function and 
// so apply crashes when it tried to call zero as a function
Dunes
  • 37,291
  • 7
  • 81
  • 97
3

$("p").hide(1000, cb); passes the function referenced by cb, as a callback.

$("p").hide(1000, cb()); passes the value returned when the function cb is called.

Given:

function cb(){ return true; }

The former is passing the callback for later calling. The latter passes the returned value true, and is essentially $("p").hide(1000, true);

Dan Lugg
  • 20,192
  • 19
  • 110
  • 174