Self-executing anonymous functions and closures

Question

information

I am trying to build a site where I can include certain files and append to my global variable with different methods that will just add easily to the object. Meaning I only need to include the file and this page will now have access to everything in the hutber object.

core hutber.js

var hutber = {};

(function ($) {
    "use strict"; //For good development standards :)

    hutber.init = function(){

    };
    hutber.init();
})(jQuery);

extra bits hutber.form.js

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});

problem

I am aware that the hutber will not have access to hutber.form as it within a closure. So without taking these out of selfexecuting functions how can I get hutber to have access to hutber.form? Or is this just the complete wrong way to approach this?

You're saying that your object doesn't have access to its own property? That doesn't make sense. `:)` Code within `.init()` cannot use `.form` because your second JS file is executed after the main file, and the main file invokes `.init()` immediately. You may want to postpone the`.init()` call until *after* all your components have executed. — Šime Vidas, Jan 18 '13 at 22:16
Not sure I understand the question. If you include the scripts in the right order and only try to use hutber.form from inside hutber *after* the scripts have all been loaded, then everything will work as you expect. — syazdani, Jan 18 '13 at 22:17
@ŠimeVidas I wasn't calling `hutber.form` from in the `hutber.init` `hutber.form` will have its own init. It was more that `hutber` didn't have access to `hutber.form` when looking to see if it was in the dom. — Jamie Hutber, Jan 18 '13 at 22:45
Also, a question why would anybody assume they aren't bring loaded in the correct order? — Jamie Hutber, Jan 18 '13 at 23:29

epascarello · Accepted Answer · 2013-01-18T22:29:00.903

No it will have access to hutber.form since hutber is global, but the problem is timing.

If the init() runs before the hutber.form function is executed, it will not be there. The init can not run to all of the "add-ons" are loaded.

A side note: your second one will not run since it has no (jQuery);.

(function ($) {
    "use strict"; //For good development standards :)

    hutber.form = {

    }

});  <-- missing  (jQuery); so it is not going to do anything

Run a little demo to see what happens.

var myObj = {};

(function(){

    myObj.init = function(){
        alert("init");
        try{ //will fail since bar has not loaded yet
        myObj.bar();
        } catch(e){ alert("failed calling bar"); }
    };
    //call init before bar is loaded
    myObj.init();
})();


(function(){

    myObj.bar = function(){
        alert("bar");
    };
})();

//call init after bar has been loaded
myObj.init();

jsFiddle of above code

When you run this, you will see that the init will fail the first time it is called since bar is not loaded. The second time it will work since the method is added. So if the init depends on the loaded "modules" it needs to know when they are loaded in order to call the init method.

The "second one" isn't called, nor is `$` used, so it was never going to do anything anyway. — RobG, Jan 18 '13 at 22:24
I believe I made it5 more complecated when i made sure the function wouldn't run :) thus whilst looking for `hutber.form` it obviously wasn't there. Then made up my own problems :D — Jamie Hutber, Jan 18 '13 at 22:42
So yes, my problem was your sidenote :) thanks. With the missing jQuery — Jamie Hutber, Jan 18 '13 at 23:30

score 1 · Answer 2 · answered Jan 18 '13 at 22:20

1

I think you want this:

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>
<script> hutber.init(); </script>

answered Jan 18 '13 at 22:20

Šime Vidas

182,163
62
281
385

that is how my files are set up :) – Jamie Hutber Jan 18 '13 at 22:44

score 0 · Answer 3 · answered Jan 18 '13 at 22:18

0

Seeing as how you defined hutber as a global variable the "form" property will certainly be accessible within any immediately invoked function expression.

answered Jan 18 '13 at 22:18

natlee75

5,097
3
34
39

score 0 · Answer 4 · answered Jan 18 '13 at 22:30

You might be looking at this the wrong way.

Not to say that immediately-invoked functions are the wrong way to build functionality...

What I am saying, however, is that you've got a globally-available object, which you're referencing directly from within your function...

After you assign hutber.form = {};, everything in whole world of the global scope has full access to hutber.form, because hutber is globally-accessible.

It really wouldn't be any different than if you went like:

//form.js
hutber = hutber || {};
hutber.form = { /* ... */ };

In terms of public access to hutber.form.

The closure covers the things you DON'T return and the things that you DON'T assign to objects/arrays/vars in an outer-scope.

So if you had var mySecretIdentity = "Jerry O'Connell"; inside of the closure, then only the methods inside of hutber.form could access mySecretItentity...

...but again, you could accomplish the same by doing something like:

// form.js
hutber = hutber || {};
hutber.form = (function () {
    var mySecretIdentity = "Jerry O'Connell";

    return {
        submit : function () {},
        clear  : function () {},
        validate : function () {}
    };
}());

And now anything private can only be directly-accessed by the functions which were written inside of the closure.

So again, it comes down to: "What problem are you trying to solve?"

score 0 · Answer 5 · answered Jan 18 '13 at 22:42

The <script> tag order is important as @Sime Vidas mentioned.

Do the following order:

<script src="hutber.js"></script>
<script src="hutber.form.js"></script>

I modified the script in jsFiddle. You'll note that I like being explicit about global variables by using window.variable. I have the init function in the core hutber.js file firing immediately, if that's what you want.

//core hutber.js 
window.hutber = {}; // Explicit Global Variable

(function ($) {
    "use strict"; //For good development standards :)

    window.hutber.init = function(){
      alert('init fired');  
    };

    window.hutber.init(); // You can fire this anywhere since you set it on a global variable...
})(jQuery);

//Extra bits hutber.form.js
(function ($) {
    "use strict"; //For good development standards :)
    window.hutber.form = {prop: "hello im a form"}
    alert('window.hutber.form is now' + window.hutber.form.prop);
})(jQuery);

Self-executing anonymous functions and closures

5 Answers5

Linked