Understanding this bit of code from Modernizr

JavaScript
1

Hello :slight_smile:

window.Modernizr = (function(window,document,undefined){

//... full code goes here

})(this,this.document);

A few things I would like to understand:

  1. why the whole code is not simply wrapped into an anonymous function?

  2. why use window.Modernizr instead of var Modernizr = function()

  3. why pass arguments to the function that would be available inside of it anyway? -> function(window,document,undefined)

  4. why end the code with this bit: (this,this.document). I really don’t understand what is going on here

Well, if someone can help make sense out of it, I’m pretty sure I will have made some progress today!

:slight_smile:

2

These are good questions. Let’s see what answers we can find.

The main reason why an anonymous function isn’t used, is so that the variables for window/document/undefined can be passed in to the function.

Using window.Modernizr provides a clear intent that you want it to be a global variable. Using var doesn’t make that as clearly understood.

We don’t know if those values have been redefined as something else before our code starts to run, so passing them in allows all of the code within tyhe function to use them from a more trusted local source.

The this keyword refers to the window object, and this.document is for the document object. Notice how a third argument is not provided, yet one is defined for the function called undefined? Not passing a variable for that third argument results in it being automatically assigned to undefined, even if someone else has redefined undefined previously.

To overcome such issues, undefined is declared as a local variable to the function, so that a more trusted version of it can be used.

3

Thank you so much Paul.

Is undefined a regular javascript object? Why would you use it for?

4

Commonly scripts check for the existence of things by checking of something is undefined. Since it’s possible for the undefined variable can be reassigned to be something, you don’t want to rely on the global undefined variable which might be mucked up by someone else, which is why the function created its own undefined variable so that they can guarantee that the correct things is being checked for.

5

Hey there,

I have a new question related to the same subject, so, I’ll post it in the same thread.
I have a hard time using an object that looks like that:



window.SomeObject = (function(window,document,undefined){


function alertSomeString(someString) {
alert(someString);
}

})(this,this.document);

SomeObject.alertSomeString("hello");
6

On a related note: how would you pass “window,document,undefined” to a literal object within an anonymous function?



(function() {

var myObject = {

 init: function(window,document,undefined){
 //...
 }

}

})();

myObject.init(this,this.document)
7

You would pass them to the outer function, where they can then become accessible by all of the inner ones.


(function (window, document, undefined) {
    var myObject = {
        init: function() {
            //...
        }
    };
}(this, this.document));

myObject.init()

Why that works is that all functions retain with them a copy of their parents environment. So if you had this:


function handler(index) {
    var value = 'something or other';
    return function () {
        ...
    };
}

That inner function that’s returned will retain knowledge about both the index and the value, even though those variables aren’t declared within that inner function.