Best way to create an object/struct in javascript

Question

I am new to javascript. As far as I can tell there are 5 ways to make an object (really a struct I guess). I was wondering what the best way is. Thanks.

var makeOption = function(name, dataType){
    var option = {
        name: name,
        dataType: dataType
    };
    return option;
};

var makeOption2 = function(name, dataType){ 
    this.name = name;
    this.dataType = dataType;
};

function makeOption3(name, dataType){
    this.name = name;
    this.dataType = dataType;
};

var makeOption4 = function makeOption4Name(name, dataType){
    this.name = name;
    this.dataType = dataType;
};

var v1A = makeOption("hannah", "int");
var v1B = new makeOption("hannah", "int");

//var v2A = makeOption2("hannah", "int"); <- undefined.  
var v2B = new makeOption2("hannah", "int");

// var v3A = makeOption3("hannah", "int"); <- undefined.
var v3B = new makeOption3("hannah", "int");

// var v4A = makeOption4("hannah" ,"int"); <- undefined.
var v4B = new makeOption4("hannah" ,"int");

This is what is displayed in the firebug DOM Tab:

enter image description here

pimvdb · Accepted Answer · 2011-12-21 16:03:00Z

4

I'd go with #3.

#1 does not allow the use of prototype.
#2 is anonymous, and anonymous functions don't help in debugging because you don't see what function is causing problems if it is (the variable name the function is stored is not part of the function, whereas the function's name is).
#4 is confusing - two possibilities to access one function.

edited Dec 21, 2011 at 16:03

answered Dec 21, 2011 at 15:56

pimvdb

155k80 gold badges312 silver badges357 bronze badges

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

11 Comments

gen_Eric Over a year ago

var makeOption2 = function(name, dataType) is the same as function makeOption2(name, dataType){. So, 2 and 3 are exactly the same, and neither use "anonymous" functions.

pimvdb Over a year ago

@Rocket: Not exactly. The declaration binds the name makeOption2 to the function (it is for example saved as .name), which shows up when debugging. The first is anonymous and makeOption2 is not part of the function. The first is anonymous, because it has no name. You can save anonymous functions in variables, though, but that's something different.

sixtyfootersdude Over a year ago

Could you elaborate on "#1 does not allow the use of prototype"?

pimvdb Over a year ago

@sixtyfootersdude: #1 returns an object, and the prototype chain consists merely of Object.prototype. So technically you can use prototype, but you'd be extending all objects' prototype.

jondavidjohn Over a year ago

@Rocket right, sorry, got the name backwards, my point still stands.

|

dgvid · Accepted Answer · 2011-12-21 16:05:27Z

Whole chapters of books on JavaScript best practices have been written on this subject. That said: If you aren't concerned about inheritance and aren't going to be creating numerous copies of an object with methods, i.e., you are just creating a "struct", then object literal notation, your first example, is the way to go. In that approach, you are using object literal notation, which is lightweight and fast. It doesn't mess with the object prototype or require the use of the new operator.

Start adding methods to your object, however, and the answer changes to "it depends."

By the way, you left out a couple of ways to create an object:

var o = {};
o.name = "hannah";
o.dataType = "int";

and, not recommended:

var o = new Object();
o.name = "hannah";
o.dataType = "int";

DVK · Accepted Answer · 2011-12-21 15:57:36Z

2

The first one is preferable from design standpoint - based on your name.

makeOption implies that it creates and retuens an object.

All your other solutions do NOT actually return an object and require "new" call. They may have similar/identical technical results when used as pure data structures, but only the first one works as a "object maker", as its name implies.

If you want to use #2/3 (#4 makes no sense - why would you clone the function twice), then you need to name it something else - optionPrototype may be.

answered Dec 21, 2011 at 15:57

DVK

130k33 gold badges219 silver badges337 bronze badges

2 Comments

pimvdb Over a year ago

Instances created by new are also objects in fact.

DVK Over a year ago

@pimvdb - but in order to have an instance, you NEED new. In Java parlance, makeOption is meant to be a factory and return an object, whereas #2/3 returns a "CLASS" which requires a constructor call (I apologize for relative nonsense of the terms since expressing the actual happenings of JS code in Java terms is beyond my meager Java skills)

Dominic Green · Accepted Answer · 2011-12-21 15:57:44Z

2

I personally use makeoption3 I have tried them all and found that makeoption3 is the cleanest and simplest if you are writing multiple objects. Also it has less code than the others keeping your file size down.

    function makeOption3(name, dataType){
    this.name = name;
    this.dataType = dataType;
};

answered Dec 21, 2011 at 15:57

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

Comments

Graham · Accepted Answer · 2011-12-21 16:04:15Z

2

If you don't need inheritance capabilities, just go with #1 (as you're essentially just using it to build and return an object literal). Otherwise I'd go with #3, as it allows for protoype methods and is also a named function rather than an anonymous one.

answered Dec 21, 2011 at 16:04

Graham

6,5722 gold badges39 silver badges39 bronze badges

Comments

jondavidjohn · Accepted Answer · 2011-12-21 16:21:12Z

2

Taking this from a Post John Resig made about javascript "Class" instatiation, he points out...

// Very fast
function User(){}
User.prototype = { /* Lots of properties ... */ };

// Very slow
function User(){
  return { /* Lots of properties */ };
}

which is what we're talking about he posted this snippet of code...

// makeClass - By John Resig (MIT Licensed)
function makeClass(){
  return function(args){
    if ( this instanceof arguments.callee ) {
      if ( typeof this.init == "function" )
        this.init.apply( this, args.callee ? args : arguments );
    } else
      return new arguments.callee( arguments );
  };
}

And then using it, leveraging the speed of using the prototype chain..

var User = makeClass();
User.prototype.init = function(first, last){
  this.name = first + " " + last;
};
var user = User("John", "Resig");
user.name
// => "John Resig"

This also takes care of the usage of new it allows the use of the keyword, but doesn't require it.

Link to Original Post

edited Dec 21, 2011 at 16:21

answered Dec 21, 2011 at 15:55

jondavidjohn

62.5k21 gold badges120 silver badges159 bronze badges

1 Comment

gen_Eric Over a year ago

That makeClass function seems useful. +1

danp · Accepted Answer · 2011-12-21 15:58:57Z

0

Why don't you want to use object literals? It seems like you're really asking about objects and inheritance..?

answered Dec 21, 2011 at 15:58

danp

15.3k7 gold badges47 silver badges48 bronze badges

Collectives™ on Stack Overflow

Best way to create an object/struct in javascript

7 Answers 7

11 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

11 Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related