5

In my code, I do the following (very simplified):

class AddOrSelectAddress {
    static body; // <-- Error

    static async open() {
        await $.get(basePath + 'Manage/AddOrSelectAddress', null, result => {
            this.body = document.createElement('div');
            this.body.innerHTML = result;
        });
        // ...
    }

    static someOtherMethod() {
        // do something with body
    }
}

My code works fine in Chrome. Firefox, though, complaints an error in the second line of code:

SyntaxError: bad method definition

I'm relatively new to class-based JavaScript programming. What am I doing wrong here?

Static variables in JavaScript doesn't really help me, because it mainly uses old syntax.

challet
  • 870
  • 9
  • 21
André Reichelt
  • 1,484
  • 18
  • 52
  • 1
    @Kevin.a the `static` keyword is valid in JS. – James Whiteley Oct 15 '19 at 14:31
  • Possible duplicate of [Static variables in JavaScript](https://stackoverflow.com/questions/1535631/static-variables-in-javascript) – Pac0 Oct 15 '19 at 14:32
  • @Kevin.a I oriented myself on this definition: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Klassen – André Reichelt Oct 15 '19 at 14:33
  • see static in MDN : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static . Note that it's for static _methods_ , not members – Pac0 Oct 15 '19 at 14:34
  • I'm not sure that static variables are allowed to be undefined though... doesn't this defeat the point of making it undefined? Can't you just have it as a property of the class instead? As in, put it in the constructor and just don't declare it on instantiating the class? – James Whiteley Oct 15 '19 at 14:34
  • @Pac0 Could you please explain me, how to fix my code? Only the `open` method needs to be accessed from outside. – André Reichelt Oct 15 '19 at 14:35
  • @AndréReichelt if you only need the `body` variable inside the `open` method, why don't you declare it inside the method? – James Whiteley Oct 15 '19 at 14:36
  • @JamesWhiteley It's actually accessed from a few places and methods in my class. But never from outside of the class. I have no idea, how to declase a private static variable, though. – André Reichelt Oct 15 '19 at 14:38

2 Answers2

8

Static class fields are a stage 3 proposal, meaning they're not yet an official part of the JavaScript language. (Stage 4 is the final stage.) You can read more about the proposal here and the proposal process here.

Currently, Chrome (as of version 72) is the only browser that supports static class fields.

To use this feature in other browsers you would need to use Babel with @babel/plugin-proposal-class-properties to transpile your code. If you're not already using Babel, however, this might be overkill.

Alternatively, you can assign a property to the class after initializing it. This isn't semantically identical, but works for your (and, indeed, most) use cases.

class AddOrSelectAddress {
  // ...
}

AddOrSelectAddress.body = 'some initial value';

You can see this working in the below snippet.

class AddOrSelectAddress {
  static changeBody(val) {
    this.body = val;
  }

  static someMethod() {
    console.log('in someMethod body is', this.body);
  }

  static someOtherMethod() {
    console.log('in someOtherMethod body is', this.body);
  }
}
AddOrSelectAddress.body = 'some initial value';

AddOrSelectAddress.someMethod();
AddOrSelectAddress.changeBody('some other value');
AddOrSelectAddress.someOtherMethod();

If you don't want to set an initial value for body then you could just omit the line (since accessing a nonexistent property of an object returns undefined), or you could explicitly set it to undefined.

Jordan Running
  • 102,619
  • 17
  • 182
  • 182
  • @AndréReichelt Does what, specifically, work for static fields? The code above is basically equivalent to the static class field in your question. (I've edited it to match the names you used in your code.) – Jordan Running Oct 15 '19 at 14:54
  • @AndréReichelt I have edited my answer to include a working snippet. – Jordan Running Oct 15 '19 at 15:09
1

Static methods are perfectly fine to use. However static properties are a recent addition that dont work in all browsers yet. It works in Chrome but like you said not in firefox. Please take a look at this article as it backs up my answer : https://javascript.info/static-properties-methods. To fix your issue you could declare the variable inside your static method.

Kevin.a
  • 4,094
  • 8
  • 46
  • 82