JavaScript - Advantages of object literal

Question

I've read that rather than simply writing a bunch of functions, I should use object literal.

Can someone explain what the advantages of object literal are with examples, because I don't understand thus far.

Thanks

Answer 1

Using an object literal (a.k.a. object literal pattern) will not pollute the global namespace as severely as using many functions declared globally will, and also helps to organise code in a logical fashion

For example, this object literal

var obj = {
              find : function(elem) { /* find code */ },
              doSomething: function() { /* doSomething code */ },
              doSomethingElse: function() { /* doSomethingElse code */ }
          }

compared to

function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }

will create only one property on the global object compared to three. You can then easily use the functions like so

obj.doSomething();

Answer 2

Rebecca Murphey did a talk on Object Literals at this year's jQuery Conference. One of the best reasons to use them is simply good code organization.

Here is Rebecca's write up on the Object Literal Pattern : http://blog.rebeccamurphey.com/2009/10/15/using-objects-to-organize-your-code/

Answer 3

As Russ Cam said, you avoid polluting the global namespace, which is very important in these days of combining scripts from multiple locations (TinyMCE, etc.).

As Alex Sexton said, it makes for good code organisation as well.

If you're using this technique, I'd suggest using the module pattern. This still uses object literals, but as the return value from a scoping function:

var MyThingy = (function() {

    function doSomethingCool() {
        ...
    }

    function internalSomething() {
        ....
    }

    function anotherNiftyThing() {
        // Note that within the scoping function, functions can
        // call each other direct.
        doSomethingCool();
        internalSomething();
    }

    return {
        doSomethingCool: doSomethingCool,
        anothrNiftyThing: anotherNiftyThing
    };
})();

External use:

MyThingy.doSomethingCool();

The scoping function is wrapped around all of your functions, and then you call it immediately and store its return value. Advantages:

• Functions are declared normally and therefore have names. (Whereas with the {name: function() { ... }} format, all of your functions are anonymous, even though the properties referencing them have names.) Names help tools help you, from showing call stacks in a debugger, to telling you what function threw an exception.
• Gives you the freedom of having private functions only used by your module (such as my internalSomething above). No other code on the page can call those functions; they're truly private. Only the ones you export at the end, in the return statement, are visible outside the scoping function.
• Makes it easy to return different functions depending on environment, if the implementation just changes completely (such as IE-vs-W3C stuff, or SVG vs. Canvas, etc.).

Example of returning different functions:

var MyUtils = (function() {
    function hookViaAttach(element, eventName, handler) {
        element.attachEvent('on' + eventName, handler);
    }

    function hookViaListener(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }

    return {
        hook: window.attachEvent ? hookViaAttach : hookViaListener
    };
})();

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);