Creating New Objects in JavaScript

Question

I'm a relatively newbie to object oriented programming in JavaScript, and I'm unsure of the "best" way to define and use objects in JavaScript. I've seen the "canonical" way to define objects and instantiate a new instance, as shown below.

function myObjectType(property1, propterty2) {
    this.property1 = property1,
    this.property2 = property2
}
// now create a new instance
var myNewvariable = new myObjectType('value for property1', 'value for property2');

But I've seen other ways to create new instances of objects in this manner:

var anotherVariable = new someObjectType({
    property1:    "Some value for this named property",
    property2:    "This is the value for property 2"
});

I like how that second way appears - the code is self documenting. But my questions are:

1. Which way is "better"?

2. Can I use that second way to instantiate a variable of an object type that has been defined using the "classical"way of defining the object type with that implicit constructor?

3. If I want to create an array of these objects, are there any other considerations?

Thanks in advance.

Answer 1

Well, the second way looks nice and is useful in the case of a "class" that has lots of setup options. However, be aware that you're actually constructing another object in the process.

I would advise you to read some code from one or another Javascript framework and find a style that appeals to you.

Answer 2

1) I would say method #2 is much preferred, for me anyway. The example with 2 properties is not that different, but what if you wanted to do this:

var anotherVariable = new someObjectType({
    property1:    "Some value for this named property",
    property2:    "This is the value for property 2"
    //Leaving several properties out, don't want them populated
    property8:    "This is the value for property 8"
    property9:    "This is the value for property 9"

});  

Think about how many combinations of overloads (or keeping track of nulls) you'd have to have to handle properties you may or may not want to supply to the object with the first method. This is a much more extensible and flexible approach.

2) Just allow it with a blank constructor, this would be much cleaner for the instantiation.

3) Length/readability, especially with more than a few objects. Look at JSON, it's pretty clean/readable, again at least to me, if you like that style, creating arrays of your objects looks very similar in method #2.

Answer 3

It's really down to taste. This way:

var anotherVariable = new someObjectType({
    property1:    "Some value for this named property",
    property2:    "This is the value for property 2"
});

... is generally better if there's more than 2/3 arguments, as it aids readability and makes it easier to avoid the optional argument problem (fn(null,null,null,123')).

Another consideration is performance. Passing arguments in the conventional way will be faster, but this speed gain only becomes significant in very performance-sensitive situations.

Can I use that second way to instantiate a variable of an object type that has been defined using the "classical"way of defining the object type with that implicit constructor?

Not easily. If you want to instantiate a constructor by using a hash instead of just passing arguments, and you don't have control over the source, then you could "wrap" it:

var _constructor = SomeConstructorFunction;

SomeConstructorFunction = function(hash) {
    return new _constructor(hash.property1, hash.property2);
};

I wouldn't really recommend messing with third-party APIs just for the sake of style though.

If I want to create an array of these objects, are there any other considerations?

How big is the array? What's the array for exactly? Performance might be worth considering...

Answer 4

Best way to create javascript objects is quit using new (at least if you subscribe to the crockford camp)

myObjectType = new function(props) {
  // anything defined on props will be private due to the closure

  props.privateVar = "private";

  // anything defined on obj will be public
  obj = {};

  obj.testing = new function() {
    alert(props.privateVar);
  };

  return obj;
};
instance = myObjectType({prop1: "prop"});

// if we want inheritance, it just means starting with the base type instead of
// a new object
subType = new function(props) {
  obj = myObjectType(props);
  obj.subTypeProperty = "hello.";

  return obj;
};

Page 52 of Javascript: The Good Parts, I highly recommend it :-)