What advantages does using (function(window, document, undefined) { … })(window, document) confer? [duplicate]

by

Why are window and document being fed in instead of just being accessed normally?

Generally to fasten the identifier resolution process, having them as local variables can help (although IMO the performance improvements may be negligible).

Passing the global object is also a widely used technique on non-browser environments, where you don’t have a window identifier at the global scope, e.g.:

(function (global) {
  //..
})(this); // this on the global execution context is 
          // the global object itself

Why the heck is undefined being passed in?

This is made because the undefined global property in ECMAScript 3, is mutable, meaning that someone could change its value affecting your code, for example:

undefined = true; // mutable
(function (undefined) {
  alert(typeof undefined); // "undefined", the local identifier
})(); // <-- no value passed, undefined by default

If you look carefully undefined is actually not being passed (there’s no argument on the function call), that’s one of the reliable ways to get the undefined value, without using the property window.undefined.

The name undefined in JavaScript doesn’t mean anything special, is not a keyword like true, false, etc…, it’s just an identifier.

Just for the record, in ECMAScript 5, this property was made non-writable…

Is attaching the object we’re creating directly to window a particularly good idea?

It’s a common way used to declare global properties when you are on another function scope.

More Related Contents:

  1. Why are functions synchronous in Javascript?
  2. What is stored in variable cols in : var $cols = $(‘.sortdivs’).on(‘click’,function(){…});
  3. When is JavaScript’s eval() not evil?
  4. jQuery SVG, why can’t I addClass?
  5. Operator precedence with Javascript Ternary operator
  6. Access outside variable in loop from Javascript closure [duplicate]
  7. What is “undefined x 1” in JavaScript?
  8. React ‘cannot read property of undefined’ when using map
  9. Is there ever a good reason to pass a string to setTimeout?
  10. Clone Object without reference javascript [duplicate]
  11. What is the right way to use Jquery in React?
  12. ‘onload’ handler for ‘script’ tag in internet explorer
  13. Simple function to sort an array of objects
  14. How to maintain a WebSockets connection between pages?
  15. angular 2 disable url encoding
  16. React | How to detect Page Refresh (F5)
  17. How do I get the right “this” in an Array.map?
  18. onbeforeunload support detection
  19. ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback
  20. What is the difference between importing a function expression or a function declaration from a ES6 module?
  21. Javascript drawing library? [closed]
  22. Example of a regular expression for phone numbers
  23. Trigger a button click inside an iframe [duplicate]
  24. Is there a way to “require” a JS file only once in nodejs?
  25. Is there anyway to detect OS language using javascript?
  26. How to disable console.log messages based on criteria from specific javascript source (method, file) or message contents
  27. Why is “forEach not a function” for this object?
  28. How do I manipulate the SVG DOM and create elements?
  29. Automatically scroll down chat div
  30. How to return an array from an AJAX call?

Leave a Comment