Difference between JavaScript methods structure

Question

What is the difference between this method structures/callings?
I often see different method structures and I can not understand what the benefits of each are.

var obj = {
    some_method: function(){
        return 'This works';
    }
}

var Obj2 = function(){
    return {
        some_method: function(){
            return 'This works too';
        }
    }
}

console.log(obj.some_method());

var obj3 = new Obj2();
console.log(obj3.some_method());

Both of them return what they should, here's JsFiddle, but in what case I should use each of them?

BenMorel · Accepted Answer · 2014-07-03 10:05:51Z

1

The first one resembles a singleton, I.E. you cannot have multiple objects of same type but with distinct state. Like it's only possible to have one actual animal in your entire application instead of many.

A more practical example, consider this page. There are multiple Posts, each with their own state (What Comments they have, what text they have, are they currently being edited and so on). If you just did var post = then that means there can only be one post. I suspect you will probably have some ad-hoc jQuery to manipulate multiple posts in that singleton but then you are not doing object oriented modeling of the problem anyway.

The second one is using constructor function incorrectly, the created objects will not be instances of Obj2 but Object. You would use a constructor like:

function Obj2() {
   //initialize fields here
}

Obj2.prototype.someMethod = function(arg) {
     return this.state + arg;
};

The reason returning object literal works in a constructor is that a constructor is allowed to return objects of any type. But it doesn't make sense to make a constructor only to return Objects.

You typically need Objects only for grouping related static functionality together (behavior, but no prolonged data) or as a dictionary/map/associative array (data but no behavior).

edited Jul 3, 2014 at 10:05

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Aug 7, 2013 at 12:52

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Felix Kling Over a year ago

The second one is some form of module pattern maybe? Of course it doesn't have to be called with new in this case.

Esailija Over a year ago

@FelixKling In module pattern you would immediately invoke it as it doesn't make sense to require clients to call a function for nothing. You should be able to just var module = require("module"); instead of var module = require("module")();

Felix Kling Over a year ago

I see. I never really used it, so it just looked similar in my eyes :)

Joseph · Accepted Answer · 2013-08-07 12:53:29Z

0

In the first code, you are calling obj.some_method(). some_method is a function, nested as a property of obj. This pattern is one way of namespacing.

In the second case, you are creating an object, using Obj2 as a constructor. However, instead of returning an instance of Obj2, you returned an object which has the same structure as the previous example's obj. This will give you erroneous results from instanceof tests, since new Obj2 should return an instance of itself, which your code isn't doing.

answered Aug 7, 2013 at 12:53

Joseph

120k31 gold badges186 silver badges238 bronze badges

1 Comment

Paul S. Over a year ago

Writing a function like that is often done when you want to build an Object. The capital letter and new does suggest use as a constructor, but (this example) works the same if called as a normal function

Collectives™ on Stack Overflow

Difference between JavaScript methods structure

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related