CODEWITHSUNDEEP
javascriptoop
Nasir War
Nasir War

Reputation: 21

How to declare read-only static properties inside Javascript Class?

How to declare read-only static properties in Javascript Class? I'm trying to declare read-only static properties inside javascript class, not able to figure out how to do it.. PLEH Any solution besides Object.defineProperty(obj, prop, descriptor)

Something like this...

class KeyHandler  {
static readonly  KEYS = {
        DIRECTOR: 'director',
        VISION: 'vision',
        ABOUT: 'about',
    }
}

Upvotes: 2

Views: 3075

Answers (2)

raina77ow
raina77ow

Reputation: 106483

While available in TS, there's no readonly modifier in JS (at least in June, 2021). There's a long discussion about it, but unless I miss something, it didn't result in anything yet.

You can prevent rewriting the property with getter functions (shown in other answers), but it seems you're more interested in preventing accidental modification of the value object instead. If so, one option available now is using Object.freeze to emulate readonly:

class KeyHandler {
   static KEYS = Object.freeze({
     DIRECTOR: 'director',
     VISION: 'vision',
     ABOUT: 'about',
   })
}

Quoting the docs:

A frozen object can no longer be changed; freezing an object prevents new properties from being added to it, existing properties from being removed, prevents changing the enumerability, configurability, or writability of existing properties, and prevents the values of existing properties from being changed. In addition, freezing an object also prevents its prototype from being changed.

After that, any attempt to modify KeyHandler.KEYS innards will throw in strict mode. This doesn't block attempts to reassign this property though: this...

KeyHandler.KEYS = `Now I'm changed!`

... still works. To disallow this behaviour too, you'll have to combine:

const KEYS = Object.freeze({
  DIRECTOR: 'director',
  VISION: 'vision',
  ABOUT: 'about',
});

class KeyHandler {
   static get KEYS() { return KEYS }
}

Now attempt to rewrite the property will throw in strict mode, too:

TypeError: Cannot set property KEYS of class KeyHandler {
  static get KEYS() { return KEYS } 
} which has only a getter

Upvotes: 6

traktor
traktor

Reputation: 19376

You could use a getter for the static property - attempt to write to it errored in Firefox and Web-kit when tested. For reasons unknown, writing to the getter property doesn't error when running the code snippet below on Stack Overflow, even though writing to the property didn't succeed.

class A {
  static get say() {
    return function say() {
      console.log( "this of say function is: %s", this.name);
    }
  }
}

A.say()
A.say = "hello";
console.log(A);

Upvotes: 0

Related Questions