Javascript ES6 - Enums inside classes used outside like a static enum

Question

I'd like to ask if it's possible to add an enum similar to:

STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }

inside a Class, and be able to use it in some other file with something similar to: object.updateState(Class.STATES.HIDDEN) without having to construct a new object like boxObject.updateState(new Box().STATES.HIDDEN)

Thank you.

That is possible, but why would you want to do that? I would use export const STATES = { … }; instead. And then you can import it where you need it in other files. — nils
– nils, Commented Mar 24, 2017 at 13:15

Community · Accepted Answer · 2017-05-23 11:46:41Z

You can achieve static data properties in multiple ways:

Use assignment:

const STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }; class Box {}; Box.STATES = STATES; console.log(Box.STATES.WIP); // Work in progress is the output

Use Object.defineProperty:

When you use Object.defineProperty you could make it read-only

const STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }; class Box {}; Object.defineProperty(Box, 'STATES', { value: STATES, writable: false, // makes the property read-only }); console.log(Box.STATES.WIP); // Work in progress is the output

Use static getter:

You can use ES6 static getter syntax to add the property in the class definition. You can make it read-only too defining just the getter.

const STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }; class Box { static get STATES() { return STATES; } } console.log(Box.STATES.WIP); // Work in progress is the output

All that being said, I agree with n00dl3. If you are using ES6 modules, using a named export seems more appropiate:

export const BOX_STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }; export default class Box {};

So you can import it like this:

import { BOX_STATES } from './path-to-box'; console.log(BOX_STATES.WIP); // Work in progress is the output

The const may be misleading there though. One can still do BOX_STATES.WIP = 'Wewy impowtant pewson' without an error, and change the value of the "constant".
The static getter in the third example above must be accessed by the class or class constructor, not a class instance. To get a class from an instance, use the constructor: Box.constructor.STATES.WIP. Mozilla doc on static provides further examples.
Another simple option can be using freeze() in this way: class Box { static STATES = Object.freeze({ WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }) }

n00dl3 · Accepted Answer · 2017-03-24 13:16:41Z

16

like this :

export class Foo{} Foo.SomeStaticEnum={BAR:"bar"};

but exporting a const seems more appropriate...

export const FOO={BAR:"bar"};

answered Mar 24, 2017 at 13:16

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

5 Comments

Maxime M. Over a year ago

Sorry for being late. You just about solved the problem mere minutes after the question was posted. So you get the checkmark despite the next person's more detailed answer.

h3dkandi Over a year ago

Why exporting separately is better?

n00dl3 Over a year ago

@h3dkandi Because declaring an empty class just to export a static property seems overkill : you declare 2 things while you just use a single one.

h3dkandi Over a year ago

What if the enum is used in conjunction with the class only? Say I have a class Beer and I have an enum Beer.StandardBeers and you use it lets say like this new Beer(Beer.StandardBeers) or sth.

n00dl3 Over a year ago

Well it's a big topic but, it's still better to keep it out of your class because if it is part of your class, it will always get imported wether you use it or not (import {myClass} from "x/y"). If you keep it separated (import {myClass} from "x/y",import {myEnum} from "x/y")and you import it separately, if you enable tree-shaking, you can only bundle the class or only the enum, which will make you gain a few bytes in your bundle size.

Anandaraja_Srinivasan · Accepted Answer · 2020-01-08 13:36:02Z

If you don't need pure ES6 and can use Typescript, please prefer it. Typescript has a nice ENUM with export options

Example:

export enum STATES { WIP = "Work in progress", ONLINE = "Online", ONLINE_MODIFIED = "Online, modified", HIDDEN = "Hidden" } export class SocialMedia { static state: STATES = STATES.HIDDEN; } console.log(SocialMedia.state); SocialMedia.state = STATES.WIP; console.log(SocialMedia.state);

Result:

Hidden Work in progress

Mohamed Salem Lamiri · Accepted Answer · 2018-11-16 15:45:45Z

Another simple way of doing this without the need of class

const BOX_STATES = { WIP: "Work in progress", ONLINE: "Online", ONLINE_MODIFIED: "Online, modified", HIDDEN: "Hidden" }; module.exports = BOX_STATES; console.log(BOX_STATES.WIP);

Make sure you import or require your file, as shown above.

Collectives™ on Stack Overflow

Javascript ES6 - Enums inside classes used outside like a static enum

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Related