Is there a JavaScript syntax that lets me do the following more succinctly?

class MyClass {
    static get myProp() {
        return 1;
    }
}

It is not a huge deal, but I'd like to know if there was something that was like an arrow function that lets me make it just a little more streamlined, something like:

class MyClass {
    static get myProp = () => 1;
}

I know I could write it like this (though not a safe equivalent):

class MyClass {}
MyClass.myProp = 1;

Or this more-difficult-to-read and longer alternative:

class MyClass {}
Object.define(MyClass, 'myProp', { get: () => 1; });

But that feels like an abuse of the class syntax.

Is there a JavaScript syntax that lets me do the following more succinctly?

class MyClass {
    static get myProp() {
        return 1;
    }
}

It is not a huge deal, but I'd like to know if there was something that was like an arrow function that lets me make it just a little more streamlined, something like:

class MyClass {
    static get myProp = () => 1;
}

I know I could write it like this (though not a safe equivalent):

class MyClass {}
MyClass.myProp = 1;

Or this more-difficult-to-read and longer alternative:

class MyClass {}
Object.define(MyClass, 'myProp', { get: () => 1; });

But that feels like an abuse of the class syntax.

• javascript
• ecmascript-6

• See also stackoverflow./questions/31362292/… - it seems 'arrow methods' are (still?) an experimental ES7 feature – le_m Commented May 15, 2017 at 16:12
• 1 Most times when people do static get myProp() { ... they don't really need read-only property. It's just idiomatic way to lift MyClass.myProp = 1 above constructor (e.g. useful for AngularJS $inject annotations). There's no alternative except the ones you've listed. static get myProp = () => 1 is obviously not supported because there's no reason to let it be assigned to anything but function. – Estus Flask Commented May 15, 2017 at 16:25
• 2 What do you mean by "though not a safe equivalent"? – Bergi Commented May 15, 2017 at 17:07
• 1 @le_m: Yep, still on track, currently in stage 2: github./tc39/proposals (Public Class Fields) :) It may or may not get into the spec next year (kinda impossible to know with these proposals). – Felix Kling Commented May 15, 2017 at 17:24
• 1 @samanime I could also overwrite the "real getter" if I wanted to, though not with simple assignment. But really, since there is no dynamic putation of the value, you should not use a getter at all - regardless whether with or without arrow functions. – Bergi Commented May 15, 2017 at 20:26

2 Answers 2

There is a better way to do it. It can be done using Babel Preset for class-transform. The preset to get this particular feature is 'preset-stage-2'.

The documentation page of babel for preset-stage-2: https://babeljs.io/docs/plugins/preset-stage-2/

Use Case: In your .bablerc file ad the present.

{
  "presets": ["stage-2"]
}

Note: it is a separate npm module so install it beforehand.

You can't use arrow functions to define class functions within a class declaration. Attempting to do so generates a syntax error.

The following code:

class MyClass {
  static get myVal() {
    console.log(this);
    return 1;
  }

  static get yourVal = () => {
    console.log(this);
    return 2;
  }
}

Produces this error:

{
  "message": "Uncaught SyntaxError: Unexpected token =",
  "filename": "https://stacksnippets/js",
  "lineno": 19,
  "colno": 22
}

And this code:

class MyClass {
  dogs = (val) => {
   console.log('Bark, bark', val);
  }
}

produces this error:

{
  "message": "Uncaught SyntaxError: Unexpected token =",
  "filename": "https://stacksnippets/js",
  "lineno": 14,
  "colno": 12
}

This code:

class MyClass {}
Object.define(MyClass, 'myProp', { get: () => 1; });

Is just the ES5 version to this code:

class MyClass {
  static get myProp() { return 1; }
}

This code:

class MyClass {}
MyClass.myProp = 1;

Is does attach myProp to the prototype of the class and is the equivalent of a static variable. But that value can be changed. So if you want a read only property then you need one of the above setters..

In this code:

class MyClass {
  static get myVal() {
    return 1;
  }
}
MyClass.yourVal = 33;

console.log(MyClass.myVal);
console.log(MyClass.yourVal);

We get the output of 1 and 33. Which is what was expected