JavaScript Class Syntax: Static Data Members

Question

I cannot find any information about how one defines static data members in JavaScript using the (relatively new) class syntax. Is it even possible? Please see the following example code:

class Foo {
  constructor() {
    this.name = 'Default Name for each Instance';
    // staticData1 = 'Static Data 1'; // syntax error
    let staticData2 = 'Static Data 2'; // undefined outside
  }

  doSthSpecial() {
    console.log('Executing a method from instance "' + this.name + '"');
  }

  static doSthStatic() {
    console.log('Executing a method that does the same for each instance of "Foo"');
  }
}

foo = new Foo();
console.log(foo.name);
foo.doSthSpecial();
Foo.doSthStatic();
// The problematic case:
console.log(Foo.staticData2);

This is a stage 2 proposition, no? So, it's not standardized. I'm solving for this by using babel.js. Edit: @shaochuancs explains it well. :) — Con Antonakos
– Con Antonakos, Commented Sep 26, 2016 at 14:21

shaochuancs · Accepted Answer · 2016-08-30 14:27:06Z

4

You can use Foo.staticData2 = 'Static Data 2' to define static data member of class Foo, after Foo itself is defined.

According to ES6, there is no static property inside class definition, only static method.

In ES7, there is a proposal on static field definition, currently it is at stage 2 (https://github.com/tc39/proposal-class-public-fields). Good new is: Babel has supported this proposal (https://babeljs.io/docs/plugins/transform-class-properties/).

answered Aug 30, 2016 at 14:27

shaochuancs

16.4k3 gold badges63 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris K Over a year ago

Okay, first point: That's a pitty because it cannot be done in (anonymous) class expressions like return class { /*...*/ } which are pretty nice otherwise. Second point: great, so i am looking forward to future version of the standard.

shaochuancs Over a year ago

Actually, if you use Babel to transform ES6/ES7 code, the stage 2 proposal syntax on static field can be used right now.

Chris K · Accepted Answer · 2016-08-31 07:30:56Z

4

I found a work-around that comes quite close to what is asked. One can use a computed property ("get method") and make it static. Then there is no need for the "()" function/method call syntax and it is available without any instance of the class. May be a little less efficient though. Example:

let Foo = class {
  static get staticData() {
    return 'Static Data';
  }
}

console.log(Foo.staticData);

answered Aug 31, 2016 at 7:30

Chris K

1,5861 gold badge15 silver badges20 bronze badges

Comments

OrganicCorridor · Accepted Answer · 2018-01-23 21:13:30Z

3

This works, and it keeps the messy details inside the class.

class cExample
{  
  static init_index() {
     cExample.index = 0;
  }   

  static get_index() {
     return ++cExample.index;
  }   
}

cExample.init_index();

example = new cExample();
console.log(cExample.get_index());  // 1
example = new cExample();
console.log(cExample.get_index());  // 2
example = new cExample();
console.log(cExample.get_index());  // 3

answered Jan 23, 2018 at 21:13

OrganicCorridor

1151 silver badge7 bronze badges

Comments

Guy Shahaf · Accepted Answer · 2019-09-19 14:52:22Z

2

Another workaround that works for me, not the most elegant but at least until ES7 is to locate the static members after the class:

class Field {

  constructor(index) {
    this.index = index;
  }

  getName(name) {
    return this.name;
  }
}

Field.DISPLAY_AS_TEXT = 2001;
Field.DISPLAY_AS_BARCODE = 2002;

answered Sep 19, 2019 at 14:52

Guy Shahaf

491 bronze badge

Comments

srkleiman · Accepted Answer · 2021-10-08 12:34:26Z

1

You can also initialize statics in the constructor:

class Foo {
  constructor () {
    if (Foo.myStatic === undefined) Foo.myStatic = 'XXX';
    // or if appropriate
    Foo.myStatic = Foo.myStatic || 'XXX';
    // or the ES2020
    Foo.myStatic = Foo.myStatic ?? 'XXX';
  }
}

answered Oct 8, 2021 at 12:34

srkleiman

7278 silver badges18 bronze badges

Collectives™ on Stack Overflow

JavaScript Class Syntax: Static Data Members

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related