Keeping my JS decoupled but still use functionality

Question

In the very simple code below I'm illustrating having a master 'App' object with 'Chat' & 'Posts' modules inside. Now, what I'm asking is, in my conscious effort to keep my components loosely coupled and modular, how I can use other functionality in the App object following the modular, decoupled pattern of JS web apps? Ie, imagine if I plucked the 'Chat' object out of the 'App' object and put it inside an 'App1' object, this code would break, so it's tightly coupled with the 'App' object. Can anyone offer any advice on decoupling my code below?

​var App = {
    Utils: {
        add: function(a,b){
            return a + b;        
        }        
    },
    Posts: {

    },
    Chat: {
        init: function(){
            console.log(App.Utils.add(1,2)); // 3           
        },

    }
}

App.Chat.init();

Answer 1

Well, your code wouldn't break as long as App.Utils.add() is still around to be called - even if App.Chat.init() becomes SomethingElse.Chat.init(). Of course, if you completely remove App.Utils.add() then, yeah, it'll break.

However, that can really be said of anything. You rely on console.log() too. If that goes away, your code will break.

Point is, your code will inevitably depend on something, so the question then becomes structure: Avoid having low-level functionality depend on higher-level functionality. And your structure is fine in this case. Yes, App.Chat.init() depends on App.Utils.add(), but that function doesn't depend on anything. It certainly doesn't depend on App.Chat.init() existing.

Take, for instance, jQuery or underscore.js. You code may well depend on one or both of those libraries, but they don't depend on your code. Structure your own code similarly: Keep App.Utils generic and low-level (as its name implies), but don't worry about other, higher-level, parts depending on it. Just make sure to include App.Utils if you plan to reuse things that depend on it. Generally speaking the more high-level a chunk of code is, the more dependencies it'll have.

All in all, I think you may be confusing namespacing with coupling. You're using App as your namespace, and putting everything in there. This does not mean the the "contents" of App are automatically coupled to each other.