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

My question is, in he.js as per .js , they are using the following code:

/*!  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?

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

My question is, in he.js as per https://github./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?

• javascript
• module
• global

• 1 this will be window, - the this instance in the time of executing the function, which is the window – Catalin Commented Jan 9, 2015 at 11:13
• @RaraituL oh, I see! Thank you. I thought it might be document or something, didn't think of window. Thanks again! – EpicPandaForce Commented Jan 9, 2015 at 11:14
• When the he.js loads, it defines a anonymous function (everything between the top level {} in the file). Then it call that function by passing window object. it's done by executing '(this));' – erandac Commented Jan 9, 2015 at 11:17

1 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./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.