if ($(function () { }); is legitimate code, why isn't $(foo())?

Question

So, we should all know about the jQuery document-ready handler:

$(function () {
  // stuff here
});

So basically, if the first parameter for the $ function is a function, then we run it on document startup, right?

Then why won't this work?

$(foo());

Answer 1

When you type $(foo()); you are actually calling foo and pass the result to $. If you want to use foo as a callback, you need to type $(foo).

Answer 2

Because the result from foo() isn't a function.

Use: $(foo);

Answer 3

Here you go.

function foo() {
  return function() {
    console.log("Hello World");
  } 
}

$(foo());

Now it works. (See what I did there?)

Answer 4

foo is named function and its not anonymous. So it needs to be used like $(foo);

Check this out

var functionName = function() {} vs function functionName() {}

Answer 5

First, you'll need to know that the first parameter of $ isn't (always) a function. When diving in the jQuery source code, you'll find this function is called:

init: function( selector, context, rootjQuery ) {

Which handles the following (in order):

// Handle $(""), $(null), or $(undefined)
// Handle $(DOMElement)
// The body element only exists once, optimize finding it
// Handle HTML strings (tags, id's etc.)
// HANDLE: $(function)
// Shortcut for document ready

Your question is about the last part, which has the following code:

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

Here you'll see that jQuery checks if the selector is a function. In your case, it isn't: Youre calling a function, not actually passing a function. When the result from foo is a function, it can work.

You can also change it to this:

var foo = function() {
   // do your stuff
};

$(foo);