Self-Invoking Functions in JavaScript

Question

What's the difference between these functions? Thanks for reply!

Function #1

var myQuery = (function() {

  (...)

})();

Function #2

var myQuery = (function() {

  (...)

});

Answer 1

In the first case, you're self-invoking a function literal and assigning the value of the invocation to the variable myQuery.

In the second case, you're assigning a reference to the anonymous function that you've defined. Here, myQuery acts like a pointer or a reference to a function.

To better illustrate this.

var myQuery = (function() {
   return "Hello";
})();

In this case, myQuery contains the value Hello. Now if you had:

var myQuery = (function() {
   return "Hello";
});

myQuery contains a reference to the function. If you used console.log in Firebug to output this value, you would see function(). This reference is something you can pass around or even invoke. So:

var myQuery = (function() {
   return "Hello";
});

var value = myQuery();

Now, value will contain Hello. Hope this explains the difference.

Answer 2

I'll simplify Function #2 and perhaps that will better show the differences.

var myQuery = function(){ (...) };

In Function #2, you're saying "Assign myQuery a reference to this function." In Function #1, you're saying "Assign myQuery the value of a call to this function."