Why wrap every prototype "class" object with an anonymous function in JS?

Question

Looking at this JS code by David Fowler he wraps every "class" with an anonymous self executing method where he sends in jQuery and window. I get that this is a way for ensuring that $ and window are actually the global jQuery and winndow variables you'd expect them to be.

But isn't this a bit over-protective? Should you protect yourself from someone else changing the $ and window variable - is there actually code that does that, and if so why? Also, are there other advantages to wrapping everything like this?

Moving window to function scope also means that minifiers can replace it with a shorter variable name — Steve Greatrex
– Steve Greatrex, Commented Sep 14, 2012 at 9:15

Whiskas · Accepted Answer · 2012-09-14 09:09:15Z

5

If I remember correctly there are some other libraries than jQuery using the $.

answered Sep 14, 2012 at 9:09

Whiskas

3521 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jAndy · Accepted Answer · 2012-09-14 09:17:11Z

3

The concept of using function context to create local / function scopes is all about to protect your own code. This especially makes sense if you expect your Javascript code to run in an environment where multiple other (maybe even unknown) scripts may get loaded.

So, if some other Javascript code which got load before your own, assigns window.$ with some other value (it might load the prototype framework for instance), then your code is already screwed if you try to access jQuery specific things.

Another point there is the "a--hole"-effect. Someone creates a line like

window.undefined = true;

...
Now, all your checks against undefined will pretty much fail. But by explicitly creating those variables/parameters and filling them with the values you expect, you can avoid all those problems.

(function(win, doc, $, undef) {
}(window, window.document, jQuery));

edited Sep 14, 2012 at 9:17

answered Sep 14, 2012 at 9:10

jAndy

237k57 gold badges313 silver badges363 bronze badges

3 Comments

Domenic Over a year ago

JavaScript code cannot be run simultaneously or parallel with other JavaScript code.

jAndy Over a year ago

@Domenic: well, I hoped the point was clear. I actually just meant that there might other scripts which gets loaded before and after your own scripts, it was not about execution time itself.

Baz1nga Over a year ago

what if code like window=document=null, executes before your scripts??

Domenic · Accepted Answer · 2012-09-14 09:09:41Z

Generally most top-level JavaScript code should be wrapped in an IIFE, whether they pass in particular variables or not. This prevents variables created with var from polluting the global scope.

Another small benefit is minification: if you minify your code, making window into a "local variable" by passing it in as a parameter allows the minifier to rename it. This benefit goes away if you gzip, however, so it's not a real win.

Mostly people just pick a pattern for their IIFEs and stick with it, so in his case he's decided this is they way he writes his .js files and he does so uniformly. Having a uniform standard is valuable in and of itself.

To clarify, the code can be written in slightly longer form with

(function () {
    var $ = jQuery;
    var window = window;

    // ...
}());

xdazz · Accepted Answer · 2012-09-14 09:11:02Z

0

The code inside the anonymous function is the the function scope, so it prevent confliction with the global variables.

Imaging that if every jQuery plugin is not wrapped in a anonymous function, then there will be a global variables hell.

answered Sep 14, 2012 at 9:11

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Vincent Thibault · Accepted Answer · 2012-09-14 09:21:34Z

0

It's just to preserver integrity. $ can be Prototype, so sending jQuery as argument will save your code if someone else add a library/variable which overwrite $.

About the second argument "window", I see it as a module you want to write on.

answered Sep 14, 2012 at 9:21

Vincent Thibault

6116 silver badges16 bronze badges

Collectives™ on Stack Overflow

Why wrap every prototype "class" object with an anonymous function in JS?

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related