Different forms of defining a function

Question

What is the difference between following forms of function definition:

$.myFunction = function() {
    //function body
};

var myFunction = function() {
    //function body
};

$(myFunction = function() {
    //function body
});

Answer 1

First one adds a function myFunction to $ which can be any of the JavaScript libraries such as jQuery, mooTools, Prototype, etc that use $ internally.

In first function, you are simply adding your own function to javascript library designated by $.

---

Second one is Function Expression as oppossed to Function Declaration which has this form:

function myFunction() {
  //function body
}

---

Third one looks weired but it is also Function Expression used in the context of a JavaScript library due to $ then whatever that library is meaning by that.

---

To know more about the differece between Function Expression and Function Declaration, check out this excellent post:

• Named function expressions demystified

The most important differece between Function Expression and Function Declaration for you to keep in mind is that Function Declaration no matter where declared is available throughout (because they are hoisted to top) whereas Function Expression can only run if it has been defined before or up somewhere for your later code. An example would be:

foo1(); // alerts "I am function declaration"
foo2(); // error, undefined function

function foo1() {
 alert('I am function declaration');
}

var foo2 = function() {
  alert('I am function expression');
};

foo1(); // alerts "I am function declaration"
foo2(); // alerts "I am function expression"

---

FYI, there are also self-invoking anonymous functions and self-inovking named functions:

// self invoking anonymous function
(function(){
  // code
})();

// self invoking named function
(function foo(){
  // code
})();

And function declarations converted into function expression using those chars:

! function(){
  // code
})();

+ function foo(){
  // code
})();

Notice that self-invoking functions are run as soon as parsed because of () at the end of their signature.

Answer 2

$.myFunction = function() {
    //function body
};

This creates a function as a property of the $ object. If you're using jQuery then $ is the global jQuery object. You would call this function with $.myFunction()

---

var myFunction = function() {
    //function body
};

This creates a function assigned to a variable called myFunction. If you do this inside another function, then myFunction will only be available in that scope.

---

$(myFunction = function() {
    //function body
});

This one is doing two things, let's break it down into two steps to make it more clear:

myFunction = function() {    // step 1
    //function body
};
$(myFunction);               // step 2

1. The first step is creating a function assigned to a global variable called myFunction. The variable is global because you didn't use the var keyword. In general, you probably don't want to use a global variable, and certainly not when its definition isn't very obvious.

2. The second step is (assuming you're using jQuery) passing myFunction to jQuery to be executed when the DOM has finished loading. See the jQuery documentation for more information.

   It's more common to pass a function to jQuery without assigning it to any variable, i.e.

   $(function() {
       //function body
   });
   

Answer 3

Well really only one of those is what I would call a function definition, the second one. The first one is extending the global jQuery object (or any other library that uses the dollar sign) with that function and third one is just weird.

Answer 4

Assuming the "$" stands for jQuery (which seems quite obvious here), the third syntax defines an anonymous function and pass it as an argument to jQuery, which is a shortcut for registering a callback for jQuery.DocumentReady.