Javascript global module or global variable

Question

I couldn't come up with a better question title, sorry.

My question is, in he.js as per https://github.com/mathiasbynens/he/blob/master/he.js , they are using the following code:

/*! https://mths.be/he v0.5.0 by @mathias | MIT license */
;(function(root) {

    //...omitted

    var he = {
        'version': '0.5.0',
        'encode': encode,
        'decode': decode,
        'escape': escape,
        'unescape': decode
    };

    // Some AMD build optimizers, like r.js, check for specific condition patterns
    // like the following:
    if (
        typeof define == 'function' &&
        typeof define.amd == 'object' &&
        define.amd
    ) {
        define(function() {
            return he;
        });
    }   else if (freeExports && !freeExports.nodeType) {
        if (freeModule) { // in Node.js or RingoJS v0.8.0+
            freeModule.exports = he;
        } else { // in Narwhal or RingoJS v0.7.0-
            for (var key in he) {
                has(he, key) && (freeExports[key] = he[key]);
            }
        }
    } else { // in Rhino or a web browser
        root.he = he;
    }

}(this));

And if you import this into your page as

<script src="he.js"></script>

You will be able to call the methods in your page as he.encode(...).

My question is, how exactly does it set the variable he?

I mean, I can see the

    } else { // in Rhino or a web browser
        root.he = he;
    }
}(this));

But at the call of }(this));, what exactly is this?

Answer 1

Let's simplify:

;(function(root) {
    ...
}(this));

So, we have a function that takes an argument called root. This function is being immediately invoked (http://benalman.com/news/2010/11/immediately-invoked-function-expression/), and we are passing the value this to it.

In this context, this is your global object. If you are using a browser, your global object will be window.

So, if you are indeed using a browser:

 root.he = he;

is actually the same as:

window.he = he;

And note, we don't necessarily need to be using a browser, thanks to platforms like Node there are now other contexts where the this global object is something other than window. That's why the other doesn't specify window explicitly and goes through this particular exercise.