By ntownsend

2010-02-27 20:34:28 8 Comments

I see this all the time: object literals declared such that some keys are surrounded with quotes and others are not. An example from jQuery 1.4.2:

jQuery.props = {
    "for": "htmlFor",
    "class": "className",
    readonly: "readOnly",
    maxlength: "maxLength",
    cellspacing: "cellSpacing",
    rowspan: "rowSpan",
    colspan: "colSpan",
    tabindex: "tabIndex",
    usemap: "useMap",
    frameborder: "frameBorder"

What is the significance of wrapping the first two property keys (for and class) with quotes, while leaving the others quote-less? Are there any differences at all?

I've been poking around the ECMAScript 5 specification; all I've been able to find is [Note 6 of Section 15.12.3, emphasis mine]:

NOTE 6 An object is rendered as an opening left brace followed by zero or more properties, separated with commas, closed with a right brace. A property is a quoted String representing the key or property name, a colon, and then the stringified property value. An array is rendered as an opening left bracket followed by zero or more values, separated with commas, closed with a right bracket.

However, this refers only to the stringification of JSON.


@Steve Mc 2010-02-27 20:51:25

Javascript has a lot of reserved words that are not actually used by the language which I think were reserved for possible future use. class is one of these even though Javascript does not actually use classes. Another is goto and there's absolutely no chance of that ever being used. The result, however, is that if you want to use these as a json key then it has to be quoted. Strictly speaking you should probably always quote your keys just to avoid the possibility of falling foul of the javascript unused reserved word trap (mind you - I never do).

@Sarfraz 2010-02-27 20:35:45

Javascript language keywords or reserved keywords are always surrounded by quotes in there.

@Karl 2012-10-26 16:30:52

There is a reason at this point (two plus years later) to quote object literal properties. If one wants to minify their code using the Closure Compiler they may need to make the properties accessible to other source files. In that case, they will want to avoid having symbols renamed by the compiler. By quoting the property name, the Closure Compiler will not minify (rename) them.

See: Removal of code you want to keep

(This applies to at least the ADVANCED_OPTIMIZATIONS setting.)

@Otto Allmendinger 2010-02-27 20:36:21

for and class are language keywords. Your interpreter would throw a SyntaxError when those are unquoted.

See section in the Spec you linked to.

@Taha Jahangir 2012-03-07 12:33:39

My interpreter (FF10) doesn't throw anything on {for:1,class:1,null:1} and treat them as regular keys.

@Taha Jahangir 2012-03-07 12:41:10

@Pointy 2010-02-27 20:35:56

Those are Javascript reserved words, and (though not really necessary) the syntax of the language requires that they be quoted.

Strictly speaking, pure "JSON" notation requires that all of the "key" strings be quoted. Javascript itself however is OK with keys that are valid identifiers (but not reserved words) being unquoted.

Related Questions

Sponsored Content

20 Answered Questions

27 Answered Questions

[SOLVED] Sorting an array of JavaScript objects by property

26 Answered Questions

[SOLVED] Iterate through object properties

23 Answered Questions

[SOLVED] Self-references in object literals / initializers

38 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

41 Answered Questions

[SOLVED] Sort array of objects by string property value

60 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

41 Answered Questions

[SOLVED] Detecting an undefined object property

24 Answered Questions

[SOLVED] How do I check if an object has a property in JavaScript?

  • 2008-09-25 19:27:06
  • sheats
  • 830665 View
  • 1323 Score
  • 24 Answer
  • Tags:   javascript

2 Answered Questions

[SOLVED] is there a mapping from HTML property names to DOM propety names?

  • 2013-01-27 04:38:25
  • cc young
  • 665 View
  • 1 Score
  • 2 Answer
  • Tags:   javascript html dom

Sponsored Content