Object syntax in javascript

Question

The book I am learning from says the following code is creating an object, but I am unsure as to how this works. The second section of code is another way I have learned, from an online tutorial. But what is the difference? I have tried to research this myself but am quite new to all of this and some of the explanations I do not understand. Are there advantages/disadvantages to using each one? Thanks in advance.

function Player (name , score , rank)
{
this.name = name ;
this.score = score ;
this.rank = rank ;
}
var playerOne = new Player ( "Craig" , 199 , "1st" ) ;

The following is the way I had done it previously ;

var playerOne = {name: "Craig" , score: 199 , rank: "1st"} ;
var playerTwo = {name: "Tohny" , score: 155522 , rank: "2nd"} ;

score 4 · Answer 1 · answered Oct 29 '13 at 17:51

Main difference is that the first one will have an extra object in its "prototype chain". The prototype chain is how you do inheritance in JavaScript.

Therefore, you can extend that object, and all the objects created from the Player constructor function will inherit those items.

function Player (name , score , rank)
{
this.name = name ;
this.score = score ;
this.rank = rank ;
}

Player.prototype.getNameRank = function() {
    return this.name + ":" + this.rank;
};

var playerOne = new Player ( "Craig" , 199 , "1st" ) ;

So now the playerOne object will inherit the getNameRank() method, while other objects created using the object literal syntax will be unaffected.

var nr = playerOne.getNameRank();

console.log(nr); // Craig:1st

All (well most anyway) objects that you create in JavaScript will inherit from the Object.prototype object. The object literal syntax in your second example has that object, and only that object, behind itself in the prototype chain.

The object from the constructor first has Player.prototype and then Object.prototype.

Other differences are that the `constructor` property will be different and `instanceof` operator will behave differently. — Ted Hopp, Oct 29 '13 at 18:25
@TedHopp: Very true. The extra object in the chain will have its own `.constructor` property, and will provide a positive result when `instanceof` is given the `Player` function *(assuming `Player.prototype` hasn't been replaced)*. — Blue Skies, Oct 29 '13 at 18:40

score 0 · Answer 2 · answered Oct 29 '13 at 17:51

The first code example is a constructor. From what I understand, it's a more strongly-typed way of creating objects since the parameters and members of that object are already defined.

The second code example does do the same thing, however there's nothing defining what the object should actually contain or how it should behave. It's not exactly a bad thing, but for some situations it's far less preferable and doesn't give you as much versatility as a constructor would.

score 0 · Answer 3 · answered Oct 29 '13 at 17:52

But what is the difference?

The first uses a constructor function, the second uses an object initializer.

Are there advantages/disadvantages to using each one?

Yes:

Constructor functions can be reused and have logic in them, so are good for when you need to make multiple objects that have the same characteristics. And particularly good when you need to modify those characteristics after you've written a bunch of code, since the code creating the objects is nice and contained.
Constructor functions can assign a prototype to the objects they create. If you put properties on Player.prototype, those properties are accessible to the objects created via new Player, because those objects are backed up by a prototype that gets assigned to them when they're created. You can't do that with an object initializer. (You can do it if you combine an object initializer with ECMAScript5's Object.create.)
Object initializers are explicit and fairly clear at the point of use, since you can see the name of each property you're creating, whereas since the arguments to the constructor functions are based on the order in which you supply them, it can be less clear at the point where you're creating the object (e.g., using the constructor function). If fact, sometimes you see constructor functions that accept an object as their argument, and then use properties from that object to populate the object they're creating.

score 0 · Answer 4 · answered Oct 29 '13 at 17:52

You can create objects in JavaScript in two ways.

Function constructors (in conjunction with the new keyword)
Object literals (the second way you show).

But really, the second way is just an alternative syntax for the following:

var playerOne = new Object();
playerOne.name = "Craig";
playerOne.score = 199;
playerOne.rank = "1st";
// ...

Object syntax in javascript

4 Answers4