Question

I see objects in JavaScript organized most commonly in the below two fashions. Could someone please explain the difference and the benefits between the two? Are there cases where one is more appropriate to the other?

Really appreciate any clarification. Thanks a lot!

First:

   var SomeObject;

    SomeObject = (function() {

     function SomeObject() {}

         SomeObject.prototype.doSomething: function() {

         },
         SomeObject.prototype.doSomethingElse: function() {

         }

    })();

Second:

SomeObject = function() {

 SomeObject.prototype.doSomething: function() {

 },
 SomeObject.prototype.doSomethingElse: function() {

 }

}

Answer 1

Both of those examples are incorrect. I think you meant:

First:

var SomeObject;
SomeObject = (function() {

    function SomeObject() {
    }

    SomeObject.prototype.doSomething = function() {
    };

    SomeObject.prototype.doSomethingElse = function() {
    };

    return SomeObject;

})();

(Note the return at the end of the anonymous function, the use of = rather than :, and the semicolons to complete the function assignments.)

Or possibly you meant:

function SomeObject() {
}

SomeObject.prototype.doSomething = function() {
};

SomeObject.prototype.doSomethingElse = function() {
};

(No anonymous enclosing function.)

Second:

function SomeObject() {
}
SomeObject.prototype = {

    doSomething: function() {
    },
    doSomethingElse: function() {
    }
};

(Note that the assignment to the prototype is outside the SomeObject function; here, we use : because we’re inside an object initializer. And again we have the ; at the end to complete the assignment statement.)

If I’m correct, there’s very little difference between them. Both of them create a SomeObject constructor function and add anonymous functions to its prototype. The second version replaces the SomeObject constructor function’s prototype with a completely new object (which I do not recommend), where the first one just augments the prototype that the SomeObject constructor function already has.

A more useful form is this:

var SomeObject;
SomeObject = (function() {

    function SomeObject() {
    }

    SomeObject.prototype.doSomething = doSomething;
    function doSomething() {

    }

    SomeObject.prototype.doSomethingElse = doSomethingElse;
    function doSomethingElse()
    }

    return SomeObject;

})();

There, the functions we assign to doSomething and doSomethingElse have names, which is useful when you’re walking through code in a debugger (they’re shown in call stacks, lists of breakpoints, etc.). The anonymous function wrapping everything is there so that the doSomething and doSomethingElse names don’t pollute the enclosing namespace. More: Anonymouses anonymous

Some of us take it further:

var SomeObject;
SomeObject = (function() {
    var p = SomeObject.prototype;

    function SomeObject() {
    }

    p.doSomething = SomeObject$doSomething;
    function SomeObject$doSomething() {

    }

    p.doSomethingElse = SomeObject$doSomethingElse;
    function SomeObject$doSomethingElse()
    }

    return SomeObject;

})();

…so that not only do we see doSomething, but SomeObject$doSomething in the lists. Sometimes that can get in the way, though, it’s a style choice. (Also note I used the anonymous function to enclose an alias for SomeObject.prototype, to make for less typing.)