Understanding the different ways of creating JavaScript objects [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update th开发者_运维知识库e question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

I'm messing around with different ways of structuring code and I've got a hard time identifying the differences between ways to create objects. Is there a concise but thorough reference to read up on this stuff?

In the example below, I can reference subclass1 and subclass2 the same way, and they appear to act the same. But I know everything in JS is done for a reason. What are the differences and when should I use one style vs the other?

Thanks very much!

var ParentObj = {
    'subclass1' : {
        group1 : {
            'property1' : 'val1', 
            'property2' : true, 
            'property3' : 'val3'
        },
        group2 : {
            'property1' : 'val1', 
            'property2' : true, 
            'property3' : 'val3'
        }
    } //end first subclass
    subclass2 : {
        group1 : 'sharepoint',
        specialstuff: {
            specprop1: ["some settings", "some more settings", "lots of settings", "maybe a switch", "etc etc etc"],
            specprop2 : 'some plain text message'
        }
    }
}; //end ParentObj

---

The syntax you're currently using is Object Literal syntax, and is perfectly acceptable given what you've shown here. If you reach a point where you need to add member functions to multiple classes you'll want to read up on Prototypal Inheritance. Otherwise, you're doing just fine IMO.

---

Assuming you mean different ways of creating Object Literals and their keys, enclosing the key with quotations would be the best way to go. There are a number of reasons:

A: If you want to give the key a name that is longer than one word, a symbol, or some other character, you'll have to use quotations.

var obj = {"some name": 1337, "¤": "š"}; 
alert(obj["some name")); // Shows "1337"
alert(obj["¤"]); // Shows "š"

B: Using quotations allows you to use reserved words. Without them, the key might not be accessible if the key's name is a reserved word.

var obj = {"class": 10}; // "Class" is a reserved word
alert(obj["class"]); // Shows "10"
// Using "obj.class" might give unexpected errors in some browsers

C: Always using quotations will pretty much mean it's JSON ready, if need be.

---

The only real difference is that you can make non valid symbol names that way:

var x = { 'some text': { prop1: true } }; // Valid
var x = { some text: { prop1: true } }; // Invalid

You would only be able to access that via the indexer (aka x['some text']), but it works.

---

When declaring a property with this type of syntax:

var myObject = {group1 : 'sharepoint'};

you must use quotes around the property name anytime it is not a legal javascript variable name. That would include anytime it includes a space, starts with a number or includes any other character that is not legal in a javascript variable name (such as +-*&^%). It is safe to always include the quotes. Quotes are not required if the property name is safe.

Here's one explanation of what types of names would require the quotes: http://www.codelifter.com/main/tips/tip_020.shtml. If you aren't sure, put the quotes in. If you want to be consistent, always use the quotes or never use the quotes and never use identifiers that aren't legal javascript variable names. Your choice.