Self invoking anonymouse functions with document parameter

Question

I'm trying to understand the difference between:

(function(document) {
    //do stuff with document
})(document);

and

(function() {
    //do stuff with document
})();

I'm unsure why the convention appears to be to pass document and sometimes window too to the function? Is it to do with scope?

Erik Terwan · Answer 1 · 2016-11-25T16:25:08.783

6

This becomes especially handy if you use a compressor/uglifier like UglifyJS. It then replaces document with say a, making your code shorter.

So something like

(function(document, window){
  var body = document.body;
  var foo = document.querySelector('foo');
  var bar = document.querySelector('bar');
})(document, window);

becomes

(function(a, b){
  var c = a.body;
  var d = a.querySelector('foo');
  var e = a.querySelector('bar');
})(document, window);

If you did not place document and window in the function it'll just keep saying document;

(function(){
  var c = document.body;
  var d = document.querySelector('foo');
  var e = document.querySelector('bar');
})();

edited Nov 25 '16 at 16:25

answered Nov 25 '16 at 16:20

Erik Terwan

2,710
19
28

but if you don't put any document then isn't is shorter ? – Mahi Nov 25 '16 at 16:21
1

() is shorter than (a). – victor175 Nov 25 '16 at 16:21
@victor175 yeah that's what i asked him too – Mahi Nov 25 '16 at 16:22
2

Yeah but if you use `document` many times in your JS file it will eventually be way shorter – Erik Terwan Nov 25 '16 at 16:23
lol, so short example doesn't illustrate your point. Indeed, the same many times will safe characters – arhak Nov 25 '16 at 16:23
1

Haha yeah with just one line of code it doesn't really matter, edited my answer – Erik Terwan Nov 25 '16 at 16:25

score 2 · Answer 2 · answered Nov 25 '16 at 16:23

An immediately invoking function expression (IIFE) creates a new local scope. Just like any function, you can pass in arguments when you call it. document and window are globals in JavaScript web api, and are made available when you run js in the browser. By passing them into an IIFE, you can access them as whatever you want inside due to scope. For example:

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

console.log(w); // Uncaught ReferenceError: w is not defined
console.log(a); // Uncaught ReferenceError: a is not defined

The reason w and a are not defined in the second set of console.logs is because they are locally scoped to the IIFE.

Scope is an extremely important programming paradigm. It prevents naming clashes and unexpected behaviour. — Nick Salloum, Nov 25 '16 at 16:26

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

There are some reasons for this:

1. Using less global variables By injecting the function with the global variable it will depend on only the argument and not a global variable which might be used multiple times.

2. Creating a local scope An IIFE is a way to create a new scope by declaring a function and immediately invoking it. See this question for more information.

3. Better minify

For example if you will minify your example it will change from this:

(function(document) {
    //do stuff with document
})(document);

To this:

(function(a) {
    //do stuff with a
})(document);

Notice the a, which is shorter than your document.

Edit: Fixed typos

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 25 '16 at 16:24

Eran Shabi

14,201
7
30
51

Useful link. Found this which answers this for me: "Performance benefit of using IIFE’s is the ability to pass commonly used global objects like window, document etc as an argument by reduce the scope lookup.(Remember Javascript looks for property in local scope and way up chaining till global scope). So accessing global objects at local scope reduce the lookup time like below." – tommyd456 Nov 25 '16 at 16:42

Self invoking anonymouse functions with document parameter

3 Answers3