ES6 equivalent of the following pattern?

Question

I want to use static class properties (stage-0) in ES6 classes like so -

class Button {
  static size = {
    SMALL: "SMALL",
    BIG: "BIG"
  }
}

class UILibrary {
  consturctor() {
    this.button = new Button();
  }
}

// I can't access static properties of a class instance :(
const LibraryA = new UILibrary();
console.log(LibraryA.button.size.SMALL);

What is the best alternative for this?

EDIT:

This question is not about creating class properties in ES6/7 which is already supported in stage-0, nor about creating static methods. I am just looking to find a pattern that allows attaching of enum-like objects to class instances. Hence none of the duplicate question suggestions are valid.

`I don't understand why` - java and javascript are totally unrelated languages — Jaromanda X, Aug 24 '16 at 05:30
https://esdiscuss.org/topic/define-static-properties-and-prototype-properties-with-the-class-syntax — Jaunius Eitmantis, Aug 24 '16 at 05:32
@JaromandaX Lol, that's true. But I would like to know if there is a reason for doing so from a best practices point of view. — Shubham Kanodia, Aug 24 '16 at 05:32
`a reason for doing so` - doing what? all you've asked is why javascript isn't like java - it's like asking why java isn't like c++ — Jaromanda X, Aug 24 '16 at 05:33
@user3210476: Because JavaScript distinguishes instances from class objects (instead of mixing them up like Java, which doesn't even have class objects). — Bergi, Aug 24 '16 at 05:34
Alright. Not looking to have a java vs. javascript debate here. Just want the best alternative to the above code pattern. — Shubham Kanodia, Aug 24 '16 at 05:40
Good ol' [object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_literals)? — noppa, Aug 24 '16 at 05:54
@noppa Not sure what you mean. But using object literals without `static` would mean memory is allocated for the enums on every instance of the Class, which seems like a waste. — Shubham Kanodia, Aug 24 '16 at 06:00

score 3 · Answer 1 · edited May 23 '17 at 10:28

I can't access static properties of a class instance :(

Yes, if they are static properties then you need to access them on the constructor:

console.log(Button.size.SMALL);
console.log(LibraryA.button.constructor.size.SMALL);

(see here for a discussion of the differences)

I am just looking to find a pattern that allows attaching of enum-like objects to class instances.

If you want them to be available on the instances, just don't make them static:

class Button {
  // without the experimental syntax, do the assignment in the constructor
  size = {
    SMALL: "SMALL",
    BIG: "BIG"
  }
}

or, instead of dropping the static keyword, just put them on the prototype so that the object isn't recreated over and over:

class Button {}
Button.prototype.size = {
  SMALL: "SMALL",
  BIG: "BIG"
};

Or maybe you shouldn't put them enum on the class at all, and just use named exports of an ES6 module.

Thanks for your detailed answer. Prototype alternative looks interesting. Does it have any performance hits though? — Shubham Kanodia, Aug 24 '16 at 13:48
@user3210476: No, it takes less memory than the second sinppet in fact. The difference in lookup time between prototype properties and own properties is hardly measurable and depends a lot on the engine optimisations in place. — Bergi, Aug 24 '16 at 13:59

ES6 equivalent of the following pattern?

1 Answers1