JavaScript Window object always accessible?

Question

We see this approach used all the time:

(function (window) {
    var document = window.document,
        location = window.location,
        navigator = window.navigator;
})(window)

When studying above snippet I wonder why a globally accessible object like window is passed as an argument to a function. Could it be that:

The developer can not with 100% certainty know that window is accessible from within the local function scope?
Is is good practice because you make your intentions clear to other developers that read your code.
You've seen John Resig do it so it must be finger lickin' good!

What do you think?

Duplicate of: http://stackoverflow.com/questions/2716069/how-does-this-javascript-jquery-syntax-work-function-window-undefined — Ray Toal, Aug 15 '12 at 00:25

score 4 · Answer 1 · edited Aug 15 '12 at 03:55

It makes the code more portable.

You can copy and paste the code to an environment that does not have global window object defined (e.g. node), but is API compatible for all the things you care about within your code. Then you only have to modify the argument passed to the function.

A slight modification that makes the code clearer:

(function(root){
    var document = root.document,
        location = root.location,
        navigator = root.navigator;
})(window)

score 2 · Answer 2 · answered Aug 15 '12 at 00:24

I know of a couple possible reasons for the the code you asked about:

Creating shortcuts for document, location and navigator in local variables is potentially a slight performance improvement and is a reduction in typing.
Passing window into the self executing function might cause references to window to perform slightly better than using it from the global space.
There are some execution environments for javascript (not in a browser) where the global object is not called window so the code could be more easily adapted to that. But, this reason seems like a bit of a stretch to be viable because code written for a browser is highly likely to use other browser capabilities anyway.

score 0 · Answer 3 · answered Aug 15 '12 at 00:45

(function ($) { }(jQuery)); // $ stands for jQuery within this function
(function (window) { }(window)); // window still equals window
(function (bananas) { }(document)); // all references to bananas => document. (silly)

Typically the top name is what you want it to be named, while the bottom insures what it is supposed to represent. So having $ in the top means that all of your jQuery code (in this instance) remains with jQuery. Using it for window/window just ensures that no other definition of window changes its original intent as 'window'.
It is definitely a best practice, and controlled way of allowing what you want inside of your anonymous function/namespace.
One of the reasons! Resig is the man.

JavaScript Window object always accessible?

3 Answers3