Declaring static constants in ES6 classes?

javascript

class-properties

object-freeze

constants

byAnton Shumikhin·Feb 4, 2025

Achieve static constants in an ES6 class employing static getters. This technique enables property access on the class rather than an instance:

class MyClass {
  static get CONSTANT() {  // Like my love for JavaScript
    return 'fixed_value';  // And my fixed_value for coffee
  }
}

// Outputs: 'fixed_value'...ussual, boring, and immutable.
console.log(MyClass.CONSTANT);

This paradigm ensures immutability and ties the value tightly to the class.

Stone-cold immutability with Object.freeze()

Enhance the immutability level of your constants to "Sub-Zero" by using Object.freeze() on them. It guarantees read-only properties:

class MyClass {
  static get CONSTANT() { 
    return Object.freeze({ KEY: 'value' }); // Now it's as frozen as Elsa's heart.
  }
}

// Also as immutable as my diet resistance
console.log(MyClass.CONSTANT.KEY);

Using Object.freeze() makes the constant’s properties unchangeable, maintaining stability and integrity.

The ES7 crystal ball

Future-proof your work using the ES7 proposal for class properties. With the magic wand known as @babel/plugin-proposal-class-properties, your code ascends to a higher plane:

class MyClass {
  static CONSTANT = 'fixed_value'; // I like my JavaScript like I like my coffee: ES-next.
}

// Output: 'fixed_value'. See, we didn't even need a getter this time.
console.log(MyClass.CONSTANT);

Remember, using this incantation requires a build step with Babel and might trigger "Witch!" cries in less modern environments.

Constants: the community way

Export your constants from the module containing the class. It brings organization and peace to the land:

// constants.js: The home for wayward constants.
export const FIXED_VALUE = 'fixed_value';

// MyClass.js: Classy and clean.
import { FIXED_VALUE } from './constants';

class MyClass {
  static get CONSTANT() {
    return FIXED_VALUE; // Just borrowing it from the constant neighborhood.
  }
}

The modularity of this approach aids in maintainability leading to a happy kingdom of code.

Constants without static getters

A fallback approach for defining constants is employing Object.defineProperty(). This method sets non-writable properties:

class MyClass {}

// MyClass, I am your father... oh wait wrong script.
Object.defineProperty(MyClass, 'CONSTANT', {
  value: 'fixed_value', // currently immutable
  writable: false, // Like my schedule
  enumerable: true,
  configurable: false // No take-backs
});

console.log(MyClass.CONSTANT); // proof that we made our point

This strategy creates a property that stands strong against re-assignments or overwrites.

Alert: Stay away from prototype manipulation

Avoid direct handling of the prototype to declare constants. Unanticipated side effects may occur:

// Avoid this
MyClass.prototype.CONSTANT = 'fixed_value';

This adds the constant on every instance rather than the class, spiraling away from a true static constant.

explain-codes / Javascript / Declaring static constants in ES6 classes?

Linked

Simplest/cleanest way to implement a singleton in JavaScript



Static variables in JavaScript



Const in JavaScript: when to use it and is it necessary?



How to access the correct `this` inside a callback



Es6 class variable alternatives



What is the best way to implement constants in Java?



Private final static attribute vs private final attribute



Stone-cold immutability with Object.freeze()The ES7 crystal ball Constants: the community way Constants without static getters Alert: Stay away from prototype manipulation