24
var obj = { prop = [1,2,3] };

The code above contains a typo, there should be a colon instead of =. But what surprised me was the VM error message:

var obj = { prop = [1,2,3] };
            ^^^^^^^^^^^^^^
SyntaxError: Invalid shorthand property initializer

I searched for "JavaScript shorthand properties" but this term is still not clear to me. What does "Shorthand property" means in context of this error message?

exebook
  • 32,014
  • 33
  • 141
  • 226
  • 1
    `=` is only used to assign variable, not properties.. Replace `=` to `:` – choz Aug 15 '16 at 01:53
  • 7
    @choz It's pretty obvious that the OP knows that given their first sentence: "The code above contains a typo, there should be a colon instead of `=`.". – Paul Aug 15 '16 at 02:01
  • @Paulpro Either it wasnt there before or i totally missed it.. – choz Aug 15 '16 at 02:15
  • 1
    If someone will search for "shorthand property" landing here could be a good thing because it is not obvious that shorthand property relates to the object literal. – exebook Dec 25 '16 at 15:36
  • 2
    @exebook I agree this useful not really a duplicate. {Q: "what is X?", A: "Y"} !== {Q: "What is Y", A: "X"} – James Mar 21 '18 at 12:12
  • @James that is exactly that kind of logic often missed by close voters – exebook Mar 21 '18 at 12:14

3 Answers3

35

With ES6, you can use shorthand property names which allow you to write something like this.

var s = 'abc';
var n = 1;
var o = { s, n }; // This is equivalent to { s: s, n: n }

In your case, prop = [1,2,3] was parsed as one shorthand property (s and n in the example above), but it was not a proper property name.

snak
  • 6,483
  • 3
  • 23
  • 33
  • 1
    I don't think being an invalid property name has anything to do with it? Changing `prop` to anything else produces the same error. – Drazen Bjelovuk Jul 03 '18 at 19:30
  • You mean this is equivalent to `{ s: 'abc', n: 1 }` right? – Jwan622 Dec 19 '18 at 19:06
  • 5
    @Jwan622 No. `{ s, n }` is syntactically equivalent to `{ s: s, n: n }`, and it will be evaluated to `{ s: 'abc', n: 1 }` in this context. – snak Dec 19 '18 at 23:39
7

Firefox has a different error message, which in my opinion is more useful:

SyntaxError: missing : after property id

That is, there is a missing :. As you say, you should use : instead of =.

To make it clear, "shorthand property" has no meaning in the ES6 spec. It's just some expression Chrome invented to help you noticing your error. It seems they failed.

snak's guess is that Chrome refers to a PropertyDefinition consisting of an IdentifierReference, used in an ObjectLiteral. Clearly prop = [1,2,3] is not an IdentifierReference, so it might make sense to complain about it. It would make even more sense to complain that it's not a PropertyDefinition in the much more common form of PropertyName : AssignmentExpression. Or MethodDefinition.

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 3
    The question already states this: "The code above contains a typo, there should be a colon instead of =". The question is about why the error is worded that way. – Evan Trimboli Aug 15 '16 at 02:12
  • @EvanTrimboli Yes. You should read between the lines. My answer was an attempt to say "stop using a stupid browser like Chrome which gives such non-sense misleading error messages" in a polite way. – Oriol Aug 15 '16 at 02:24
  • 3
    Ok, well that still doesn't answer the question. – Evan Trimboli Aug 15 '16 at 02:32
  • @EvanTrimboli The question is "What does "Shorthand property" means in context of this error message?". The answer is "It's just some rubbish random message your browser decided to show there", other browsers use better messages. – Oriol Aug 15 '16 at 02:42
  • 2
    They are commonly referred to as shorthand property initializers: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer – Evan Trimboli Aug 15 '16 at 03:48
  • Agree with the answer. It is the same error message with different wording. – Salman A Aug 15 '16 at 17:42
  • @EvanTrimboli the referenced mdn article states a generic mean of object initialization, not this very error message, which seems -as Oriol claims- to be confined to chrome's lingo. – polendina Sep 05 '22 at 22:05
0

Since there is no official explanation from MDN I can only assume what this might mean.

Consider the following:

There are two ways of creating an array.

The long way (sort of):

var cars = new Array("Saab", "Volvo", "BMW");

The short way:

var cars = ["Saab", "Volvo", "BMW"];

The long and short way is more obvious when dealing with the creation of objects:

The long way:

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";

The short way:

var person = {firstName: "John", lastName: "Doe"};
Robert
  • 10,126
  • 19
  • 78
  • 130