Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does jQuery wrap itself in a function?

I was reading the jQuery source and I was wondering why the entire source file was wrapped in an anonomous function.

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

Is this something which helps not to pollute the global namespace? Why is it there and how does it work?

like image 675
Chris Lloyd Avatar asked Dec 23 '08 01:12

Chris Lloyd


People also ask

What does the jQuery wrap () function do?

jQuery wrap() method is used to wrap specified HTML elements around each selected element. The wrap () function can accept any string or object that could be passed through the $() factory function.

What is wrap and unwrap in jQuery?

createElement() to create an element, and wrap it around each selected element. Wrap elements using a function. Using a function to specify what to wrap around each selected element. Wrap and unwrap an element. How to toggle between wrapping and unwrapping an element.

What does $() stand for in jQuery?

In jQuery, the $ sign is just an alias to jQuery() , then an alias for a function. This page reports: Basic syntax is: $(selector).action() A dollar sign to define jQuery.

What is wrapped set in jQuery?

The wrapped set is simply a list of DOM elements(with their children) in the order in which they are defined in the current document that matches a selector or in the order in which they have been created on the fly with the $(html) function.


2 Answers

It uses the function body to provide its own scope rather than introducing a large number of globals that could be accidentally changed by external code.

Eg.

(function (){
    var someConstantValue = ...;
    myCoolFunction = function(){ return someConstantValue * 5; }
})();

myCoolFunction();

If the function scope were not introduced it would be possible to accidentally change someConstantValue by introducing other code (or another library)

someConstantValue = someOtherValue; // this won't change the behaviour of myCoolFunction
like image 111
olliej Avatar answered Sep 21 '22 06:09

olliej


You're right that it will prevent pollution of the global namespace.

All of the variables and functions that jQuery needs are created inside of that function, which keeps those functions and variables from bleeding out into the global namespace. If you look at this block of code:

var jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
};

it's actually connecting the jQuery initializer to the outside world by setting window.jQuery and window.$ to the initialization function. That's the only place where the variables inside the wrapper function are directly available outside of the wrapper.

Notice too that the whole function is wrapped like this (function,,,)() which will execute that function as soon as the file loads.

like image 27
Matt Ephraim Avatar answered Sep 18 '22 06:09

Matt Ephraim