Difference of definition of function in javascript/jQuery

Question

version 1:

function add(){
var a = 2;
...
...
...
}

version 2:

$(function(){
var ...
..
..
});

Where is the main difference of two versions? For version 2, it does not have the function name. If it just simply run the code in the function, why not just remove the $function(){..};. It really makes me confusing because nowadays, many scripts are written in style of version 2. Please help to clarify my confusion.

Answer 1

Example 1 is defining a function called add, whereas example 2 is simply passing an anonymous function to the jQuery function.

The $(function() {...}); syntax is a shorthand for $(document).ready(function() {...});, which takes a function as its argument, and then executes that function when the DOM is ready. This is used to ensure that elements you want to work with in your Javascript actually exist before executing the code.

Edit to address the comment below:

The .click() jQuery function has two uses. If you pass a function then it creates an additional click event handler, which will run that function when the event is triggered. If you don't pass a function, then it will trigger all click event handlers that have been attached to the element(s) in the jQuery object. So, yes, you can call .click() without a function, but it doesn't do the same thing.

You can't do the following:

$(document).ready(var foo = 2;...);

because that will give you a syntax error. You can, however, define a function in the usual fashion, then pass that to the call to $(document).ready():

function foo() {
     var foo = 2;
     ...
}

$(document).ready(foo);

Answer 2

Example 1 and 2 are completely different. jQuery IS javascript, so function definitions are the same.

$(function(){... is just shorthand for $(document).ready(function(){... while example one is actually producing a new function called add.

You could produce the add function within the ready function like this:

 $(function(){

       function add(){
            var foo = 1;               
       }

 });

jQuery is not a seporate new language with different definitions and syntax than javascript, its a toolkit written in javascript using javascript's syntax and definitions.

Think of jQuery itself as just a big function, a function defined as $ ... so instead of function add(){} jquery is just a function called $ function $(){}. You also pass jQuery arguments with the same syntax as a normal javascript function.

      function add(arg){
          //do something with arg
      }
      add('#elem');

      function $(arg){
          //do something with arg
      }
      $('#elem');

You see? jQuery is just a big complicated function that we can pass many types of arguments, and returns many useful tools. But the syntax is and definitions are no different from traditional javascript.

      function add(arg){
           var added = arg + 12;
           return this.alertAdded = function(){
                alert(added);
           }
      }

      add(30).alertAdded(); // will alert 42
      //vs
      $('#elem').fadeOut(); // same syntax but referring to very different functionality.

here is an example of jQueryish syntax is normal plain old JS.

Answer 3

function add(){
var a = 2;
...
...
...
}

is a simple js function.

$(function(){
var ...
..
..
});

is a shortcut for jQuery Document.ready :

$(document).ready () {};

you may also wanted to ask about :

(function($){
var ...
..
..
})(jQuery);

which gives a closure over the $ sign - so you can use the dollar . ( where other libraries might have been loaded).

Answer 4

$(function(){}) is actually wrapping the function inside $(document).ready(); this way the code won't run until the DOM is loaded.

Answer 5

The first version adds the function to the window namespace whereas the second one's scope is only within the $(function(){...'s scope and therefore not accessible from code outside of the parenthesis.

Answer 6

I believe that $(function() is shorthand for document load in jQuery.

If you want to make a "jQuery function" you would need to do this:

jQuery.fn.yourfunctionname = function() {
     //code in here
}

So in short, your first function actually defines a function called add and the next function is shorthand for this:

$(document).ready(function(){