These are the ways of creating javascript objects:

function apple(optional_params) {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function() {
        return this.color + ' ' + this.type + ' apple';
    }
}

I really prefer the latter one most since it's Json syntax, but I've seen more of the first one than the latter one.

• Are there any differences between them functionally?
• Could each of them be extended, inherited and cloned/copied?
• In the latter one I could easily create nested elements, is this possible with the first one?
• In the latter one I can't pass optional parameters?
• Are they serving different purposes? If yes, could you give scenarios where I would use either of them.

These are the ways of creating javascript objects:

function apple(optional_params) {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
}

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function() {
        return this.color + ' ' + this.type + ' apple';
    }
}

I really prefer the latter one most since it's Json syntax, but I've seen more of the first one than the latter one.

• Are there any differences between them functionally?
• Could each of them be extended, inherited and cloned/copied?
• In the latter one I could easily create nested elements, is this possible with the first one?
• In the latter one I can't pass optional parameters?
• Are they serving different purposes? If yes, could you give scenarios where I would use either of them.

• javascript

• 4 No, it's not JSON syntax, it's an object literal. JSON is a text format that is a subset of Javascript object literal syntax. – Guffa Commented Sep 24, 2010 at 6:48
• 1 json also doesn't support functions – Tor Valamo Commented Sep 24, 2010 at 6:51

5 Answers 5

The difference is that you can reuse the first one. Example:

function Apple(type, color) {
  this.type = type;
  this.color = color;
  this.getInfo = function () {
    return this.color + ' ' + this.type + ' apple';
  }
}

var red = new Apple("Macintosh", "red");
var green = new Apple("Granny Smith", "green");

vs.

var red = {
  type: "Macintosh",
  color: "red",
  getInfo: function() {
    return this.color + ' ' + this.type + ' apple';
  }
};

var green = {
  type: "Granny Smith",
  color: "green",
  getInfo: function() {
    return this.color + ' ' + this.type + ' apple';
  }
};

For your first object you'd want to put the member function in the prototype, like such:

function apple(optional_params) {
    this.type = "macintosh";
    this.color = "red";
}

apple.prototype.getInfo = function () {
    return this.color + ' ' + this.type + ' apple';
}

This causes the "object" to only create two new fields in memory (type and color) while keeping the function as part of the prototype for that object. Your second object (hash table) creates a new function for each object.

So as you can see using the function approach is good if you have lots of functions, because the functions then don't take up extra memory.

To clarify: Your two examples produce the same result, but if you put the function in a prototype the result is different.

This is the way I create Javascript objects in most cases:

/**
 * This bees the constructor of Apple, a type of fruit.
 */
 var Apple = function() {
    // Object init here
    // This bees a "private" variable
    var seeds = 50;

    // This bees "public" properties
    this.color  = 'red';
    this.weight = 100; // in grams if you wonder. 

    /**
     * Do stuff to count the seeds
     * This bees a privileged method that can access private variables
     * and be called from outside the object
     */
    this.countSeeds = function() {
        // Do stuff to count the seeds.
        return seeds;
    }
}

/**
 * Static functions can be utility functions that can be called separate from 
 * object instances. They do not have access to any variables or functions
 * in the constructor.
 */
Apple.getTypes = function() {
    return ['golden', 'granny', 'red', 'pink'];
}

/**
 * Public function that gets the default color
 */
Apple.prototype.getColor = function() {
    return Apple.color;
} 

/**
 * Public function that sets the color of the object instance.
 */
Apple.prototype.setColor = function(color) {
    this.color = color;
    return this.color;
}

var golden = new Apple();
golden.setColor('yellow');
alert('The color of the apple is ' + golden.color);

The second example simply defines an instance of Object, with a few properties set. The first one is much more interesting.

Functions in JavaScript have dual purposes, one as a normal function/procedure, and the other as the basis for prototypal inheritance, similar to a "class" in normal OOP.

For example:

var apple = function() {
    this.type = 'granny smith';
};
var myApple = new apple();
alert(myApple.type); // -> 'granny smith'

Here, we've defined a "class" called apple, with an initializer that sets the type property. myApple is then created as an instance of apple, and the type property gets set by the apple() initializer.

(As an aside, new apple() could also be called as new apple with the parenthesis omitted and the result is still the same, the initializer is still called, it just receives no arguments)

The other major thing that using new gives us is prototypal inheritance. All functions e with a prototype object that we can set properties on. Those properties then bee fallback values for instance objects that don't have their own value defined.

Example:

var greenApple = function() { };
var myApple = new apple();
alert(myApple.color); // -> undefined
greenApple.prototype.color = 'green'
alert(myApple.color); // -> green

Here, setting greenApple.prototype.color affected the color property for the myApple we had already created. This is what is referred to as prototypal inheritance, and it has a wide variety of uses.

Edit: The following refers to an earlier version of the question that was edited while I was writing this. You can safely ignore it unless you're especially interested.

Now, back to your first example:

var apple = new function() { ... }

Because you have the new keyword before the function definition, the effect is like creating the apple class, making a myApple object, then throwing the apple class away. If you had access to this class, you could use .prototype to add prototype properties, but you don't - all that's contained in the apple variable (in OOP terms) is an instance of the class, not the class itself.

Sorry, I'm still a little noob at javascript, but aren't these functions and not objects? Object-oriented, yes, but functions? Quite interested actually.

Oh, I've only used the first one. I think it looks clearer to me because it outright declares "new function".