why define function inside $()?

Question

I came across a public JavaScript fragment that has the following lines of code:

$(function() {
 var v1, v2;
 v1 = new V1;
 return v2 = new V2(v1);
});

The guts of the function are perfectly grokkable. But what is the significance of wrapping this in a $()?

Answer 1

$(fn) is a shortcut for $(document).ready(fn).

• kirelagin: But, nevertheless, defining a function on document ready doesn't make much sense, right? It's just a defintion.
• Jacob: It's a function expression, not just a definition. The code means "use this function, defined here inline, as a handler for the ready event."
• Jacob: Here's a good article on function declarations vs. expressions: javascriptweblog.wordpress.com/2010/07/06/…

Answer 2

$(function() {...}); is a shorthand for $(document).ready(function(){...});

This means code inside will be executed as soon as DOM is ready. BTW its jquery syntax, there is no really pure javascript equivalent. It is not equivalent to window.onload = function(){...} which in jquery would be wrote: $(window).load(function(){...}); .

Don't be fooled by auto called anonymous function used in javascript:

(function(){...})()

or (function(){...}())

• BrunoLM: It is equivalent to document.addEventListener("DOMContentLoaded", fn, false);
• Ian: @BrunoLM It's not that simple. Not all browsers support that. But you're right otherwise

Answer 3

$( fn ) is a shortcut for $(document).ready( fn ), which executes fn when the DOMContent is loaded.

In .ready docs you can see that these 3 are equivalent

$(document).ready(handler)
$().ready(handler) // this one is not recommended
$(handler)

With pure Javascript you could achieve the same behavior using

document.addEventListener("DOMContentLoaded", fn, false);

jQuery docs:

• .ready

An example on jsFiddle

Answer 4

That notation is alias for $(document).ready(function() { ... });