CODEWITHSUNDEEP
javascriptmethods
ChrisRich
ChrisRich

Reputation: 8716

Adding static methods in object literal vs defining it afterwards

What is the difference between below approaches for adding methods to an object:

Appending methods to an object using nested functions

var myObj1 = {
    myMethod : function() {
        console.log('myObj1.myMethod was called');
    },
        
    myOtherMethod : function() {
    },
        
    myOtherOtherMethod : function() {
    }
}

Appending methods to an object using the dot operator:

var myObj2 = {};

myObj2.myMethod = function(){
    console.log('myObj2.myMethod was called');
}

myObj2.myOtherMethod = function(){
}

myObj2.myOtherOtherMethod = function(){
}    

myObj1.myMethod(); // myObj1.myMethod was called
myObj2.myMethod(); // myObj2.myMethod was called

Both do the same thing. Besides the different syntax, is one approach preferred over the other? From my point of view, both approaches simply add methods (or function if you like) to an object.

http://jsfiddle.net/NK35z/

​

Upvotes: 0

Views: 3814

Answers (4)

Ricardo Tomasi
Ricardo Tomasi

Reputation: 35253

They are exactly the same. You'll have to use the dot/square brackets accessor when you don't want to overwrite properties/methods that already exist on the object.

Upvotes: 1

RobG
RobG

Reputation: 147363

As others have said, there's no practical difference. Adding properties in a object literal makes sense where you know everything up front and can just assigne values. Adding properties one at a time make sense where you need to to some work before adding the method, e.g.:

var obj = {
  /* define some stuff here */
};

if ( whatever ) {
  obj.fn = function(){/* logic A */}
} else {
  obj.fn = function(){/* logic B */}
}

There is no right or wrong way, use whatever suits best in each case. It's ok to use both for the same object.

Upvotes: 1

Stanley Stuart
Stanley Stuart

Reputation: 1145

There is no difference between both those ways of declaring objects/functions. If you mean static methods as in 'they don't change', that will work great.

They are not static methods in the traditional sense. Every time you create an object like that, it will have its own unique representation of it in memory. This means instead of one function in memory, you will have one function for each instance of that object (n copies of the function).

In order to make static methods (in the classical OOP sense, methods shared by a class (in JavaScript there are no classes, so objects using the same constructor/prototype) that do not require an instance), you can't really do it. But if you want the functions to only occupy one space in memory, you must use the Constructor Pattern:

function Foo()
{
    //we won't assign any properties here.
}

Foo.prototype.method1 = function(var1, var2){
    //don't use `this` here if you want the method to be truly static.
    //static methods shouldn't try and access instance members.
};

Foo.prototype.method2 = function(var2, var3){
   //whatever goes here
};

// Methods on the prototype are shared by all objects of foo, so we can create a new Foo
var f = new Foo();
foo.method1(1,2); // also works.

Upvotes: 1

chuckj
chuckj

Reputation: 29505

The two are semantically identical. The object literal syntax is preferred since it is more clear what you are doing and it also gives the JavaScript engine a chance to optimize the result.

Upvotes: 2

Related Questions