Why does `foo()` work here?

Question

Here's a fiddle:

https://jsfiddle.net/5k10h27j/

Why does foo() get called when set as an argument to an undefined function?

function foo(){
    alert('huh??');   
}
jQuery('#container').on('change', 'input', function(e){
    console.log('change');  
}).blahblah(foo());

Answer 1

The function is called before any attempt is made to locate the undefined function.

In an expression like

  objectReference.propertyName( arg1, arg2, arg3 )

the specification for the language stipulates that the arguments are evaluated before any test is made to determine whether the function reference is actually valid. Thus, your call to foo() in the argument list is evaluated, and only after its value is known is any test made to see whether the property reference is to a real function.

Here is the relevant portion of the spec. Step 3 is the evaluation of the arguments, and step 4 is the test to see if the thing the code says to call as a function is actually a function.

Answer 2

Because you're calling it. foo() . You can pass functions without calling them as in .blahblah(foo);

Answer 3

First, you need to define your blahblah function somewhere, and it must prototype jQuery in order to be used in chaining. Once you have defined your function with a callback argument, you can call it by passing the foo reference and not the function call.

$.fn.blahblah = function ( callback ) {
  callback();
  return this; // if you want to keep chaining
};

function foo () {
  alert( 'huh??' );
}

$( '#container' )
  .on( 'change', function () {
    console.log( 'change' );
  })
  .blahblah( foo );
  // in this case you can keep chaining since blahblah is returning 'this'.