CODEWITHSUNDEEP
javascriptes6-classecmascript-next
Avery235
Avery235

Reputation: 5326

Weird behavior when declaring class property with semicolon

class SomeClass {
  x: 5;
  y = 10;
}

const c = new SomeClass();
alert(c.x + ' : ' + c.y);

Edit mqkw2zk94j

Why is the code compilable but the value of c.x is undefined?

What is the effect of declaring a class property with :?

Upvotes: 0

Views: 211

Answers (2)

Bergi
Bergi

Reputation: 665145

The code is not valid ES6.

You seem to be "compiling" with babel, and have inadvertently enabled the flow syntax extension (and also class properties for the second line). In flow, x: 5 is a class field type annotation. Of course, 5 as a type doesn't make sense, but apparently they allow pretty arbitrary expressions.

Upvotes: 0

Sagiv b.g
Sagiv b.g

Reputation: 31024

Regarding the x: 5 part, although this is a valid javascript code, there is no much use for it.
This is a javascript label and it used (if any) mostly within loops context.

So to answer your questions:

Why is the code compilable

Because technically this is a valid javascript code (yet not a valid class field).

but the value of c.x is undefined

Because the x is a label and not a class field.

What is the effect of declaring a class property with :

You get a label instead of a class field.

Addendum
Another common mistake, is this code of block: 

class SomeClass {
  z = () => {
    x: 5;
  };
}

You would think that z() will return an object with an x key: 

`{x:5}`

But actually you have a function with a label of x that just run an expression of 5.

Just for completeness sake, the fix will be either to add an explicit return and another set of curly braces

() => {return {x: 5}}

Or just wrap the whole thing with parentheses

() => ({x: 5})

Edit
As a followup to the comments below:
Just to be clear, your code compiles on several environments that i tested as well as stack-snippets as can be seen below: 

class SomeClass {
  x: 5;
  y = 10;
}

const c = new SomeClass();
console.log(c.x + ' : ' + c.y);

Upvotes: 2

Related Questions