In javascript, when creating properties, which is the right way or better syntax?

Question

properties(keys) can be accessed and set using the dot notation as well as the square brackets. any advice when to use dot prototype syntax

var myObj = {};   
myObj.myProp1 = 'value1'; //works, an expando property   
myObj[myProp2] = 'value2'; // FAILS, myProp2 is undefined
myObj["myProp2"] = 'value2'; // works, an expando property
myObj[2010]= 'value'; //note the key is number, still works, an expando property??   
myObj.2010 = 'value'; // FAILS. to use dot notation, key must be a string

myObj.prototype.myProp3 = 'value3' // whats the advantage?

Answer 1

When using the dot syntax, the propery name is an identifer:

var myObj = {};
myObj.myProp1 = "value1";
myObj.myProp2 = "value2";

As the property name has to follow the rules of identifier naming, it can for example not start with a digit.

When using the bracket syntax, the property name is a string:

var myObj = {};
myObj["myProp1"] = "value1";
myObj["myProp2"] = "value2";

What's used in the brackets can be a variable, or any kind of expression that results in a string:

var myObj = {};
var prop1 = "myProp1";
myObj[prop1] = "value1";
myObj["myProp" + 2] = "value2";

If you use a number as property name, it will automatically be converted to a string, so these have the same result:

myObj[2010] = "value";
myObj["2010"] = "value";

You can also use an object literal to set the values:

var myObj = { myProp1: "value1", myProp2: "value2" };

(Note that {} is also an object literal, only without properties.)

Using the prototype of an object is only useful if you have named object types (or otherwise assign a prototype to the object). When you create objects using an object literal each object has it's own prototype, so putting anything in the prototype has the same effect as putting it in the object.

Answer 2

The property addition should be either myObj.myProp or myObj["myProp"]. This is the ideally followed scenario and a good practice when used in javascript.

Answer 3

var myObj = function () {

};
myObj.prototype.myProp3 = 'value3' // whats the advantage?

This should be used if you want to use the myObj as a construct to create multiple objects. ie .

var obj1 = new myObj();

then obj1 will also get the myProp3 property

edit: edited the above example . to use myObj as a constructor, it should be declared as a function

Answer 4

In your case, myObj.prototype.myProp3 = 'value3' should not be used because object literals don't have prototypes. Well they do, but they don't have a prototype property (you'll see that myObj.prototype is undefined).

Prototypes are used on functions to set the default properties for all objects constructed from that function using the new keyword. It is not meant to be used for assigning properties to individual objects.

Answer 5

For me, it depends on how I will use the object.

If I'm going to use it like an associative array, a hash map, or where the dot syntax would be impossible, I use [ and ].

However, if I'm treating them like an object, I use the . syntax.

Answer 6

basically , there is no difference between accessing an object's property via the "." syntax or through the key.

var obj = new function(){this.x = "value";}
alert(obj.x === obj['x']); //it will output true

There are times when you can't use the "." , because the name of the property you're trying to access is not a valid variable name (as you pointed with your numeric key) :

var obj = new function(){this['my-value'] = "my value";}
alert(obj['my-value']); // it will output "my value"
alert(obj.my-value); // it will trigger an exception , because the javascript 
//interpretor interprets "obj.my-value" as the 
//property "my" of obj minus the variable "value"

The big difference is the way the browser handles your syntax . As you can see here , a friend of mine did some testing and it seems that Chrome and IE work a lot faster with the dot syntax while Firefox and Safari are more "keen on" the key syntax.
In conclusion, you can use almost every time either one of them , although there are situations where the "." comes a bit "unprepared".

About the prototype syntax, well, when you define an object you can attach members to every instance , but you can also attach members to the prototype of the object, meaning that whenever a new object of your defined type is created, it will automatically inherit that member from it's prototype. I think it's better understood with an example:

function Point(x,y){this.x = x;this.y = y;}
Point.prototype.toString = function(){
  return "I am a point with my x coord at "+this.x+" and my y coord at "+this.y;
}

function Point2(x,y){
  this.x = x;
  this.y = y;
  this.toString = function(){
    return "I'm a point too.I'm at x:"+this.x+", y:"+this.y;
  };
}

When you create a new Point2, it's toString method an instance method and the javascript interpretor allocates memory for this method.
When you create a 'new Point', it's toString method will be chained on it's prototype property. That means that no memory is allocated for that method.

var p = [], p2 = [];
for(var i = 0; i < 100000000; i++)
   {
     p.push(new Point(0,0));
     p2.push(new Point2(0,0));
   }

If you test this, you'll see that both of the objects are working perfect, but your Point2 objects will take a bit more memory out of your system. Why is that?
The thing is that when you call a new Point()'s toString() method, the object realizes that it doesn't have a member called "toString" and it starts to search for it up it's prototype chain and returns the 'toString' member found in the object's declaration.
In the above example, all of the p's items will point their toString method to the one mentioned in the prototype, while all of p2's items will point to their each copy of the method.
In addition, if you later want to modify the toString method, it will be very easy to modify it for all the Point instances :
Point.prototype.toString = function(){return "I'm a smarter point";}; After that, every instance of new Point will return "I'm a smarter point" when you call it's toString method.
If you try to modify it for the Point2 instances, it's a bit harder. You will find out that Point2.toString = function(){return "I'm a dumber point";} will not work as expected, you will have to manually change the method for each instance :

for(var i in p2)
  p2[i].toString = function(){return "I'm a dumber point";};

I'll let you decide on which method is better :P