How do I make a "public static field" in an ES6 class?

Question

I'm making a Javascript class and I'd like to have a public static field like in Java. This is the relevant code:

export default class Agent {     CIRCLE: 1,     SQUARE: 2,     ... 

This is the error I get:

line 2, col 11, Class properties must be methods. Expected '(' but instead saw ':'. 

It looks like ES6 modules don't allow this. Is there a way to get the desired behavior or do I have to write a getter?

Answer 1

You make "public static field" using accessor and a "static" keyword:

class Agent {     static get CIRCLE() {       return 1;     }     static get SQUARE() {       return 2;     } }  Agent.CIRCLE; // 1 

Looking at a spec, 14.5 — Class Definitions — you'd see something suspiciously relevant :)

ClassElement[Yield] :
  MethodDefinition[?Yield]
  static MethodDefinition[?Yield] ;

So from there you can follow to 14.5.14 — Runtime Semantics: ClassDefinitionEvaluation — to double check if it really does what it looks like it does. Specifically, step 20:

1. For each ClassElement m in order from methods
   1. If IsStatic of m is false, then
      1. Let status be the result of performing PropertyDefinitionEvaluation for m with arguments proto and false.
   2. Else,
      1. Let status be the result of performing PropertyDefinitionEvaluation for m with arguments F and false.
   3. If status is an abrupt completion, then
      1. Set the running execution context’s LexicalEnvironment to lex.
      2. Return status.

IsStatic is defined earlier in 14.5.9

ClassElement : static MethodDefinition
Return true.

So PropertyMethodDefinition is called with "F" (constructor, function object) as an argument, which in its turn creates an accessor method on that object.

This already works in at least IETP (tech preview), as well as 6to5 and Traceur compilers.

Answer 2

Since ECMAScript 2022, you can do something like this, similar to traditional class-oriented languages like Java and C#:

class MyClass {     static myStaticProp = 42;     myProp = 42;     myProp2 = this.myProp;     myBoundFunc = () => { console.log(this.myProp); };      constructor() {         console.log(MyClass.myStaticProp); // Prints '42'         console.log(this.myProp); // Prints '42'         this.myBoundFunc(); // Prints '42'     } } 

The above is equivalent to:

class MyClass {     constructor() {         this.myProp = 42;         this.myProp2 = this.myProp;         this.myBoundFunc = () => { console.log(this.myProp); };          console.log(MyClass.myStaticProp); // Prints '42'         console.log(this.myProp); // Prints '42'         this.myBoundFunc(); // Prints '42'     } } MyClass.myStaticProp = 42; 

The features were added in the "Static Class Features" and "Class Fields" proposals by Daniel Ehrenberg et al. Google Chrome (and new Edge) started supporting both proposals in version 72, equivalent to Node.js 12+. Firefox supports public instance fields since version 69 and static instance fields since version 75. Safari supports both since version 14.1. See more info at caniuse.com.

For older browsers that don't yet support these features, you can use Babel to transpile class fields. This requires @babel/plugin-proposal-class-properties to be enabled (enabled by default in @babel/plugin-env starting from v7.14.0).

---

Compared to @kangax's solution of declaring a getter, this solution can also be more performant, since here the property is accessed directly instead of through calling a function.

---

Edit: A unified class fields proposal is now at stage 3.

Edit (February 2020): The static class features have been split out into a different proposal. Thanks @GOTO0!

Edit (March 2021): With the exception of Safari, all major browsers released after April 2020 now support this feature!

Edit (June 2021): Both proposals are accepted by TC39, the ECMAScript language committee, and Safari shipped this feature in version 14.1!