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})
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,
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.
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.
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.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With