Question

I definitely need some light on this.

What’s the diference between:

var MY_APP = function(){
    this.firstMethod = function(){
       //something
    };
    this.secondMethod = function(){
       //something
    };
};

and

var MY_APP = {
    firstKey: function(){
       //something
    },
    secondKey: function(){
       //something
    }
};

besides the obvious fact that one is a Function and the other an Object, what are the differences in code flow, prototypes, patterns… whatever, and when should we use the first or the second?

I’m so spaced out in this area that i’m not sure if i’m correctly explaining the doubt, but further info can be given if you ask.

Answer 1

The key difference between the two is in how they are intended to be used. A constructor, as its name suggests, is designed to create and set up multiple instances of an object. An object literal on the other hand is one-off, like string and number literals, and used more often as configuration objects or global singletons (e.g. for namespacing).

There are a few subtleties about the first example to note:

1. When the code is executed, an anonymous function is created and assigned to MY_APP, but nothing else happens. firstMethod and secondMethod don’t exist until MY_APP is explicitly called.
2. Depending on how MY_APP is called, the methods firstMethod and secondMethod will end up in different places:
   1. MY_APP(): Since no context is supplied, the this defaults to window and the methods will become global.
   2. var app1 = new MY_APP(): Due to the new keyword, a new object is created and becomes the default context. this refers to the new object, and the methods will get assigned to the new object, which subsequently gets assigned to app1. However, MY_APP.firstMethod remains undefined.
   3. MY_APP.call(YOUR_APP): This calls my MY_APP but sets the context to be another object, YOUR_APP. The methods will get assigned to YOUR_APP, overriding any properties of YOUR_APP with the same names. This is a really flexible method that allows multiple inheritance or mixins in Javascript.

Constructors also allow another level of flexibility since functions provide closures, while object literals do not. If for example firstMethod and secondMethod rely on a common variable password that is private to the object (cannot be accessed outside the constructor), this can be achieved very simply by doing:

var MY_APP = function(){
    var password = "GFHSFG";

    this.firstMethod = function(){
       // Do something with password
       alert(password); // Woops!
    };
    this.secondMethod = function(){
       // Do something else with password
    };
};

MY_APP();

alert(password); // undefined
alert(MY_APP.password); // undefined