Search code examples
javascriptlanguage-lawyerecmascript-5

Do reserved words need to be quoted when set as property names of JavaScript objects?


Given an object literal, or jQuery(html, attributes) object, does any specification state that reserved words, or future reserved words MUST be quoted?

Or, can, for example, class be set as a property name of an object without using quotes to surround the property name, without the practice being contrary to a specification concerning identifiers, property names, or use of reserved words?

Seeking a conclusive answer as to this question to avoid confusion.

let objLit = {
  class: 123,
  var: "abc",
  let: 456,
  const: "def",
  import: 789
}

console.dir(objLit);

jQuery("<div>012</div>", {
  class: "ghi"
})
.appendTo("body");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

Related:

Specification

Identifier Names are tokens that are interpreted according to the grammar given in the “Identifiers” section of chapter 5 of the Unicode standard, with some small modifications.
An Identifier is an IdentifierName that is not a ReservedWord


Solution

  • ECMAScript 5+

    No, quotes were not needed since ECMAScript 5. Here's why:

    As mentioned in your post, from the ECMAScript® 5.1 Language Specification:

    7.6 Identifier Names and Identifiers

    Identifier Names are tokens that are interpreted according to the grammar given in the “Identifiers” section of chapter 5 of the Unicode standard, with some small modifications. An Identifier is an IdentifierName that is not a ReservedWord (see 7.6.1).

    [...]

    Syntax

    Identifier ::
      IdentifierName but not ReservedWord
    

    By specification, a ReservedWord is:

    7.6.1 Reserved Words

    A reserved word is an IdentifierName that cannot be used as an Identifier.

    Syntax

    ReservedWord :: 
      Keyword
      FutureReservedWord
      NullLiteral
      BooleanLiteral
    

    This includes keywords, future keywords, null, and boolean literals. The full list is as follows:

    7.6.1.1 Keywords

    break    do       instanceof typeof
    case     else     new        var
    catch    finally  return     void
    continue for      switch     while
    debugger function this       with
    default  if       throw 
    delete   in       try   
    

    7.6.1.2 Future Reserved Words

    class enum   extends super
    const export import
    

    7.8.1 Null Literals

    null
    

    7.8.2 Boolean Literals

    true
    false
    

    The above (Section 7.6) implies that IdentifierNames can be ReservedWords, and from the specification for object initializers:

    11.1.5 Object Initialiser

    [...]

    Syntax

    ObjectLiteral :
      { }
      { PropertyNameAndValueList }
      { PropertyNameAndValueList , }
    

    Where PropertyName is, by specification:

    PropertyName :
      IdentifierName
      StringLiteral
      NumericLiteral
    

    As you can see, a PropertyName may be an IdentifierName, thus allowing ReservedWords to be PropertyNames. That conclusively tells us that, by specification, it is allowed to have ReservedWords such as class and var as PropertyNames unquoted just like string literals or numeric literals.


    ECMAScript <5

    To go more in depth as to why this wasn't allowed in previous versions before ES5, you have to look at how PropertyName was defined. Per the ECMAScript® 3 Language Specification:

    PropertyName :
      Identifier
      StringLiteral
      NumericLiteral
    

    As you can see, PropertyName was an Identifer - not an IdentifierName, thus leading to the inability for ReservedWords as PropertyNames.