What is (function($) {...}) (jQuery)?

Question

I am a javascript newbie and recently came into the following code.

(function($){

    if(!document.defaultView || !document.defaultView.getComputedStyle){
        var oldCurCSS = jQuery.curCSS;
        jQuery.curCSS = function(elem, name, force){
            if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
                return oldCurCSS.apply(this, arguments);
            }
            var style = elem.style;
            if ( !force && style && style[ name ] ){
                return style[ name ];
            }
            return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
        };
    }
})(jQuery);

What is function($) {...} (jQuery)?

PS: I also don't quite get what the code is for... If possible please give a hint on it.

David Fregoli · Accepted Answer · 2013-05-09T12:46:10.263

It's a self-executing anonoymous function called with jQuery as argument, that gets renamed to $ inside the function signature.

Since you don't know if jQuery.noConflict() has been used in the page (especially if you are writing distributable code like Plugins), this way you can use the shorthand $ inside your function safely.

Who wrote it is actually stupid beacuse he's using jQuery inside the function anyway : )

It also prevents the variables from polluting the global namespace and encapsulates them making them unaccessible from outside the function.

score 2 · Answer 2 · answered May 09 '13 at 12:09

2

That's to prevent the code from interfering with a global variable named $, so that you can use other libraries that use the $ symbol too.

Inside the function, $ will only refer to the jQuery object.

Refer http://docs.jquery.com/Plugins/Authoring

answered May 09 '13 at 12:09

Osiris

4,195
2
22
52

score 1 · Answer 3 · answered May 09 '13 at 12:08

1

It is to make sure $ means the same thing as jQuery. Other libraries may change what $ means, so this is needed.

function($) is called with jQuery as an argument, therefore $ gets set to jQuery within the function.

answered May 09 '13 at 12:08

tckmn

57,719
27
114
156

score 1 · Answer 4 · answered May 09 '13 at 12:09

That is a self executing function, think of it like document.ready function in jQuery, except that this function will fire once its loaded.

(function(){}) will declare the function, but by adding () this can be fired immediately. You can pass parameter s to this function as well. $ is actually an alias of jQuery, so to make sure that you are using jQuery, this is passed as a parameter and aliased as $ which is the convention.

(function(myAwesomePlugin){})(jQuery);

This is also valid. You can use it like myAwesomePlugin("#id").click() ...

score 1 · Answer 5 · answered May 09 '13 at 12:09

basically it’s an anonymous function that lets jQuery play nicely with other javascript libraries that might have $ variable/function. It is executed as soon as the DOM is parsed and is invoked in order of appearance if there are multiple appearances. At this point the document is however not displayed, its just parsed.

score 1 · Answer 6 · answered May 09 '13 at 12:14

1

Apart from what has been said already, this self-executing function encapsulates all variables and other functions, so the main (window) namespace remains unpolluted as all variables and functions are 'local'.

answered May 09 '13 at 12:14

strah

6,702
4
33
45

What is (function($) {...}) (jQuery)?

6 Answers6