Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

What is the difference between these two methods of writing $ instead of jQuery in WordPress

(function($) {

// $ Works! You can test it with next line if you like
// console.log($);

})( jQuery );

... Which I found here

and

jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});

... Which I found here

share|improve this question
    
@Rarst The reason I put this here instead of SO was that I thought it was much more relevant to WordPress then general programming; because anyone writing jQuery for WordPress must use one of these, or else write "jQuery" in longhand; whereas there's usually no need to do this outside of WordPress unless you have multiple libraries or some other specific reason. –  byronyasgur Jun 14 '12 at 16:34
1  
I get that point, but in line with FAQ questions that are just in WP context and in no way specific to it are off topic. This is pure jQuery and it's same with or without WP. –  Rarst Jun 14 '12 at 17:14
    
I'll try to keep that in mind, thanks. –  byronyasgur Jun 14 '12 at 17:33
add comment

closed as off topic by Rarst Jun 11 '12 at 20:44

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 4 down vote accepted

The first is a pattern called a closure. It's not unique to jQuery. You could just as easily write

(function(someVar) {

    // Inside the closure, someVar == "test"

})("test");

Basically, you're manually passing jQuery into the closure by referencing the jQuery object externally and aliasing it to $ inside the context of the closure.

The second pattern is unique to jQuery. It's one of the library's shortcuts to the DOM ready event. The following calls are all equivalent:

jQuery(document).ready(function($) {
    // Use $ inside here like normal
});

jQuery.ready(function($) {
    // Use $ inside here like normal
});

jQuery(function($) {
    // Use $ inside here like normal
});

In all three examples, you're also passing the jQuery object into your function as the variable $ so that it's available within the local scope.

share|improve this answer
1  
the WordPress-related gist in both examples is passing the $ as the jQuery object ref in function($), letting you safely use $, where most WordPress examples you see use jQuery. I see many erroneous comments telling people their error lies in using the $ when they are actually using it safely as above. –  Milo Jun 11 '12 at 16:54
    
@EAMann So to really clarify, is it true to think that the first pattern just aliases jQuery to $ whereas the second pattern while doing this also waits for the DOM to be ready before executing? –  byronyasgur Jun 11 '12 at 18:32
    
That would be correct, yes. Often times you'll see the first pattern used like: (function($) { $.ready(function() { ... }); })(jQuery); –  EAMann Jun 11 '12 at 18:34
    
@EAMann Would that not be superfluous? Seems like a lot of typing. Would jQuery(function($) { ... });, or either of the other examples you gave not do the same thing with a lot less typing? –  byronyasgur Jun 11 '12 at 18:40
    
They would, yes. That's why they exist. Sometimes, your jQuery script doesn't need to wait for the DOM to be ready (so you'd just use a closure). If it does need to wait for the DOM to be ready, then use one of the above .ready() hooks. I was just showing what the closure would look like if it was also waiting for the .ready() event. –  EAMann Jun 11 '12 at 19:01
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.