When using (function()), JavaScript is not working anymore

Question

I'm quite new to TypeScript, and I'll try to learn JavaScript by it. Since I'm a .NET programmer, I can create the classes in TypeScript and then let the TypeScript compiler magically transform it to JavaScript, and I would like to use the JavaScript generated files after all. This will help me in learning JavaScript.

Now, I've a simple class, used to perform validation on method arguments. The typescript implementation looks like:

class Guard {
    static ThrowIfNull(argument, argumentName) {
        if (argument == null) { throw "The argument '" + argumentName + "'      cannot be null."; }
    }   
}

On the TypeScript playground, this produces the following JavaScript:

var Guard = (function () {
    function Guard() {
    }
    Guard.ThrowIfNull = function (argument, argumentName) {
        if (argument == null) {
            throw "The argument '" + argumentName + "' cannot be null.";
        }
    };
    return Guard;
})();

So, now I do want to use this piece of JavaScript code, not TypeScript code into my web application.

I've created a jsFiddle to make it more easy to understand.

Now, I've read somewhere that in your JavaScript, you can better wrap everything inside a function which is like this:

(function() {
    'use strict';

    -- Code goes here.
})();

See this JsFiddle for updated code. But, now when I do run my application, I get a 'Guard is undefined error.' Can someone explain to me why this is happening?

I assume I must remove the (function()) {})(); then, but that means I misunderstood the concept at first, so what's the purpose of wrapping everything inside such a function?

Edit If I remove the function wrapper, then JShint is producing an error that says me that I should use the form function of 'use strict'.

Thanks for helping me out.

Well, you have to wrap the *complete* code, including the `Guard.ThrowIfNull(null, 'argumentName');`, if you want to use that. [It's the purpose](https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript) of IEFEs to make the variables local! — Bergi, Jul 02 '15 at 10:56
You're not going to learn proper Javascript through Typescript. I wonder where all the JScript coders are nowadays. — Rob, Jul 02 '15 at 10:58
Thanks for that answer, but I'm writing a library and `Guard.ThrowIfNull` definition is defined in the library, while `Guard.ThrowIfNull()` is called from within the browser. How should that be accomplished? — Complexity, Jul 02 '15 at 10:58
Ok. I didn't know that. So using the function of use-strict will only allow my objects to exists inside that wrapper function? — Complexity, Jul 02 '15 at 11:04

score 1 · Accepted Answer · answered Jul 02 '15 at 10:58

1

var Guard = (function () {
    "use strict";
    function Guard() {
    }
    Guard.ThrowIfNull = function (argument, argumentName) {
        if (argument == null) {
            throw "The argument '" + argumentName + "' cannot be null.";
        }
    };
    return Guard;
})();

is good enough for what you're trying to do ... further wrapping that in

(function () {

})();

will make Guard only visible in that scope - which is not what you are trying to achieve

answered Jul 02 '15 at 10:58

Jaromanda X

53,868
5
73
87

That does mean that JSHint's suggestion to use the function equivalent of use-strict should not be followed here because then the Guard is not visible outside of it, correct? – Complexity Jul 02 '15 at 11:09
No, "use strict" has nothing to do with it, see where I put the "use strict" in the modified version of your original code? "use strict" is irrelevant to the scope of Guard – Jaromanda X Jul 02 '15 at 11:10

score 0 · Answer 2 · edited May 23 '17 at 12:14

You should only wrap things inside a function if that code block has a single responsibility and you'll be using that for a spesific purpose, over and over again. For example, a function that hides/shows a DOM element.

function toggle(id){
    $('#' + id).toggle();
}

You encapsulated the hide/show functionality because you'll probably need a generic function like that to work on any DOM element.

If you just want to run some instructions, you should just write them inside a script tag:

<script type="text/javascript">
    var lang = 'en';
    doThis();
    doThat();
    var Guard = function () {
       //////
    };
</script>

If you write everything inside a function, you'll have a lot of problems. Especially about variable scope, like you have now. Please read: What is the scope of variables in JavaScript?

When using (function()), JavaScript is not working anymore

2 Answers2