Question

I have been trying out some different ways to organize my code in my javascript applications and i wonder which one is the most appropriate.

First example:

var Application = {

    init: function() {
        //Some code
        Calculate();
    },

    Calculate: function() {
        //Some code
    }
};

Second example:

(function() {

    function init() {
        //Some code
        Calculate();
    }

    function Calculate() {
        //Some code
    }

})();

Third example:

(function() {

    var init = function() {
        //Some code
        Calculate();
    };

    var Calculate = function() {
        //Some code
    };

})();

Or is it some other way that is preferred? I get very confused over this. Thanks in advance!

Answer 1

The answer is, without question, “it depends.” How big is your application? Do you need all of the modules all of the time? How scalable and reusable does your app need to be? These are not JavaScript questions specifically, but rather “architectural” questions, and while learning JavaScript basics is relatively easy, it takes a lot of years to learn to be a good architect in software development. (though it is excellent that you are asking these questions.)

I would encourage you to dive into programming patterns. Learning patterns is learning to structure an application in the right way, depending on the given application.

I can say that a combination of your first example and your second example are a good place to start (an instantly invoked function expression wrapping and returning an object literal). This gives a degree of private scope via closure, and is called the Module Pattern. You will see this pattern used to some degree in almost all major JS applications and libraries because of its versatility and elegance.

To learn more about JavaScript patterns, I highly recommend Addy Osmani’s “Learning JavaScript Design Patterns.” You can read it for free, here: http://addyosmani.com/resources/essentialjsdesignpatterns/book/