What is the advantage of using Function(window, Document, Undefined)

Question

I noticed a long time ago that many libraries are using something like:

(function(window, document, undefined){
    //exemplo de script
    console.log(window, document);
})(window, document);

or

(function(window, document, undefined){
    console.log(window, document);
}(window, document));

This really brings advantage when developing something like:

(function(){
    console.log(window, document);
})();

Note: If undefined is a normal variable and can be changed undefined = "new value"; which would make it impossible to compare var a; if (a === undefined) { ... }

Answer 1

Generally speaking, IIFE functions are used in this way to safeguard that variables fall within the global scope.

An EEI is a self-executing function, and generates a new scope within itself.

Pass as function parameter window and document does not have much use, but has a function that is to facilitate/optimize the compression of the code.

If there are many times in the code within that function the variables window or document then a Javascript compressor like Uglify will shorten and give a letter to these variables, thus minimizing the file size.

The case of Undefined is more interesting.

Sometimes the error of over-writing this variable is made. That is it is possible (in some browsers) to do undefined = 20. In this case all lines of code that use undefined to check if a variable is set will give unexpected values. Creating a function with 3 parameters but only call/use 2 causes the third party to receive the real value of undefined. So, for browsers that allow you to rewrite undefined this trick re-establishes its original value.

The other advantage and reason why Undefined is there is the same as above: so code compressors can transform n times the 9-character word "Undefined" in a single letter.

Answer 2

I know the question is old, but since you linked the same one in an answer, it is worth adding some details.

• it is useful to pass objects this way to perform tests.

• when developing into Node, the variable window does not exist. In this case it is possible to do something like this:

  (function(window) {
      window.sayHello = function() {};
  })(typeof window !== 'undefined' ? window : this);
  

Note: this is the process that jquery uses.

The question about the undefined serves to ensure that the variable actually represents the value undefined since it can be superscripted.

Answer 3

They use more hair undefined even, sometimes it can be defined in some way and can disturb the code.

Example

undefined = 'foo';
var bar;
bar === undefined; // FALSE

(function (undefined) {
    var bar;
    bar === undefined; // TRUE
})();