Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

shorthand property name with *this*

The following code fails

let x = {this}

Why I cannot use shorthand property name with this?


error messages from browsers

chrome 66.0.3359.117 : Uncaught SyntaxError: Unexpected token }

firefox 59.0.1 : this is an invalid identifier

edge 41.16299.371.0 : The use of a keyword for an identifier is invalid

I don't quite get what these messages say.


Just to make it clear, the following code runs fine

let x = 5
let y = {x}
let z = {this:this}

console.log({x,y,z})
like image 687
apple apple Avatar asked Apr 19 '18 08:04

apple apple


People also ask

What is a shorthand property in Python?

Shorthand Properties With Shorthand Properties, whenever you have a variable which is the same name as a property on an object, when constructing the object, you can omit the property name. What that means is that code that used to look like this,

What is object property shorthand in ES6?

When ES6 was created object property shorthand was introduced. Object property shorthand enables us to simply pass in the name of the key as opposed to repeating the name and the key. Nothing has changed in the way the code works under the hood but the shorthand helps us to write less code! It is what is referred to as syntactic sugar.

What are CSS shorthand properties?

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

Can you omit the name of a property in JavaScript?

With Shorthand Properties, whenever you have a variable which is the same name as a property on an object, when constructing the object, you can omit the property name. can now look like this. Now, what if one of those properties was a function? A function that is a property on an object is called a method.


1 Answers

According to the ECMA spec (I have put in bold what is important):

12.2.6 Object Initializer

NOTE 1 An object initializer is an expression describing the initialization of an Object, written in a form resembling a literal. It is a list of zero or more pairs of property keys and associated values, enclosed in curly brackets. The values need not be literals; they are evaluated each time the object initializer is evaluated.

Syntax

  • ObjectLiteral[Yield] :
    • { }
    • { PropertyDefinitionList[?Yield] }
    • { PropertyDefinitionList[?Yield] , }
  • PropertyDefinitionList[Yield] :
    • PropertyDefinition[?Yield]
    • PropertyDefinitionList[?Yield] , PropertyDefinition[?Yield]
  • PropertyDefinition[Yield] :
    • IdentifierReference[?Yield]
    • CoverInitializedName[?Yield]
    • PropertyName[?Yield] : AssignmentExpression[In, ?Yield]
    • MethodDefinition[?Yield]
  • PropertyName[Yield] :
    • LiteralPropertyName
    • ComputedPropertyName[?Yield]
  • LiteralPropertyName :
    • IdentifierName
    • StringLiteral
    • NumericLiteral
  • ComputedPropertyName[Yield] : -[ AssignmentExpression[In, ?Yield] ]
    • CoverInitializedName[Yield] :
    • IdentifierReference[?Yield] Initializer[In, ?Yield]
  • Initializer[In, Yield] :
    • = AssignmentExpression[?In, ?Yield]

NOTE 2 MethodDefinition is defined in 14.3.

NOTE 3 In certain contexts, ObjectLiteral is used as a cover grammar for a more restricted secondary grammar. The CoverInitializedName production is necessary to fully cover these secondary grammars. However, use of this production results in an early Syntax Error in normal contexts where an actual ObjectLiteral is expected.


12.1 Identifiers

Syntax

  • IdentifierReference[Yield] :
    • Identifier
    • [~Yield] yield
  • BindingIdentifier[Yield] :
    • Identifier
    • [~Yield] yield
  • LabelIdentifier[Yield] :
    • Identifier
    • [~Yield] yield
  • Identifier :
    • IdentifierName but not ReservedWord

What this means is that in the shorthand let x = {Identifier} does not permit reserved words as Identifier. And this is a reserved word, look at 11.6.2 Reserved Words and onward. On the other hand we see that the expanded way of writing it is different:
let x = {PropertyName:AssignmentExpression} where PropertName is either ComputedPropertyName or LiteralPropertyName wich is IdentifierName that does not exclude the reserved words. Thus let x = {this: this} or let x = {class: 10} is no problem. It does not, however, explain why this is so, maybe it would complicate the grammar or make it ambiguous?

like image 76
einarmagnus Avatar answered Sep 21 '22 15:09

einarmagnus